clientfirst

imports/cyto/graph.tsx

@@ -99,7 +99,7 @@ export default function CytoGraph({
   useCytoViewport: _useCytoViewport = useState,
   useSpaceId: _useSpaceId = useSpaceId,
 }: CytoGraphProps){
-  console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links);
+  // console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links);
   const deep = useDeep();
   const __cytoViewportRef = useRefstarter<{ pan: { x: number; y: number; }; zoom: number }>();
   const cytoViewportRef = _cytoViewportRef || __cytoViewportRef;

imports/cyto/hooks.tsx

@@ -550,7 +550,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml,
     //   //   'border-width': 0,
     //   // });
     // }
-    if (await isOpened(id)) {
+    if (isOpened(id)) {
       await close(id);
     } else {
       const { data: handler } = await deep.select({
@@ -803,7 +803,7 @@ export function useCyInitializer({
       //   // return element object to be passed to cy.add() for edge
       //   return {};
       // },
-      hoverDelay: 150, // time spent hovering over a target node before it is considered selected
+      hoverDelay: 0, // time spent hovering over a target node before it is considered selected
       snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
       snapThreshold: 0, // the target node must be less than or equal to this many pixels away from the cursor/finger
       snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)

imports/cyto/opened.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "react";
 export function useOpenedMethods(): {
   open: (id: number, handlerId: number) => void;
   close: (id: number) => void;
-  isOpened: (id: number) => Promise<boolean>;
+  isOpened: (id: number) => boolean;
 } {
   const [spaceId] = useSpaceId();
   const spaceIdRef = useRefAutofill(spaceId);
@@ -17,16 +17,16 @@ export function useOpenedMethods(): {
       OpenedHandler = await deep.id('@deep-foundation/deepcase-opened', 'OpenedHandler');
     })();
     return {
-      isOpened: async (id) => {
-        const q = await deep.select({
+      isOpened: (id) => {
+        const q = deep.minilinks.query({
           type_id: OpenedHandler,
           from: {
             type_id: Opened,
             from_id: spaceIdRef.current,
             to_id: id,
           },
         });
-        const openedHandler = q?.data?.[0];
+        const openedHandler = q?.[0];
         return !!openedHandler
       },
       close: async (id) => {

imports/cyto/react.tsx

@@ -92,7 +92,7 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({
           stl.msTransform = val;
           stl.transform = val;
         }
-        cy.$(`#id`).style({ });
+        cy.$(`#${id}`).style({ });
       }
     }
 

imports/loader.tsx

@@ -25,7 +25,8 @@ export const DeepLoaderActive = React.memo(function DeepLoaderActive({
   const deep = useDeep();
   const subQuery = useMemo(() => {
     const v = (queryLink?.value?.value);
-    const variables = deep.serializeQuery(v);
+    // @ts-ignore
+    const variables = deep.serializeQuery(v, 'links', deep?.unvertualizeId);
     const where = variables?.where;
     return generateQuery({
       operation: subscription ? 'subscription' : 'query',
@@ -288,7 +289,8 @@ export const DeepLoader = memo(function DeepLoader({
     return { value: { value: {
       down: {
         tree_id: { _eq: deep.idLocal('@deep-foundation/core', 'typesTree') },
-        link_id: { _in: ids }
+        link_id: { _in: ids },
+        parent_id: { _nin: ids },
       },
     } } };
   }, [ids]);
@@ -401,11 +403,11 @@ export const DeepLoader = memo(function DeepLoader({
       }, [])}
     /></>
     {queries?.map((f, i) => (f?.value?.value ? <DeepLoaderActive
-      key={`DEEPCASE_QUERY_${f.id}`}
-      name={`DEEPCASE_QUERY_${f.id}`}
+      key={`DEEPCASE_QUERY_${`${f.id}`.replace('-', 'virtual')}`}
+      name={`DEEPCASE_QUERY_${`${f.id}`.replace('-', 'virtual')}`}
       query={f}
       onChange={queryChanged}
-    /> : <React.Fragment key={`DEEPCASE_QUERY_${f.id}`}/>))}
+    /> : <React.Fragment key={`DEEPCASE_QUERY_${`${f.id}`.replace('-', 'virtual')}`}/>))}
     <><DeepLoaderActive
       key={`DEEPCASE_TYPES`}
       name={`DEEPCASE_TYPES`}