unigraph-dev · TheExGenesis · Apr 7, 2022 · Apr 6, 2022 · Apr 7, 2022 · Apr 7, 2022
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectEditor/ObjectEditor.tsx b/packages/unigraph-dev-explorer/src/components/ObjectEditor/ObjectEditor.tsx
@@ -30,7 +30,8 @@ import { BacklinkView } from '../ObjectView/BacklinkView';
 import { onUnigraphContextMenu } from '../ObjectView/DefaultObjectContextMenu';
 import { AutoDynamicView } from '../ObjectView/AutoDynamicView';
 import { getDynamicViews } from '../../unigraph-react';
-import { TabContext, useNameTab } from '../../utils';
+import { TabContext } from '../../utils';
+import { useEntityNameTab } from '../UnigraphCore/useEntityNameTab';
 
 const editorFrameStyle = {
     padding: '12px',
@@ -562,22 +563,18 @@ export function ObjectEditor({ uid }: any) {
     const [currentUid, setCurrentUid] = React.useState(uid || '');
     const [currentObject, setCurrentObject]: any = React.useState(null);
 
-    const [subsId, setSubsId]: any = React.useState(null);
-
     const [allSchemas, setAllSchemas] = React.useState(null);
 
     const tabContext = React.useContext(TabContext);
-    useNameTab('Editor: ', uid);
+    useEntityNameTab({ prefix: 'Editor: ', uid });
 
     useEffectOnce(() => {
         window.unigraph.getSchemas().then((schemas: any) => setAllSchemas(schemas));
     });
 
     React.useEffect(() => {
-        if (subsId) window.unigraph.unsubscribe(subsId);
-        const newSubs = getRandomInt();
+        const subsId = getRandomInt();
         if (currentUid) tabContext.subscribeToObject(currentUid, setCurrentObject, subsId);
-        setSubsId(newSubs);
         return function cleanup() {
             tabContext.unsubscribe(subsId);
         };

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/BacklinkView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/BacklinkView.tsx
@@ -3,7 +3,8 @@ import { useEffectOnce } from 'react-use';
 import { getRandomInt } from 'unigraph-dev-common/lib/utils/utils';
 import { Actions } from 'flexlayout-react';
 import { noteQueryDetailed } from '../../examples/notes/noteQuery';
-import { TabContext, useNameTab } from '../../utils';
+import { TabContext } from '../../utils';
+import { useEntityNameTab } from '../UnigraphCore/useEntityNameTab';
 import { DynamicObjectListView } from './DynamicObjectListView';
 
 const getQuery = (uid: string, forward?: boolean) => `(func: uid(res)) @filter(type(Entity) AND (NOT type(Deleted))) {
@@ -30,7 +31,7 @@ export function BacklinkView({
 }: any) {
     const [objects, setObjects]: [any[], any] = React.useState([]);
     const [id, setId] = React.useState(Date.now());
-    useNameTab('Backlinks: ', uid);
+    useEntityNameTab({ prefix: 'Backlinks: ', uid });
     if (callbacks?.isEmbed) hideHeader = true;
 
     const tabContext = React.useContext(TabContext);

diff --git a/packages/unigraph-dev-explorer/src/components/UnigraphCore/useEntityNameTab.tsx b/packages/unigraph-dev-explorer/src/components/UnigraphCore/useEntityNameTab.tsx
@@ -0,0 +1,53 @@
+import _ from 'lodash/fp';
+import React from 'react';
+import { getRandomInt } from 'unigraph-dev-common/lib/utils/utils';
+import { Actions } from 'flexlayout-react';
+import { TabContext } from '../../utils';
+
+const getTypeName = (obj: any): string | undefined => {
+    const typeEntries: any[] = obj?.type?.['_value['] ?? [];
+    return typeEntries.length > 0 ? _.last(typeEntries)._name : undefined;
+};
+const getObjOrTypeName = (obj: any) => {
+    const objName = obj?.get('name')?.as('primitive');
+    const typeName = getTypeName(obj);
+    return objName ?? typeName;
+};
+const renameExceptionTypes = ['$/schema/note_block', '$/schema/note_block'];
+
+export const useEntityNameTab = ({
+    prefix,
+    uid,
+    conditionOnObj,
+}: {
+    prefix: string;
+    uid: string;
+    conditionOnObj?: any;
+}) => {
+    const tabContext = React.useContext(TabContext);
+    // const [name, setName] = React.useState('Backlink View');
+    React.useEffect(() => {
+        const subsId = getRandomInt();
+        tabContext.subscribeToObject(
+            uid,
+            (obj: any) => {
+                if (conditionOnObj && !conditionOnObj(obj)) {
+                    return;
+                }
+
+                const tabName = getObjOrTypeName(obj);
+                if (tabName !== undefined && tabContext.viewId)
+                    window.layoutModel.doAction(Actions.renameTab(tabContext.viewId as any, `${prefix}${tabName}`));
+            },
+            subsId,
+        );
+
+        return function cleanup() {
+            tabContext.unsubscribe(subsId);
+        };
+    }, []);
+};
+
+export const useDetailedObjNameTab = ({ prefix, uid }: { prefix: string; uid: string }) => {
+    useEntityNameTab({ prefix, uid, conditionOnObj: (obj: any) => !renameExceptionTypes.includes(obj.getType()) });
+};
diff --git a/packages/unigraph-dev-explorer/src/components/UserLibrary/UserLibraryObject.tsx b/packages/unigraph-dev-explorer/src/components/UserLibrary/UserLibraryObject.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Actions } from 'flexlayout-react';
 import { TabContext } from '../../utils';
+import { useDetailedObjNameTab, useEntityNameTab } from '../UnigraphCore/useEntityNameTab';
 
 import { AutoDynamicViewDetailed } from '../ObjectView/AutoDynamicViewDetailed';
 import { DefaultObjectView } from '../ObjectView/DefaultObjectView';
@@ -23,6 +24,7 @@ export default function DetailedObjectView({ uid, viewer, id, context, component
     });
 
     const tabContext = React.useContext(TabContext);
+    useDetailedObjNameTab({ prefix: '', uid });
 
     React.useEffect(() => {
         window.unigraph

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteEditor.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteEditor.tsx
@@ -146,8 +146,8 @@ export const useNoteEditor: (...args: any) => [any, (text: string) => void, () =
     React.useEffect(() => {
         const dataText = pullText();
         oldTextRef.current = dataText;
-        if (dataText !== undefined && tabContext.viewId && !callbacks.isEmbed)
-            window.layoutModel.doAction(Actions.renameTab(tabContext.viewId as any, `Note: ${dataText}`));
+        // if (dataText !== undefined && tabContext.viewId && !callbacks.isEmbed)
+        // window.layoutModel.doAction(Actions.renameTab(tabContext.viewId as any, `Note: ${dataText}`));
         if (dataText !== undefined && getCurrentText() !== dataText && !edited.current) {
             setCurrentText(dataText);
         } else if (

diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx
@@ -1,18 +1,17 @@
-import { Chip } from '@mui/material';
-import { LocalOffer } from '@mui/icons-material';
-import { unpad } from 'unigraph-dev-common/lib/utils/entityUtils';
-import Icon from '@mdi/react';
 import { mdiTagOutline } from '@mdi/js';
-import { getContrast, NavigationContext } from '../../utils';
-import { DynamicViewRenderer } from '../../global.d';
-import { registerDynamicViews } from '../../unigraph-react';
+import Icon from '@mdi/react';
+import { Button, Chip, Divider, TextField } from '@mui/material';
+import React from 'react';
+import { unpad } from 'unigraph-dev-common/lib/utils/entityUtils';
 import { AutoDynamicView } from '../../components/ObjectView/AutoDynamicView';
+import { BacklinkView } from '../../components/ObjectView/BacklinkView';
+import { DynamicViewRenderer } from '../../global.d';
+import { getContrast } from '../../utils';
 
+const getBgColor = (tag: any) => (tag?.color?.startsWith && tag.color.startsWith('#') ? tag.color : 'unset');
 export const Tag: DynamicViewRenderer = ({ data, callbacks }) => {
-    let tag = data;
-    const { uid } = data;
-    if (data._value) tag = unpad(data);
-    const bgc = tag?.color?.startsWith && tag.color.startsWith('#') ? tag.color : 'unset';
+    const [tag, setTag] = React.useState(() => (data._value ? unpad(data) : data));
+
     return (
         <Chip
             size="small"
@@ -21,24 +20,53 @@ export const Tag: DynamicViewRenderer = ({ data, callbacks }) => {
                     path={mdiTagOutline}
                     size={0.75}
                     style={{
-                        filter: bgc === 'unset' || getContrast(bgc) === 'black' ? 'unset' : 'invert(1)',
+                        filter:
+                            getBgColor(tag) === 'unset' || getContrast(getBgColor(tag)) === 'black'
+                                ? 'unset'
+                                : 'invert(1)',
                     }}
                 />
             }
             style={{
-                backgroundColor: bgc,
-                color: bgc.startsWith('#') ? getContrast(bgc) : 'unset',
+                backgroundColor: getBgColor(tag),
+                color: getBgColor(tag).startsWith('#') ? getContrast(getBgColor(tag)) : 'unset',
+                cursor: 'pointer',
             }}
             variant="outlined"
             label={tag.name}
-            onClick={() => {
-                console.log(data);
-                window.wsnavigator(`/library/backlink?uid=${uid}`);
-            }}
         />
     );
 };
 
+export const TagDetailed: DynamicViewRenderer = ({ data, callbacks }) => {
+    const [name, setName] = React.useState('');
+    // useNameTab('Tag: ', data.uid);
+
+    React.useEffect(() => {
+        const tag = data._value ? unpad(data) : data;
+        setName(tag.name);
+    }, [data]);
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '8px', alignItems: 'left' }}>
+            <div style={{ display: 'flex', marginBottom: '8px', alignItems: 'left' }}>
+                <TextField value={name} onChange={(e) => setName(e.target.value)} placeholder="Tag Name">
+                    Tag Name
+                </TextField>
+                <Button
+                    onClick={async () => {
+                        window.unigraph.runExecutable('$/executable/rename-entity', { uid: data.uid, newName: name });
+                    }}
+                >
+                    Rename Tag
+                </Button>
+            </div>
+            <Divider />
+            <BacklinkView data={data} titleBar=" backlinks" />
+        </div>
+    );
+};
+
 export const SemanticProperties = ({ data }: any) =>
     data?._value?.children?.['_value[']
         ? data?._value?.children?.['_value['].map((el: any) => <AutoDynamicView object={unpad(el._value)} />)

diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/TagWidget.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/TagWidget.tsx
@@ -1,5 +1,6 @@
 import { Typography } from '@mui/material';
 import React from 'react';
+import _ from 'lodash/fp';
 import { withUnigraphSubscription } from '../../unigraph-react';
 import { AutoDynamicView } from '../../components/ObjectView/AutoDynamicView';
 import { NavigationContext } from '../../utils';
@@ -13,15 +14,14 @@ function TagList({ data }: any) {
         </div>
     );
 }
+const getLowercaseName = (a: any) => a.get('name').as('primitive').toLowerCase();
 
 export const TagListSubscription = withUnigraphSubscription(
     TagList,
     { schemas: [], defaultData: [], packages: [] },
     {
         afterSchemasLoaded: (subsId: any, tabContext: any, data: any, setData: any) => {
-            tabContext.subscribeToType('$/schema/tag', (result: any) => {
-                setData(result);
-            });
+            tabContext.subscribeToType('$/schema/tag', _.pipe(_.sortBy(getLowercaseName), setData));
         },
     },
 );

diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/init.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/init.tsx
@@ -4,14 +4,18 @@ import { BacklinkView } from '../../components/ObjectView/BacklinkView';
 import { Html } from './Html';
 import { InterfaceSemantic } from './InterfaceSemantic';
 import { Markdown } from './Markdown';
-import { Tag } from './Tag';
+import { Tag, TagDetailed } from './Tag';
 
 export const init = () => {
     registerDetailedDynamicViews({ '$/schema/html': { view: Html } });
     registerDynamicViews({ '$/schema/markdown': Markdown });
     registerDynamicViews({ '$/schema/tag': { view: Tag } });
     registerDynamicViews({ '$/schema/interface/semantic': InterfaceSemantic });
 
+    registerDetailedDynamicViews({
+        '$/schema/tag': TagDetailed,
+    });
+
     registerQuickAdder({
         tag: {
             adder: async (inputStr: string, preview = true) => {

diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx
@@ -3,11 +3,10 @@
 /* eslint-disable no-bitwise */
 /* eslint-disable no-plusplus */
 import stringify from 'json-stable-stringify';
-import _ from 'lodash';
+import _ from 'lodash/fp';
 import React from 'react';
 import { unpad } from 'unigraph-dev-common/lib/utils/entityUtils';
-import { getRandomInt, isJsonString } from 'unigraph-dev-common/lib/utils/utils';
-import { Actions } from 'flexlayout-react';
+import { isJsonString } from 'unigraph-dev-common/lib/utils/utils';
 
 export const NavigationContext = React.createContext<(location: string) => any>((location: string) => ({}));
 
@@ -23,31 +22,6 @@ export function isValidHttpUrl(string: string) {
     return url.protocol === 'http:' || url.protocol === 'https:';
 }
 
-export const useNameTab = (prefix: string, uid: string) => {
-    const tabContext = React.useContext(TabContext);
-    // const [name, setName] = React.useState('Backlink View');
-    React.useEffect(() => {
-        const subsId = getRandomInt();
-        tabContext.subscribeToObject(
-            uid,
-            (newObjs: any) => {
-                const objName = newObjs?.get('name')?.as('primitive');
-                const typeName = newObjs?.type?.['_value[']?.[2]?._name;
-                const tabName = objName ?? typeName ?? prefix;
-                // if (tabName) tabContext.setTitle(tabName);
-                if (tabName !== undefined && tabContext.viewId)
-                    window.layoutModel.doAction(Actions.renameTab(tabContext.viewId as any, `${prefix}${tabName}`));
-                console.log('useNameTab', { newObjs, subsId, uid, tabName, tabContext });
-            },
-            subsId,
-        );
-
-        return function cleanup() {
-            tabContext.unsubscribe(subsId);
-        };
-    }, []);
-};
-
 export const TabContext = React.createContext({
     viewId: 0,
     setTitle: (title: string) => {},