further layouting and state simplification

src/components/canvas/Canvas.tsx

@@ -40,7 +40,7 @@ export const Canvas: React.FC<CanvasProps> = ({
         <Toolbar onToggleSnippets={() => setShowSnippets(!showSnippets)} />
         <ReactFlow
           defaultNodes={[]}
-          edges={processedGraph.edges}
+          edges={[...processedGraph.typeEdges, ...processedGraph.snippetEdges]}
           onNodesChange={(changes) => setNodes(nodes => applyNodeChanges(changes, nodes))}
           nodeTypes={nodeTypes}
           onNodeClick={(_, node) => onNodeSelect(node.id)}

src/hooks/useGraphData.ts

@@ -35,23 +35,23 @@ const createNodes = (types: ContentType[], snippets: Snippet[]) => {
   return { typeNodes, snippetNodes };
 };
 
-const createEdgesFromTypes = (
-  types: ContentType[],
-  checkSelfReference: boolean,
-): ProcessedEdge[] => {
+const createEdgesFromSources = (
+  sources: ContentType[] | Snippet[],
+): { typeEdges: ProcessedEdge[], snippetEdges: ProcessedEdge[] } => {
   const edgeSet = new Set<string>();
-  const edges: ProcessedEdge[] = [];
+  const typeEdges: ProcessedEdge[] = [];
+  const snippetEdges: ProcessedEdge[] = [];
 
-  types.forEach((type) => {
+  sources.forEach((type) => {
     type.elements.forEach((element: Element) => {
       if (isRelationshipElement(element)) {
         element.allowed_content_types?.forEach((allowed) => {
           // Optionally skip self-references if desired.
-          if (checkSelfReference && type.id === allowed.id) return;
+          if (type.id === allowed.id) return;
           const edgeKey = `${type.id}-${element.id}-${allowed.id}`;
           if (!edgeSet.has(edgeKey)) {
             edgeSet.add(edgeKey);
-            edges.push({
+            typeEdges.push({
               id: edgeKey,
               source: type.id,
               target: allowed.id ?? "",
@@ -66,7 +66,7 @@ const createEdgesFromTypes = (
         const edgeKey = `${type.id}-${element.id}-${element.snippet.id}`;
         if (!edgeSet.has(edgeKey)) {
           edgeSet.add(edgeKey);
-          edges.push({
+          snippetEdges.push({ 
             id: edgeKey,
             source: element.snippet.id ?? "",
             target: type.id ?? "", // snippet edges are created in reverse
@@ -79,19 +79,19 @@ const createEdgesFromTypes = (
     });
   });
 
-  return edges;
+  return { typeEdges, snippetEdges };
 };
 
 export const useGraphData = (types: ContentType[], snippets: Snippet[]): ProcessedGraph => {
   return useMemo(() => {
     console.log("useGraphData called");
     const { typeNodes, snippetNodes } = createNodes(types, snippets);
-    const edges = createEdgesFromTypes(types, true);
-    //const typeEdges = edges.filter(edge => edge.edgeType === "contentType");
+    const { typeEdges, snippetEdges } = createEdgesFromSources([...types, ...snippets]);
     return {
       typeNodes,
       snippetNodes,
-      edges,
+      typeEdges,
+      snippetEdges,
     };
   }, [types, snippets]);
 };

src/hooks/useNodeLayout.ts

@@ -20,13 +20,11 @@ export const useNodeLayout = (
         ...node.data,
         isExpanded: expandedNodes.has(node.id),
       },
-      hidden: isolatedNodeId ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.edges) : false,
+      hidden: isolatedNodeId ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.typeEdges) : false,
     }));
 
-    const typeEdges = processedGraph.edges.filter(edge => edge.edgeType === "contentType");
-
     if (!showSnippets) {
-      setNodes(getLayoutedElements(typeNodes, typeEdges).nodes);
+      setNodes(getLayoutedElements(typeNodes, processedGraph.typeEdges).nodes);
       return;
     }
 
@@ -38,12 +36,21 @@ export const useNodeLayout = (
         isExpanded: expandedNodes.has(node.id),
       },
       hidden: isolatedNodeId
-        ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.edges)
+        ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.typeEdges)
         : false,
     }));
 
+    const allNodes = [
+      ...getLayoutedElements(typeNodes, processedGraph.typeEdges).nodes,
+      ...getLayoutedElements(snippetNodes, processedGraph.snippetEdges).nodes.map((node) => ({
+        ...node,
+        position: {
+          x: node.position.x - 400,
+          y: node.position.y,
+        },
+      })),
+    ];
 
-
-    setNodes(getLayoutedElements([...typeNodes, ...snippetNodes], processedGraph.edges).nodes);
-  }, [isolatedNodeId, showSnippets, setNodes]);
+    setNodes(allNodes);
+  }, [processedGraph, selectedNodeId, expandedNodes, isolatedNodeId, showSnippets, setNodes]);
 };

src/main.tsx

@@ -16,8 +16,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           <EntityProvider
             contentTypes={[]}
             snippets={[]}
-            showSnippets={false}
-            toggleSnippets={() => {}}
           >
             <App />
           </EntityProvider>

src/utils/layout.ts

@@ -45,7 +45,8 @@ export type ProcessedEdge = {
 export type ProcessedGraph = {
   typeNodes: ProcessedNode[];
   snippetNodes: ProcessedNode[];
-  edges: ProcessedEdge[];
+  typeEdges: ProcessedEdge[];
+  snippetEdges: ProcessedEdge[];
 };
 
 type NodeData = {