fix(frontend): make backlink indicator faster and more accurate

unigraph-dev · Jan 27, 2022 · a5b3d04 · a5b3d04
1 parent 5a50d26
commit a5b3d04
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 27 deletions.
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -158,8 +158,8 @@ export function AutoDynamicView({
     }, [shortcuts]);
 
     React.useEffect(() => {
-        if (object?.uid?.startsWith('0x') && shouldGetBacklinks && dataContext.parents !== undefined) {
-            // console.log(dataContext.getParents(true));
+        if (object?.uid?.startsWith('0x') && shouldGetBacklinks) {
+            // console.log(object?.uid, dataContext.getParents(true));
             const cb = (newBacklinks: any) => {
                 const [pars, refs] = getParentsAndReferences(
                     newBacklinks['~_value'],
@@ -189,7 +189,7 @@ export function AutoDynamicView({
     React.useEffect(() => {
         const newSubs = getRandomInt();
         if (isObjectStub) {
-            console.log(tabContext);
+            // console.log(tabContext);
             if (subsId) tabContext.unsubscribe(subsId);
             let query = DynamicViews[object.type?.['unigraph.id']]?.query?.(object.uid);
             if (!query) {

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicViewDetailed.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicViewDetailed.tsx
@@ -4,8 +4,10 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { getRandomInt } from 'unigraph-dev-common/lib/api/unigraph';
 import { getRandomId } from 'unigraph-dev-common/lib/utils/utils';
 import { DynamicViewRenderer } from '../../global.d';
-import { TabContext } from '../../utils';
+import { subscribeToBacklinks } from '../../unigraph-react';
+import { DataContext, DataContextWrapper, TabContext } from '../../utils';
 import { ObjectEditor } from '../ObjectEditor/ObjectEditor';
+import { getParentsAndReferences } from './backlinksUtils';
 import { isStub } from './utils';
 
 export const AutoDynamicViewDetailed: DynamicViewRenderer = ({
@@ -22,6 +24,7 @@ export const AutoDynamicViewDetailed: DynamicViewRenderer = ({
     const [loadedObj, setLoadedObj] = React.useState<any>(false);
     const [subsId, setSubsId] = React.useState(getRandomInt());
 
+    const dataContext = React.useContext(DataContext);
     const tabContext = React.useContext(TabContext);
 
     const [DynamicViewsDetailed, setDynamicViewsDetailed] = React.useState({
@@ -34,6 +37,27 @@ export const AutoDynamicViewDetailed: DynamicViewRenderer = ({
         window.unigraph.getState('global/focused').value.uid === object?.uid && tabContext.isVisible(),
     );
 
+    const [totalParents, setTotalParents] = React.useState<string[] | undefined>();
+
+    React.useEffect(() => {
+        if (object?.uid?.startsWith('0x')) {
+            const cb = (newBacklinks: any) => {
+                const [pars, refs] = getParentsAndReferences(
+                    newBacklinks['~_value'],
+                    newBacklinks['unigraph.origin'],
+                    object.uid,
+                );
+                setTotalParents([...(pars || []).map((el) => el.uid), ...(refs || []).map((el) => el.uid)]);
+            };
+            subscribeToBacklinks(object.uid, cb);
+            return function cleanup() {
+                subscribeToBacklinks(object.uid, cb, true);
+            };
+        }
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => {};
+    }, [object?.uid, JSON.stringify(dataContext?.getParents(true)?.sort())]);
+
     React.useEffect(() => {
         const cbDVD = (newIts: any) => setDynamicViewsDetailed({ ...newIts, ...(components || {}) });
         window.unigraph.getState('registry/dynamicViewDetailed').subscribe(cbDVD);
@@ -106,28 +130,36 @@ export const AutoDynamicViewDetailed: DynamicViewRenderer = ({
                     </div>
                 )}
             >
-                <div style={{ display: 'contents' }} id={`object-view-${object.uid}`}>
-                    <TabContext.Consumer>
-                        {({ viewId, setTitle }) =>
-                            React.createElement(DynamicViewsDetailed[object.type['unigraph.id']].view, {
-                                data: isObjectStub ? loadedObj : object,
-                                callbacks: {
-                                    viewId,
-                                    setTitle,
-                                    ...(callbacks || {}),
-                                },
-                                options: {
-                                    viewId,
-                                    setTitle,
-                                    ...(options || {}),
-                                },
-                                context,
-                                ...(attributes || {}),
-                                focused: isFocused,
-                            })
-                        }
-                    </TabContext.Consumer>
-                </div>
+                <DataContextWrapper
+                    contextUid={object.uid}
+                    contextData={isObjectStub ? loadedObj : object}
+                    parents={totalParents}
+                    viewType="$/schema/dynamic_view_detailed"
+                    expandedChildren
+                >
+                    <div style={{ display: 'contents' }} id={`object-view-${object.uid}`}>
+                        <TabContext.Consumer>
+                            {({ viewId, setTitle }) =>
+                                React.createElement(DynamicViewsDetailed[object.type['unigraph.id']].view, {
+                                    data: isObjectStub ? loadedObj : object,
+                                    callbacks: {
+                                        viewId,
+                                        setTitle,
+                                        ...(callbacks || {}),
+                                    },
+                                    options: {
+                                        viewId,
+                                        setTitle,
+                                        ...(options || {}),
+                                    },
+                                    context,
+                                    ...(attributes || {}),
+                                    focused: isFocused,
+                                })
+                            }
+                        </TabContext.Consumer>
+                    </div>
+                </DataContextWrapper>
             </ErrorBoundary>
         );
     }

diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx
@@ -67,7 +67,7 @@ export const DataContextWrapper = ({ children, contextUid, contextData, parents,
                 ];
             },
         };
-    }, [contextUid, contextData?.uid, viewType, expandedChildren, JSON.stringify((parents || []).sort?.())]);
+    }, [contextUid, contextData?.uid, viewType, expandedChildren, JSON.stringify(parents?.sort?.())]);
 
     return <DataContext.Provider value={dataContext}>{children}</DataContext.Provider>;
 };