inkdrop-org · albschi · Apr 19, 2024 · Apr 18, 2024 · Apr 19, 2024 · Apr 19, 2024
diff --git a/extension/public/manifest.json b/extension/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Visualize your Terraform - Inkdrop",
   "description": "View interactive Terraform Plans directly in your CI pipeline. Document your Code automatically and onboard new Engineers faster.",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "manifest_version": 3,
   "background": {
     "service_worker": "js/background.js"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "inkdrop-visualizer",
-  "version": "1.1.39",
+  "version": "1.1.40",
   "description": "",
   "main": "src/index.js",
   "scripts": {

diff --git a/tldraw-renderer/package-lock.json b/tldraw-renderer/package-lock.json
diff --git a/tldraw-renderer/package.json b/tldraw-renderer/package.json
@@ -23,6 +23,7 @@
     "lodash.isequal": "^4.5.0",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
+    "react-complex-tree": "^2.4.2",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "signia": "^0.1.4",

diff --git a/tldraw-renderer/src/TLDWrapper.tsx b/tldraw-renderer/src/TLDWrapper.tsx
@@ -7,7 +7,6 @@ import { NodeModel, RootGraphModel, SubgraphModel, fromDot } from "ts-graphviz"
 import { terraformResourcesCsv } from './terraformResourcesCsv';
 import '@tldraw/tldraw/tldraw.css'
 import { fetchIsDemo, getRenderInput, sendData, sendDebugLog } from './utils/storage';
-import ToggleLayers from './layers/ToggleLayers';
 import { computeLayout } from './layout/computeLayout';
 import { getVariablesAndOutputs } from './dependencies/dependencies';
 import { getResourceNameAndType } from './utils/resources';
@@ -44,6 +43,7 @@ export type NodeGroup = {
     moduleName?: string
     parentModules: string[]
     state: ResourceState
+    shapeId?: string
     frameShapeId?: string
 }
 
@@ -58,12 +58,12 @@ export type TFVariableOutput = {
     }[]
 }
 
-type Tag = {
+export type Tag = {
     name: string,
     value: string
 }
 
-type RenderInput = {
+export type RenderInput = {
     planJson: string,
     graph: string,
     detailed: boolean,
@@ -536,47 +536,15 @@ const TLDWrapper = () => {
         })
     }
 
-    const refreshWhiteboard = (fromToggle: boolean) => {
+    const refreshWhiteboard = () => {
         editor?.deleteShapes(Array.from(editor.getPageShapeIds(editor.getCurrentPageId())))
         const model = fromDot(renderInput?.graph || "")
-        parseModel(model, fromToggle)
-    }
-
-    const toggleDetailed = async () => {
-        renderInput!.detailed = !renderInput?.detailed
-        refreshWhiteboard(true)
-    }
-
-    const toggleShowUnchanged = async () => {
-        renderInput!.showUnchanged = !renderInput?.showUnchanged
-        refreshWhiteboard(true)
-    }
-
-    const toggleCategory = (category: string) => {
-        if (deselectedCategoriesRef.current.includes(category)) {
-            deselectedCategoriesRef.current = deselectedCategoriesRef.current.filter((cat) => {
-                return cat !== category
-            })
-        } else {
-            deselectedCategoriesRef.current.push(category)
-        }
-        refreshWhiteboard(true)
-    }
-
-    const toggleTag = (tag: string) => {
-        if (selectedTagsRef.current.includes(tag)) {
-            selectedTagsRef.current = selectedTagsRef.current.filter((t) => {
-                return t !== tag
-            })
-        } else {
-            selectedTagsRef.current.push(tag)
-        }
-        refreshWhiteboard(true)
+        parseModel(model, true)
     }
 
 
     const setShowSidebar = (value: boolean) => {
-        setSidebarWidth(value ? 24 : 0)
+        setSidebarWidth(value ? 23 : 0)
     }
 
 
@@ -585,7 +553,10 @@ const TLDWrapper = () => {
             position: "fixed",
             inset: 0,
         }}>
-            <div className={'h-full transition-all'} style={{ marginRight: sidebarWidth + "rem" }}
+            <div className={'h-full transition-all'} style={{
+                marginLeft: "14rem",
+                marginRight: sidebarWidth + "rem"
+            }}
             >
                 <Tldraw
                     shapeUtils={customShapeUtils}
@@ -594,68 +565,22 @@ const TLDWrapper = () => {
                     assetUrls={assetUrls}
                 />
             </div>
-            {sidebarWidth === 0 &&
-                <div className={'absolute top-2 z-200 left-2'}>
-                    <ToggleLayers items={
-                        [
-                            {
-                                name: "Debug",
-                                items: [
-                                    {
-                                        name: "Unchanged resources",
-                                        value: renderInput?.showUnchanged || false,
-                                        action: toggleShowUnchanged
-                                    },
-                                    {
-                                        name: "Detailed diagram",
-                                        value: renderInput?.detailed || false,
-                                        action: toggleDetailed
-                                    },
-                                ]
-                            },
-                            {
-                                name: "Categories",
-                                items:
-                                    categoriesRef.current.map((category) => {
-                                        return {
-                                            name: category,
-                                            value: deselectedCategoriesRef.current.includes(category) ? false : true,
-                                            action: () => {
-                                                toggleCategory(category)
-                                            }
-                                        }
-                                    })
-                            }, {
-                                name: "Tags",
-                                items:
-                                    tagsRef.current.map((tag) => tag.name).filter((tag, index, self) => {
-                                        return self.indexOf(tag) === index
-                                    }).map((tag) => {
-                                        return {
-                                            name: tag,
-                                            value: selectedTagsRef.current.includes(tag),
-                                            action: () => {
-                                                toggleTag(tag)
-                                            }
-                                        }
-                                    })
-                            }
-                        ]
-                    } />
-
-                </div>
-            }
-            {editor &&
-                <SelectionHandler
-                    editor={editor}
-                    nodeGroups={storedNodeGroups}
-                    sidebarWidth={sidebarWidth}
-                    setShowSidebar={setShowSidebar}
-                    shapesSnapshot={shapesSnapshot}
-                    hasPlanJson={renderInput?.planJson ? true : false}
-                    variables={variables}
-                    outputs={outputs} />
-            }
+            <SelectionHandler
+                editor={editor}
+                nodeGroups={storedNodeGroups}
+                sidebarWidth={sidebarWidth}
+                setShowSidebar={setShowSidebar}
+                shapesSnapshot={shapesSnapshot}
+                hasPlanJson={renderInput?.planJson ? true : false}
+                variables={variables}
+                outputs={outputs}
+                refreshWhiteboard={refreshWhiteboard}
+                selectedTagsRef={selectedTagsRef}
+                categoriesRef={categoriesRef}
+                deselectedCategoriesRef={deselectedCategoriesRef}
+                renderInput={renderInput}
+                tagsRef={tagsRef}
+            />
         </div>
     );
 };

diff --git a/tldraw-renderer/src/dependencies/DependenciesUI.tsx b/tldraw-renderer/src/dependencies/DependenciesUI.tsx
@@ -102,7 +102,7 @@ const DependencyUI = ({
 
     return (
         <>
-            <div className="absolute top-0 left-0 bg-[#F7F7F8] z-[2000] w-full border-b border-black"
+            <div className="absolute top-0 left-0 bg-[#F7F7F8] z-[2000] w-full border-b border-black pl-56"
                 style={{ paddingRight: sidebarWidth + "rem" }}
             >
                 <div className="flex items-center h-[2.4rem] px-4">
@@ -120,7 +120,7 @@ const DependencyUI = ({
                     </div>
                 </div>
             </div>
-            <div className="absolute bottom-0 left-0 bg-[#F7F7F8] z-[2000] w-full border-t border-black"
+            <div className="absolute bottom-0 left-0 bg-[#F7F7F8] z-[2000] w-full border-t border-black pl-56"
                 style={{ paddingRight: sidebarWidth + "rem" }}
             >
                 <div className="flex items-center h-[2.4rem] px-4">