fix(ui): minor ui hiccups

packages/unigraph-dev-common/src/api/unigraph.ts

@@ -151,16 +151,16 @@ export default function unigraph(url: string, browserId: string): Unigraph<WebSo
 
     const addState = (name: string, initialValue: any) => {
         if (!states[name]) {
-            const subs: ((newValue: any) => any)[] = [];
-            const state = {
+            const state: AppState = {
                 value: initialValue,
-                subscribers: subs,
-                subscribe: (subscriber: (newValue: any) => any) => subs.push(subscriber),
+                subscribers: [],
+                subscribe: (subscriber: (newValue: any) => any) => state.subscribers.push(subscriber),
+                unsubscribe: (cb: (newValue: any) => any) => state.subscribers = state.subscribers.filter(el => el !== cb),
                 setValue: undefined as any
             }
             state.setValue = (newValue: any) => {
                 state.value = newValue;
-                subs.forEach(sub => sub(state.value));
+                state.subscribers.forEach(sub => sub(state.value));
             }
             states[name] = state;
             return state;

packages/unigraph-dev-common/src/types/unigraph.ts

@@ -12,6 +12,7 @@ export type AppState<T = any> = {
     value: T,
     subscribers: ((newValue: T) => any)[],
     subscribe: (fn: (newValue: T) => any) => any,
+    unsubscribe: (fn: (newValue: T) => any) => any,
     setValue: (newValue: T) => any,
 }
 

packages/unigraph-dev-explorer/src/components/AppDrawer.tsx

@@ -17,6 +17,8 @@ import { mdiViewDashboardOutline, mdiBookOpenOutline, mdiPencilBoxMultipleOutlin
 const useStyles = makeStyles(theme => ({
   drawer: {
     width: "100%",
+    height: "100%",
+    overflow: "auto",
     flexShrink: 0,
   },
   drawerPaper: {

packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx

@@ -34,7 +34,15 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
 
     const [showSubentities, setShowSubentities] = React.useState(!!subentityExpandByDefault);
 
-    const DynamicViews = {...window.unigraph.getState('registry/dynamicView').value, ...(component ? component : {})}
+    const [DynamicViews, setDynamicViews] = React.useState({...window.unigraph.getState('registry/dynamicView').value, ...(component || {})});
+
+    React.useEffect(() => {
+        const cb = (newIts: any) => setDynamicViews(newIts);
+        window.unigraph.getState('registry/dynamicView').subscribe(cb);
+        return function cleanup () {
+            window.unigraph.getState('registry/dynamicView').unsubscribe(cb);
+        }
+    }, [])
 
     if (getSubentities(object)?.length > 0) {
         callbacks!.showSubentities = (show?: boolean) => { setShowSubentities(show === undefined ? !showSubentities : show) }
@@ -52,7 +60,7 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
                 subscribeToBacklinks(object.uid, cb, true);
             }
         }
-    }, [object?.uid, shouldGetBacklinks])
+    }, [object?.uid, shouldGetBacklinks, DynamicViews])
 
     React.useEffect(() => {
         const newSubs = getRandomInt();
@@ -146,6 +154,7 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
             padding: "2px 6px", 
             borderRadius: "6px",
             whiteSpace: "nowrap",
+            cursor: "pointer",
         }}
         onClick={() => {window.wsnavigator(`/library/backlink?uid=${object?.uid}`);}}
     >

packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicViewDetailed.tsx

@@ -31,7 +31,7 @@ export const AutoDynamicViewDetailed: DynamicViewRenderer = ({ object, options,
             setSubsId(newSubs);
         }
 
-        if (Object.keys(DynamicViewsDetailed).includes(object?.type?.['unigraph.id'])) {
+        if (Object.keys(DynamicViewsDetailed).includes(object?.type?.['unigraph.id']) && !callbacks?.isEmbed) {
             tabContext.setMaximize(DynamicViewsDetailed[object.type['unigraph.id']].maximize)
         }
 

packages/unigraph-dev-explorer/src/components/ObjectView/DynamicObjectListView.tsx

@@ -108,6 +108,7 @@ export type DynamicObjectListViewProps = {
     titleBar?: any,
     loadAll?: boolean,
     removeOnEnter?: boolean,
+    style?: any,
 }
 
 const DynamicListBasic = ({ reverse, items, context, listUid, callbacks, itemUids, itemRemover, itemGetter, infinite = true, noRemover, compact, removeOnEnter }: any) => {
@@ -201,7 +202,7 @@ export const TabButton = ({children, isSelected, onClick}: any) => {
  * @param param0 
  * @returns 
  */
-export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({ titleBar, items, groupers, groupBy, listUid, context, callbacks, itemGetter = _.identity, itemRemover = _.noop, filters = [], defaultFilter, reverse, virtualized, buildGraph, noBar, noRemover, noDrop, compact, subscribeOptions, loadAll, removeOnEnter }) => {
+export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({ style, titleBar, items, groupers, groupBy, listUid, context, callbacks, itemGetter = _.identity, itemRemover = _.noop, filters = [], defaultFilter, reverse, virtualized, buildGraph, noBar, noRemover, noDrop, compact, subscribeOptions, loadAll, removeOnEnter }) => {
 
     const classes = useStyles();
 
@@ -266,7 +267,7 @@ export const DynamicObjectListView: React.FC<DynamicObjectListViewProps> = ({ ti
     return <div style={{
         height: "100%", width: "100%",
         display: "flex", flexDirection: "column", overflowY: "hidden",
-        minHeight: (canDrop && !noDrop) ? "200px" : "",
+        minHeight: (canDrop && !noDrop) ? "200px" : "", ...(style ? style : {})
     }} ref={drop}>
         <DataContext.Provider value={{ rootUid: context?.uid || "0x0" }}>
             <div style={{ display: "flex" }}>

packages/unigraph-dev-explorer/src/components/UnigraphCore/CodeEditor.tsx

@@ -48,7 +48,7 @@ export const CodeEditor = ({id}: any) => {
 
     const [currentTab, setCurrentTab]: any = React.useState(0);
 
-    const currentView = <DetailedObjectView uid={currentUid} id={id} component={{"$/schema/executable": {view: ExecutableCodeEditor}}} />
+    const currentView = <DetailedObjectView uid={currentUid} id={id} component={{"$/schema/executable": {view: ExecutableCodeEditor}}} callbacks={{isEmbed: true}} />
 
     const [isUserCollapseOpen, setIsUserCollapseOpen] = React.useState(false);
     const [currentPackage, setCurrentPackage] = React.useState('');

packages/unigraph-dev-explorer/src/components/UnigraphCore/FavoriteBar.tsx

@@ -31,6 +31,7 @@ export const FavoriteBar = () => {
     return <React.Fragment>
         <DynamicObjectListView 
             items={fav}
+            style={{height: ""}}
             context={favEntity}
             listUid={favEntity?.['_value']?.children?.uid}
             itemGetter={(el: any) => el['_value']['_value']}

packages/unigraph-dev-explorer/src/components/UnigraphCore/ListObjectView.tsx

@@ -1,3 +1,4 @@
+import { EditAttributesSharp } from "@material-ui/icons"
 import { DynamicObjectListView } from "../ObjectView/DynamicObjectListView"
 
 /** Dependent on the specific definition of object!! */
@@ -22,11 +23,12 @@ export const ListObjectQuery = (uid: string) => `(func: uid(${uid})) {
     type { <unigraph.id> }
 }`
 
-export const ListObjectView = ({data, callbacks}: any) => {
+export const ListObjectView = ({data, callbacks, ...attributes}: any) => {
     const listValue = data?.['_value']?.children
 
     return <DynamicObjectListView
-        items={listValue['_value['] || []} context={data} listUid={listValue.uid} callbacks={{...callbacks}}
+        {...attributes}
+        items={listValue['_value['] || []} context={data} listUid={listValue.uid} callbacks={{...(attributes?.callbacks || {}), ...callbacks}}
         itemGetter={(el: any) => el['_value']['_value']}
         itemRemover={(uids) => {
             window.unigraph.deleteItemFromArray(listValue.uid, uids, data['uid'], callbacks?.subsId || undefined)
@@ -42,5 +44,6 @@ export const ListObjectView = ({data, callbacks}: any) => {
                 })
             }
         }}
+
     />
 }

packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx

@@ -52,7 +52,7 @@ export const NoteBlock = ({ data }: any) => {
             <Typography variant="body2" color="textSecondary">{subentities.length} immediate children, {parents.length} parents, {references.length} linked references</Typography>
         </div>
         <div>
-            {otherChildren.map((el: any) => <AutoDynamicView object={el} />)}
+            {otherChildren.map((el: any) => <AutoDynamicView object={el} inline />)}
         </div>
     </div>
 }