merge types and snippets

kontent-ai · Feb 26, 2025 · e309580 · e309580
1 parent 74b650c
commit e309580
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 123 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,7 @@ import { useContentModel } from "./hooks/useContentModel";
 
 const App: React.FC = () => {
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
-  const { contentTypes, snippets, loading, error } = useContentModel();
+  const { contentTypes, snippets, typesWithSnippets, loading, error } = useContentModel();
 
   const handleNodeSelect = useCallback((nodeId: string) => {
     setSelectedNodeId(nodeId);
@@ -35,6 +35,7 @@ const App: React.FC = () => {
       <EntityProvider
         contentTypes={contentTypes}
         snippets={snippets}
+        typesWithSnippets={typesWithSnippets}
       >
         <Canvas selectedNodeId={selectedNodeId} onNodeSelect={handleNodeSelect} />
       </EntityProvider>

diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import ReactFlow, { MiniMap, Controls, Background, applyNodeChanges, useReactFlow } from "reactflow";
 import "reactflow/dist/style.css";
 import { useEntities } from "../../contexts/EntityContext";
@@ -18,29 +18,27 @@ export const Canvas: React.FC<CanvasProps> = ({
   selectedNodeId,
   onNodeSelect,
 }) => {
-  const { contentTypes, snippets } = useEntities();
+  const { contentTypes, snippets, typesWithSnippets } = useEntities();
   const { expandedNodes, isolatedNodeId } = useNodeState();
   const { setNodes } = useReactFlow();
-  const processedGraph = useGraphData(contentTypes, snippets);
-  const [showSnippets, setShowSnippets] = useState(false);
+  const processedGraph = useGraphData(typesWithSnippets);
 
   useNodeLayout(
     processedGraph,
     selectedNodeId,
     expandedNodes,
     isolatedNodeId,
-    showSnippets,
     setNodes,
   );
 
   return (
     <div className="flex h-full w-full">
       <Sidebar types={contentTypes} snippets={snippets} onMenuSelect={onNodeSelect} />
       <div className="flex-1 w-full h-full pb-14">
-        <Toolbar onToggleSnippets={() => setShowSnippets(!showSnippets)} />
+        <Toolbar />
         <ReactFlow
           defaultNodes={[]}
-          edges={[...processedGraph.typeEdges, ...processedGraph.snippetEdges]}
+          edges={processedGraph.edges}
           onNodesChange={(changes) => setNodes(nodes => applyNodeChanges(changes, nodes))}
           nodeTypes={nodeTypes}
           onNodeClick={(_, node) => onNodeSelect(node.id)}

diff --git a/src/components/canvas/Toolbar.tsx b/src/components/canvas/Toolbar.tsx
@@ -9,24 +9,13 @@ import IconCollapse from "../icons/IconCollapse";
 import IconArrowReturn from "../icons/IconArrowReturn";
 import IconFilePdf from "../icons/IconFilePdf";
 
-type ToolbarProps = {
-  onToggleSnippets: () => void;
-};
-
-export const Toolbar: React.FC<ToolbarProps> = ({ onToggleSnippets }) => {
+export const Toolbar: React.FC = () => {
   const { expandedNodes, toggleNode, resetIsolation } = useNodeState();
   const { getNodes, fitView } = useReactFlow();
   const { customApp } = useAppContext();
   const [isExporting, setIsExporting] = useState(false);
   const environmentId = customApp.context.environmentId;
 
-  const handleSnippetToggle = () => {
-    onToggleSnippets();
-    setTimeout(() => {
-      fitView({ duration: 800 });
-    }, 50);
-  };
-
   const handleExpandCollapse = () => {
     const nodes = getNodes();
     const allExpanded = nodes.every(node => expandedNodes.has(node.id));
@@ -86,16 +75,6 @@ export const Toolbar: React.FC<ToolbarProps> = ({ onToggleSnippets }) => {
     </button>
   );
 
-  const toolbarCheckbox = (onClick: () => void, id: string, content: string, className?: string) => (
-    <span className={`${className || ""}`}>
-      <label className={`checkbox`}>
-        <input type="checkbox" id={id} onClick={onClick} />
-        <span className="checkmark"></span>
-        <span>{content}</span>
-      </label>
-    </span>
-  );
-
   return (
     <div className="flex items-center gap-2 px-4 h-14 border-b border-gray-200">
       {toolbarButton(
@@ -112,12 +91,6 @@ export const Toolbar: React.FC<ToolbarProps> = ({ onToggleSnippets }) => {
           <IconArrowReturn /> <span>Reset View</span>
         </div>,
       )}
-      {toolbarCheckbox(
-        handleSnippetToggle,
-        "toggleSnippets",
-        "Include Snippets",
-        "pl-4 caret-transparent",
-      )}
       <div className="flex-1">
       </div>
       {toolbarButton(

diff --git a/src/contexts/EntityContext.tsx b/src/contexts/EntityContext.tsx
@@ -1,9 +1,11 @@
 import React, { createContext, useContext } from "react";
 import { ContentTypeModels, ContentTypeSnippetModels } from "@kontent-ai/management-sdk";
+import { TypeWithResolvedSnippets } from "../utils/mapi";
 
 type EntityContextType = {
   contentTypes: ContentTypeModels.ContentType[];
   snippets: ContentTypeSnippetModels.ContentTypeSnippet[];
+  typesWithSnippets: TypeWithResolvedSnippets[];
   getEntityById: (id: string) => {
     type: "contentType" | "snippet";
     name: string;
@@ -17,7 +19,8 @@ export const EntityProvider: React.FC<{
   children: React.ReactNode;
   contentTypes: ContentTypeModels.ContentType[];
   snippets: ContentTypeSnippetModels.ContentTypeSnippet[];
-}> = ({ children, contentTypes, snippets }) => {
+  typesWithSnippets: TypeWithResolvedSnippets[];
+}> = ({ children, contentTypes, snippets, typesWithSnippets }) => {
   const getEntityById = (id: string) => {
     const contentType = contentTypes.find(t => t.id === id);
     if (contentType) return { type: "contentType" as const, name: contentType.name, data: contentType };
@@ -33,6 +36,7 @@ export const EntityProvider: React.FC<{
       value={{
         contentTypes,
         snippets,
+        typesWithSnippets,
         getEntityById,
       }}
     >

diff --git a/src/hooks/useContentModel.ts b/src/hooks/useContentModel.ts
@@ -1,5 +1,12 @@
 import { useState, useEffect } from "react";
-import { ContentType, getContentTypes, getContentTypeSnippets, Snippet } from "../utils/mapi";
+import {
+  ContentType,
+  getContentTypes,
+  getContentTypeSnippets,
+  mergeTypesWithSnippets,
+  Snippet,
+  TypeWithResolvedSnippets,
+} from "../utils/mapi";
 import { useAppContext } from "../contexts/AppContext";
 
 export const useContentModel = () => {
@@ -8,6 +15,7 @@ export const useContentModel = () => {
   const [snippets, setSnippets] = useState<Snippet[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<{ description: string; code: string } | null>(null);
+  const [typesWithSnippets, setTypesWithSnippets] = useState<TypeWithResolvedSnippets[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -22,6 +30,7 @@ export const useContentModel = () => {
 
         setContentTypes(typesResult.data || []);
         setSnippets(snippetsResult.data || []);
+        setTypesWithSnippets(mergeTypesWithSnippets(typesResult.data || [], snippetsResult.data || []));
       } catch (err) {
         console.error(err);
         setError({ description: "Failed to fetch content types and snippets", code: "FETCH_ERROR" });
@@ -36,6 +45,7 @@ export const useContentModel = () => {
   return {
     contentTypes,
     snippets,
+    typesWithSnippets,
     loading,
     error,
   };

diff --git a/src/hooks/useGraphData.ts b/src/hooks/useGraphData.ts
@@ -1,9 +1,9 @@
 import { useMemo } from "react";
-import { isRelationshipElement, isSnippetElement, ProcessedEdge, ProcessedGraph } from "../utils/layout";
-import { Element, ContentType, Snippet } from "../utils/mapi";
+import { isRelationshipElement, ProcessedEdge, ProcessedGraph } from "../utils/layout";
+import { Element, TypeWithResolvedSnippets } from "../utils/mapi";
 
-const createNodes = (types: ContentType[], snippets: Snippet[]) => {
-  const typeNodes = types.map((type) => ({
+const createNodes = (types: TypeWithResolvedSnippets[]) =>
+  types.map((type) => ({
     id: type.id,
     type: "contentType",
     data: {
@@ -21,26 +21,11 @@ const createNodes = (types: ContentType[], snippets: Snippet[]) => {
     position: { x: 0, y: 0 },
   }));
 
-  const snippetNodes = snippets.map((snippet) => ({
-    id: snippet.id,
-    type: "snippet",
-    data: {
-      id: snippet.id,
-      label: snippet.name,
-      elements: snippet.elements,
-    },
-    position: { x: 0, y: 0 },
-  }));
-
-  return { typeNodes, snippetNodes };
-};
-
 const createEdgesFromSources = (
-  sources: ContentType[] | Snippet[],
-): { typeEdges: ProcessedEdge[], snippetEdges: ProcessedEdge[] } => {
+  sources: TypeWithResolvedSnippets[],
+): ProcessedEdge[] => {
   const edgeSet = new Set<string>();
-  const typeEdges: ProcessedEdge[] = [];
-  const snippetEdges: ProcessedEdge[] = [];
+  const edges: ProcessedEdge[] = [];
 
   sources.forEach((type) => {
     type.elements.forEach((element: Element) => {
@@ -51,7 +36,7 @@ const createEdgesFromSources = (
           const edgeKey = `${type.id}-${element.id}-${allowed.id}`;
           if (!edgeSet.has(edgeKey)) {
             edgeSet.add(edgeKey);
-            typeEdges.push({
+            edges.push({
               id: edgeKey,
               source: type.id,
               target: allowed.id ?? "",
@@ -62,36 +47,20 @@ const createEdgesFromSources = (
           }
         });
       }
-      if (isSnippetElement(element)) {
-        const edgeKey = `${type.id}-${element.id}-${element.snippet.id}`;
-        if (!edgeSet.has(edgeKey)) {
-          edgeSet.add(edgeKey);
-          snippetEdges.push({ 
-            id: edgeKey,
-            source: element.snippet.id ?? "",
-            target: type.id ?? "", // snippet edges are created in reverse
-            sourceHandle: "source",
-            targetHandle: `target-${element.id}`,
-            edgeType: "snippet",
-          });
-        }
-      }
     });
   });
 
-  return { typeEdges, snippetEdges };
+  return edges;
 };
 
-export const useGraphData = (types: ContentType[], snippets: Snippet[]): ProcessedGraph => {
+export const useGraphData = (types: TypeWithResolvedSnippets[]): ProcessedGraph => {
   return useMemo(() => {
     console.log("useGraphData called");
-    const { typeNodes, snippetNodes } = createNodes(types, snippets);
-    const { typeEdges, snippetEdges } = createEdgesFromSources([...types, ...snippets]);
+    const nodes = createNodes(types);
+    const edges = createEdgesFromSources(types);
     return {
-      typeNodes,
-      snippetNodes,
-      typeEdges,
-      snippetEdges,
+      nodes,
+      edges,
     };
-  }, [types, snippets]);
+  }, [types]);
 };
diff --git a/src/hooks/useNodeLayout.ts b/src/hooks/useNodeLayout.ts
@@ -8,49 +8,20 @@ export const useNodeLayout = (
   selectedNodeId: string | null,
   expandedNodes: Set<string>,
   isolatedNodeId: string | null,
-  showSnippets: boolean,
   setNodes: (nodes: Node[]) => void,
 ) => {
   useEffect(() => {
     console.log("useNodeLayout called");
-    const typeNodes = processedGraph.typeNodes.map(node => ({
+    const typeNodes = processedGraph.nodes.map(node => ({
       ...node,
       selected: node.id === selectedNodeId,
       data: {
         ...node.data,
         isExpanded: expandedNodes.has(node.id),
       },
-      hidden: isolatedNodeId ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.typeEdges) : false,
+      hidden: isolatedNodeId ? !isNodeRelated(node.id, isolatedNodeId, processedGraph.edges) : false,
     }));
 
-    if (!showSnippets) {
-      setNodes(getLayoutedElements(typeNodes, processedGraph.typeEdges).nodes);
-      return;
-    }
-
-    const snippetNodes = processedGraph.snippetNodes.map(node => ({
-      ...node,
-      selected: node.id === selectedNodeId,
-      data: {
-        ...node.data,
-        isExpanded: expandedNodes.has(node.id),
-      },
-      hidden: isolatedNodeId
-        ? !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(allNodes);
-  }, [processedGraph, selectedNodeId, expandedNodes, isolatedNodeId, showSnippets, setNodes]);
+    setNodes(getLayoutedElements(typeNodes, processedGraph.edges).nodes);
+  }, [processedGraph, selectedNodeId, expandedNodes, isolatedNodeId, setNodes]);
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -16,6 +16,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           <EntityProvider
             contentTypes={[]}
             snippets={[]}
+            typesWithSnippets={[]}
           >
             <App />
           </EntityProvider>

diff --git a/src/utils/layout.ts b/src/utils/layout.ts
@@ -43,10 +43,8 @@ export type ProcessedEdge = {
 };
 
 export type ProcessedGraph = {
-  typeNodes: ProcessedNode[];
-  snippetNodes: ProcessedNode[];
-  typeEdges: ProcessedEdge[];
-  snippetEdges: ProcessedEdge[];
+  nodes: ProcessedNode[];
+  edges: ProcessedEdge[];
 };
 
 type NodeData = {
@@ -83,10 +81,11 @@ export const getLayoutedElements = (
 
   dagreGraph.setGraph({
     rankdir: direction,
-    nodesep: 50,
+    nodesep: 100,
     ranksep: 200,
     align: "UL", // UL, UR, DL, DR
-    ranker: "tight-tree", // network-simplex, tight-tree, longest-path
+    ranker: "network-simplex", // network-simplex, tight-tree, longest-path
+    // acyclicer: "greedy",
   });
 
   nodes.forEach((node) => {

diff --git a/src/utils/mapi.ts b/src/utils/mapi.ts
@@ -13,6 +13,10 @@ export type Snippet = ContentTypeSnippetModels.ContentTypeSnippet;
 
 export type SnippetElement = ContentTypeElements.ISnippetElement;
 
+export type TypeWithResolvedSnippets = Omit<ContentTypeModels.ContentType, "elements"> & {
+  elements: Exclude<Element, SnippetElement>[];
+};
+
 export type ElementType = Element["type"];
 
 export type NamedElement = Exclude<
@@ -80,3 +84,18 @@ export const getContentTypeSnippets = async (
 ): Promise<ApiResponse<ContentTypeSnippetModels.ContentTypeSnippet[]>> => {
   return makeMapiRequest(environmentId, "getContentTypeSnippets");
 };
+
+export const mergeTypesWithSnippets = (
+  types: ContentType[],
+  snippets: Snippet[],
+): TypeWithResolvedSnippets[] =>
+  types.map(type => ({
+    ...type,
+    elements: type.elements.flatMap(element => {
+      if (element.type === "snippet") {
+        const snippet = snippets.find(s => s.id === element.snippet.id);
+        return snippet?.elements ?? [];
+      }
+      return [element];
+    }) as Exclude<Element, SnippetElement>[],
+  }));