Skip to content

Commit

Permalink
Merge pull request #361 from unigraph-dev/fix/end-user-usability-poli…
Browse files Browse the repository at this point in the history 
…sh-jan

Fix/end user usability polish jan
  • Loading branch information
@thesophiaxu
thesophiaxu committed Jan 27, 2022
2 parents 48686a5 + 222a7ef commit 5a50d26
Show file tree
Hide file tree
Showing 15 changed files with 279 additions and 297 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
},
"scripts": {
"postinstall": "run-script-os",
"postinstall:linux:darwin": "(mkdir packages/unigraph-dev-explorer/public/vendor/ && cp -R ./node_modules/monaco-editor/ packages/unigraph-dev-explorer/public/vendor/monaco-editor_at_0.23.0/) || true",
"postinstall:windows": "pwsh -Command \"mkdir -Force packages/unigraph-dev-explorer/public/vendor/ && Copy-Item ./node_modules/@monaco-editor/ -Destination packages/unigraph-dev-explorer/public/vendor/monaco-editor_at_0.23.0/ -Recurse -Force\"",
"postinstall:linux:darwin": "(mkdir packages/unigraph-dev-explorer/public/vendor/ || true) && cp -R ./node_modules/monaco-editor/min/vs packages/unigraph-dev-explorer/public/vendor/monaco-editor_at_0.31.1/",
"postinstall:windows": "pwsh -Command \"mkdir -Force packages/unigraph-dev-explorer/public/vendor/ && Copy-Item ./node_modules/monaco-editor/min/vs -Destination packages/unigraph-dev-explorer/public/vendor/monaco-editor_at_0.31.1/ -Recurse -Force\"",
"backend-build": "yarn workspace unigraph-dev-backend build",
"backend-start": "yarn workspace unigraph-dev-backend start",
"explorer-start": "yarn workspace unigraph-dev-explorer start",
Expand Down
8 changes: 2 additions & 6 deletions packages/unigraph-dev-explorer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,10 @@
"bfj": "^7.0.2",
"camelcase": "^6.1.0",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"codemirror": "^5.58.3",
"css-loader": "4.3.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"dragselect": "^2.3.0",
"eslint-plugin-testing-library": "^3.9.2",
"eslint-webpack-plugin": "^2.5.2",
"file-loader": "6.1.1",
"flexlayout-react": "^0.5.5",
Expand Down Expand Up @@ -57,7 +55,6 @@
"prompts": "2.4.0",
"react-app-polyfill": "^2.0.0",
"react-big-calendar": "^0.38.5",
"react-codemirror2": "^7.2.1",
"react-dev-utils": "^11.0.3",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
Expand All @@ -74,7 +71,6 @@
"react-swipeable": "^6.1.2",
"react-transition-group": "^4.4.2",
"react-use": "^15.3.4",
"react-virtualized": "^9.22.3",
"rehype-katex": "^5.0.0",
"rehype-raw": "^6.1.0",
"remark-breaks": "^2.0.2",
Expand All @@ -98,7 +94,8 @@
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
"workbox-webpack-plugin": "5.1.4",
"monaco-editor": "^0.31.1"
},
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
Expand All @@ -111,7 +108,6 @@
"@types/react": "^17.0.1",
"@types/react-dom": "^17.0.1",
"@types/react-router-dom": "^5.1.6",
"@types/react-virtualized": "^9.21.13",
"@types/react-big-calendar": "^0.36.2",
"@types/turndown": "^5.0.1",
"@types/uuid": "^8.3.0",
Expand Down
44 changes: 21 additions & 23 deletions packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,27 @@ export function AutoDynamicView({
borderRadius: isSelected || isDragging ? '12px' : '',
}}
key={`object-view-${object?.uid}`}
onClickCapture={(ev) => {
if (isMultiSelectKeyPressed(ev)) {
ev.stopPropagation();
selectUid(componentId, false);
}
}}
onClick={(ev) => {
if (!noClickthrough && canClickthrough) {
typeof onClick === 'function'
? onClick(ev)
: (() => {
ev.stopPropagation();
ev.preventDefault();
window.wsnavigator(
`/library/object?uid=${object?.uid}&viewer=${'dynamic-view-detailed'}&type=${
object?.type?.['unigraph.id']
}`,
);
})();
}
}}
>
<div
id={`object-view-${object?.uid}`}
Expand All @@ -440,29 +461,6 @@ export function AutoDynamicView({
componentId,
})
}
onClickCapture={(ev) => {
if (isMultiSelectKeyPressed(ev)) {
ev.stopPropagation();
selectUid(componentId, false);
}
}}
onClick={(ev) => {
if (!noClickthrough && canClickthrough) {
typeof onClick === 'function'
? onClick(ev)
: (() => {
ev.stopPropagation();
ev.preventDefault();
window.wsnavigator(
`/library/object?uid=${
object?.uid
}&viewer=${'dynamic-view-detailed'}&type=${
object?.type?.['unigraph.id']
}`,
);
})();
}
}}
{...(attributes || {})}
ref={attach}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/unigraph-dev-explorer/src/components/ObjectView/DefaultCodeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { ExpandMore, Save } from '@material-ui/icons';
import { Actions } from 'flexlayout-react';
import { useEffectOnce } from 'react-use';

loader.config({ paths: { vs: './vendor/monaco-editor_at_0.23.0/min/vs' } });
loader.config({ paths: { vs: './vendor/monaco-editor_at_0.31.1/' } });

const unigraphDecl: string =
// eslint-disable-next-line import/no-webpack-loader-syntax
Expand Down
25 changes: 12 additions & 13 deletions packages/unigraph-dev-explorer/src/components/UnigraphCore/CodeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import {
ListItemText,
MenuItem,
Select,
Tab,
Tabs,
TextField,
} from '@material-ui/core';
import React from 'react';
Expand Down Expand Up @@ -69,17 +67,18 @@ export function CodeEditor({ id }: any) {
const [execPackages, setExecPackages]: any = React.useState([]);
const [currentUid, setCurrentUid]: any = React.useState('');

const [currentTab, setCurrentTab]: any = React.useState(0);

const currentView = (
<DetailedObjectView
uid={currentUid}
id={id}
components={{
'$/schema/executable': { view: ExecutableCodeEditor },
}}
callbacks={{ isEmbed: true }}
/>
const currentView = React.useMemo(
() => (
<DetailedObjectView
uid={currentUid}
id={id}
components={{
'$/schema/executable': { view: ExecutableCodeEditor },
}}
callbacks={{ isEmbed: true }}
/>
),
[currentUid, id],
);

const [isUserCollapseOpen, setIsUserCollapseOpen] = React.useState(false);
Expand Down
8 changes: 4 additions & 4 deletions packages/unigraph-dev-explorer/src/components/UserLibrary/UserLibraryObject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { TabContext } from '../../utils';
import { AutoDynamicViewDetailed } from '../ObjectView/AutoDynamicViewDetailed';
import { DefaultObjectView } from '../ObjectView/DefaultObjectView';

export default function DetailedObjectView({ uid, viewer, id, context, component, callbacks, isStub, type }: any) {
export default function DetailedObjectView({ uid, viewer, id, context, components, callbacks, isStub, type }: any) {
// console.log(uid, isStub, type)
const objectId: any = uid;

Expand All @@ -18,15 +18,15 @@ export default function DetailedObjectView({ uid, viewer, id, context, component

const [DynamicViewsDetailed, setDynamicViewsDetailed] = React.useState({
...window.unigraph.getState('registry/dynamicViewDetailed').value,
...(component || {}),
...(components || {}),
});

const tabContext = React.useContext(TabContext);

React.useEffect(() => {
window.unigraph
.getState('registry/dynamicViewDetailed')
.subscribe((newIts) => setDynamicViewsDetailed({ ...newIts, ...(component || {}) }));
.subscribe((newIts) => setDynamicViewsDetailed({ ...newIts, ...(components || {}) }));
}, []);

// eslint-disable-next-line consistent-return
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function DetailedObjectView({ uid, viewer, id, context, component
}}
callbacks={{ ...callbacks, subsId: myid, viewId: id }}
context={contextObj}
components={component}
components={components}
/>
</React.Fragment>
);
Expand Down
84 changes: 55 additions & 29 deletions packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,15 @@ export function PlaceholderNoteBlock({ callbacks }: any) {
);
}

export function OutlineComponent({ children, collapsed, setCollapsed, isChildren, createBelow }: any) {
export function OutlineComponent({
children,
collapsed,
setCollapsed,
isChildren,
createBelow,
displayAs,
parentDisplayAs,
}: any) {
return (
<div
style={{
Expand All @@ -146,31 +154,39 @@ export function OutlineComponent({ children, collapsed, setCollapsed, isChildren
>
V
</div>
<div
style={{
height: 'calc(100% + 4px)',
width: '1px',
backgroundColor: 'gray',
position: 'absolute',
left: '-12px',
display: isChildren ? '' : 'none',
}}
/>
<FiberManualRecord
style={{
fontSize: '0.5rem',
marginLeft: '8px',
marginRight: '8px',
...(collapsed
? {
borderRadius: '4px',
color: 'lightgray',
backgroundColor: 'black',
}
: {}),
}}
/>
<div style={{ flexGrow: 1 }}>{children}</div>
{displayAs === 'outliner' ? (
<>
<div
style={{
height: 'calc(100% + 4px)',
width: '1px',
backgroundColor: 'gray',
position: 'absolute',
left: '-12px',
display: parentDisplayAs === 'outliner' ? '' : 'none',
}}
/>
<FiberManualRecord
style={{
fontSize: '0.5rem',
marginLeft: '8px',
marginRight: '8px',
...(collapsed
? {
borderRadius: '4px',
color: 'lightgray',
backgroundColor: 'black',
}
: {}),
}}
/>
</>
) : (
[]
)}
<div style={{ flexGrow: 1, marginLeft: displayAs === 'outliner' || !parentDisplayAs ? '' : '24px' }}>
{children}
</div>
</div>
);
}
Expand Down Expand Up @@ -266,6 +282,7 @@ export function DetailedNoteBlock({
focused,
index,
componentId,
displayAs,
}: any) {
// eslint-disable-next-line no-bitwise
isChildren |= callbacks?.isChildren;
Expand Down Expand Up @@ -363,7 +380,7 @@ export function DetailedNoteBlock({
{
uid: data.uid,
componentId,
children: subentities.map((el: any) => el.uid),
children: isCollapsed ? [] : subentities.map((el: any) => el.uid),
type: data?.type?.['unigraph.id'],
root: !isChildren,
},
Expand All @@ -388,7 +405,7 @@ export function DetailedNoteBlock({
return function cleanup() {
inputDebounced.current.flush();
};
}, [JSON.stringify(subentities.map((el: any) => el.uid).sort()), data.uid, componentId]);
}, [JSON.stringify(subentities.map((el: any) => el.uid).sort()), data.uid, componentId, isCollapsed]);

const checkReferences = React.useCallback(
(matchOnly?: boolean) => {
Expand Down Expand Up @@ -541,6 +558,8 @@ export function DetailedNoteBlock({

React.useEffect(commandFn, [command]);

const childrenDisplayAs = data?._value?.children?._displayAs || 'outliner';

return (
<NoteViewPageWrapper isRoot={!isChildren}>
<div
Expand Down Expand Up @@ -908,6 +927,8 @@ export function DetailedNoteBlock({
createBelow={() => {
addChild(data, editorContext, elindex);
}}
displayAs={childrenDisplayAs}
parentDisplayAs={displayAs}
>
<AutoDynamicView
noDrag
Expand Down Expand Up @@ -978,6 +999,7 @@ export function DetailedNoteBlock({
attributes={{
isChildren: true,
isCollapsed: isCol,
displayAs: childrenDisplayAs,
setCollapsed: (val: boolean) => {
setIsChildrenCollapsed({
...isChildrenCollapsed,
Expand Down Expand Up @@ -1005,7 +1027,11 @@ export function DetailedNoteBlock({
})}
</DragandDrop>
) : (
<OutlineComponent isChildren={isChildren}>
<OutlineComponent
isChildren={isChildren}
displayAs={data?._value?.children?._displayAs || 'outliner'}
parentDisplayAs={displayAs}
>
<PlaceholderNoteBlock
callbacks={{
'add-child': () => noteBlockCommands['add-child'](data, editorContext),
Expand Down
Loading

0 comments on commit 5a50d26

Please sign in to comment.