feat: fix several misc ux issues

unigraph-dev · Apr 14, 2022 · 3487131 · 3487131
1 parent e814e0f
commit 3487131
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 22 deletions.
diff --git a/packages/unigraph-dev-explorer/src/Workspace.tsx b/packages/unigraph-dev-explorer/src/Workspace.tsx
@@ -36,10 +36,10 @@ import { MobileBar } from './components/UnigraphCore/MobileBar';
 import { CustomDragLayer } from './CustomDragLayer';
 
 export function WorkspacePageComponent({ children, maximize, paddingTop, id, tabCtx }: any) {
-    const [_maximize, setMaximize] = React.useState(maximize);
-    tabCtx.setMaximize = (val: boolean) => {
-        setMaximize(val);
-    };
+    // const [_maximize, setMaximize] = React.useState(maximize);
+    // tabCtx.setMaximize = (val: boolean) => {
+    //     setMaximize(val);
+    // };
     const memoTabCtx = React.useMemo(() => tabCtx, [id]);
 
     return (
@@ -49,15 +49,15 @@ export function WorkspacePageComponent({ children, maximize, paddingTop, id, tab
                     width: '100%',
                     height: '100%',
                     overflow: 'auto',
-                    paddingTop: _maximize || !paddingTop ? '0px' : '12px',
+                    paddingTop: maximize || !paddingTop ? '0px' : '12px',
                 }}
             >
                 <Container
-                    maxWidth={_maximize ? false : 'lg'}
+                    maxWidth={maximize ? false : 'lg'}
                     id={`workspaceContainer${id}`}
                     disableGutters
                     style={{
-                        paddingTop: _maximize || !paddingTop ? '0px' : '12px',
+                        paddingTop: maximize || !paddingTop ? '0px' : '12px',
                         height: '100%',
                         display: 'flex',
                         flexDirection: 'column',

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -7,10 +7,17 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { useSwipeable } from 'react-swipeable';
 import { UnigraphObject, getRandomInt, getRandomId } from 'unigraph-dev-common/lib/utils/utils';
 import { AutoDynamicViewProps } from '../../types/ObjectView.d';
-import { DataContext, DataContextWrapper, isMobile, isMultiSelectKeyPressed, selectUid, TabContext } from '../../utils';
+import {
+    DataContext,
+    DataContextWrapper,
+    isMobile,
+    isMultiSelectKeyPressed,
+    selectUid,
+    TabContext,
+    trivialTypes,
+} from '../../utils';
 import { onUnigraphContextMenu } from './DefaultObjectContextMenu';
 import { StringObjectViewer } from './BasicObjectViews';
-import { excludableTypes } from './GraphView';
 import { getSubentities, isStub, SubentityDropAcceptor } from './utils';
 import { registerKeyboardShortcut, removeKeyboardShortcut } from '../../keyboardShortcuts';
 import { useFocusDelegate, useSelectionDelegate } from './AutoDynamicView/FocusSelectionDelegate';
@@ -56,7 +63,7 @@ export function AutoDynamicView({
 
     const shouldGetBacklinks =
         !finalOptions.ignoreBacklinks &&
-        (finalOptions.shouldGetBacklinks || (!excludableTypes.includes(object?.type?.['unigraph.id']) && !inline));
+        (finalOptions.shouldGetBacklinks || (!trivialTypes.includes(object?.type?.['unigraph.id']) && !inline));
 
     const dataContext = React.useContext(DataContext);
     const tabContext = React.useContext(TabContext);

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx
@@ -31,7 +31,7 @@ import { byElementIndex } from 'unigraph-dev-common/lib/utils/entityUtils';
 import { TransitionGroup } from 'react-transition-group';
 import { getDynamicViews } from '../../unigraph-react';
 import { AutoDynamicView } from './AutoDynamicView';
-import { DataContext, DataContextWrapper, hoverSx, isMobile, TabContext } from '../../utils';
+import { DataContext, DataContextWrapper, hoverSx, isMobile, TabContext, trivialTypes } from '../../utils';
 import { setupInfiniteScrolling } from './infiniteScrolling';
 import { DragandDrop } from './DragandDrop';
 
@@ -509,8 +509,7 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({
         },
         {
             id: 'no-trivial',
-            fn: (obj) =>
-                ['$/schema/markdown', '$/schema/subentity'].includes(obj?.type?.['unigraph.id']) ? null : obj,
+            fn: (obj) => (trivialTypes.includes(obj?.type?.['unigraph.id']) ? null : obj),
         },
         { id: 'no-hidden', fn: (obj) => obj._hide !== true },
         ...filters,

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx
@@ -5,7 +5,7 @@ import ForceGraph2D from 'react-force-graph-2d';
 import ReactResizeDetector from 'react-resize-detector';
 import _ from 'lodash';
 import { Checkbox, List, ListItem, Typography } from '@mui/material';
-import { TabContext } from '../../utils';
+import { TabContext, trivialTypes as excludableTypes } from '../../utils';
 
 const queryNameIndex = `@filter(type(Entity) AND (NOT eq(<_propertyType>, "inheritance"))) {
     uid 
@@ -20,7 +20,6 @@ const queryNameIndex = `@filter(type(Entity) AND (NOT eq(<_propertyType>, "inher
     <type> { <unigraph.id> }
 }`;
 
-export const excludableTypes = ['$/schema/subentity', '$/schema/interface/textual', '$/schema/markdown'];
 const getExcluded = (id: number) =>
     excludableTypes.reduce((prev, curr, idx) => ((id >> idx) % 2 ? [...prev, curr] : prev), [] as string[]);
 

diff --git a/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx b/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx
@@ -68,6 +68,7 @@ export function TodoTagView({
                     );
                 }
             }}
+            compact
             noRemover
             groupers={groupers}
             {...attributes}

diff --git a/packages/unigraph-dev-explorer/src/pages.tsx b/packages/unigraph-dev-explorer/src/pages.tsx
@@ -50,6 +50,7 @@ const pages: Record<string, any> = {
     },
     'examples/todo': {
         constructor: (props: any) => <TodoList {...props} />,
+        maximize: true,
         name: 'Todo List',
     },
     'examples/bookmarks': {

diff --git a/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx b/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx
@@ -7,7 +7,7 @@ import { UnigraphObject } from 'unigraph-dev-common/lib/utils/utils';
 import { AutoDynamicView } from '../components/ObjectView/AutoDynamicView';
 import { inlineTextSearch } from '../components/UnigraphCore/InlineSearchPopup';
 import { parseQuery } from '../components/UnigraphCore/UnigraphSearch';
-import { isElectron, typeHasDynamicView } from '../utils';
+import { isElectron, trivialTypes, typeHasDynamicView } from '../utils';
 
 const groups = [
     {
@@ -262,9 +262,7 @@ export function SearchOverlay({ open, setClose, callback, summonerTooltip, defau
                                 ? res.entities.filter(
                                       (el) =>
                                           typeHasDynamicView(el?.type?.['unigraph.id']) &&
-                                          !['$/schema/markdown', '$/schema/subentity'].includes(
-                                              el?.type?.['unigraph.id'],
-                                          ),
+                                          !trivialTypes.includes(el?.type?.['unigraph.id']),
                                   )
                                 : [null],
                         );
@@ -281,7 +279,7 @@ export function SearchOverlay({ open, setClose, callback, summonerTooltip, defau
     }, [input]);
 
     const defaultEl = (
-        <div>
+        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
             <InputBase
                 inputRef={tf}
                 autoFocus
@@ -310,7 +308,7 @@ export function SearchOverlay({ open, setClose, callback, summonerTooltip, defau
                 }}
                 placeholder="Start typing to search, Arrow keys to navigate, and Enter to select."
             />
-            <div>
+            <div style={{ overflow: 'auto' }} id="searchOverlay_scrollable">
                 {summonerTooltip ? <Typography>{summonerTooltip}</Typography> : []}
                 {entries}
                 {parsed?.type === 'command' || parsed?.type === ''
@@ -431,7 +429,8 @@ export function SearchOverlayPopover({ open, setClose, noShadow }: any) {
                 overflow: 'auto',
                 padding: '16px',
                 borderRadius: '8px',
-                display: searchEnabled ? 'block' : 'none',
+                display: searchEnabled ? 'flex' : 'none',
+                flexDirection: 'column',
             }}
         >
             {searchEnabled ? (

diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx
@@ -10,6 +10,13 @@ import { isJsonString } from 'unigraph-dev-common/lib/utils/utils';
 
 export const NavigationContext = React.createContext<(location: string) => any>((location: string) => ({}));
 
+export const trivialTypes = [
+    '$/schema/markdown',
+    '$/schema/subentity',
+    '$/schema/interface/textual',
+    '$/schema/person',
+];
+
 export function isValidHttpUrl(string: string) {
     let url;