draft

Signed-off-by: Sajid Alam <sajid_alam@mckinsey.com>
kedro-org · Dec 11, 2024 · fe5f6dc · fe5f6dc
1 parent 4bb76b7
commit fe5f6dc
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 35 deletions.
diff --git a/src/common/utilities.ts b/src/common/utilities.ts
@@ -173,8 +173,15 @@ function parseTelemetryConsent(logMessage: string): Record<string, any> | null {
 }
 
 export async function updateKedroVizPanel(lsClient: LanguageClient | undefined): Promise<void> {
-    const projectData = await executeGetProjectDataCommand(lsClient);
-    KedroVizPanel.currentPanel?.updateData(projectData);
+    const projectData = await executeGetProjectDataCommand(lsClient) ?? {};
+    const toolbarOptions = { export: false };
+
+    const dataToSend = {
+    ...projectData,
+    toolbar: toolbarOptions
+    };
+
+    KedroVizPanel.currentPanel?.updateData(dataToSend);
 }
 
 export async function isKedroProject(): Promise<boolean> {

diff --git a/webview/src/App.jsx b/webview/src/App.jsx
@@ -1,22 +1,25 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import '@quantumblack/kedro-viz/lib/styles/styles.min.css';
 import KedroViz from "@quantumblack/kedro-viz";
+
 const vscodeApi = window.acquireVsCodeApi();
 
 function App() {
-  const [data, setData] = React.useState({ nodes: [], edges: [] });
-  const [error, setError] = React.useState(false);
-  const [loading, setLoading] = React.useState(true);
+  const [data, setData] = useState({ nodes: [], edges: [] });
+  const [toolbar, setToolbar] = useState({});
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     // Handle messages sent from the extension to the webview
-    window.addEventListener("message", (event) => {
+    const handleMessage = (event) => {
       console.log("Received message from extension", event);
       const message = event.data;
       switch (message.command) {
         case "updateData":
           if (message.data) {
             setData(message.data);
+            setToolbar(message.data.toolbar || {}); // Extract toolbar options
             setLoading(false);
           } else {
             setLoading(true);
@@ -26,32 +29,31 @@ function App() {
         default:
           break;  
       }
-    });
+    };
 
+    window.addEventListener("message", handleMessage);
     return () => {
-      window.removeEventListener("message", () => {console.log("removed")});
+      window.removeEventListener("message", handleMessage);
     };
-
   }, []);
 
   const handleNodeClick = (node) => {
     if (node) {
       vscodeApi.postMessage({
         command: "fromWebview",
         node: {
-          type:node.type,
-          text:node.fullName
+          type: node.type,
+          text: node.fullName
         },
       });
     }
   };
 
   const handleOutputClick = () => {
-      vscodeApi.postMessage({
-        command: "showOutput",
-        showOutput: true,
-      });
-
+    vscodeApi.postMessage({
+      command: "showOutput",
+      showOutput: true,
+    });
   };
 
   const showMessages = () => {
@@ -85,27 +87,34 @@ function App() {
     }
   };
 
+  // Use toolbar state to configure KedroViz options
+  // For example, if toolbar.sidebar is false, hide the sidebar, else show it
+  const kedroVizOptions = {
+    display: {
+      globalNavigation: false,
+      metadataPanel: false,
+      miniMap: false,
+      // If toolbar.sidebar is explicitly false, hide it. Otherwise, default to false if not set.
+      sidebar: toolbar.sidebar === true
+    },
+    behaviour: { 
+      reFocus: false,
+    },
+    visible: {
+      slicing: false,
+    },
+    layer: { visible: false },
+  };
+
   return (
-      <div style={{ height: `90vh`, width: `100%` }}>
-        {loading ? showMessages() : (<KedroViz
+    <div style={{ height: `90vh`, width: `100%` }}>
+      {loading ? showMessages() : (
+        <KedroViz
           data={data}
           onActionCallback={handleActionCallback}
-          options={{
-            display: {
-              globalNavigation: false,
-              metadataPanel: false,
-              miniMap: false,
-              sidebar: false,
-            },
-            behaviour: { 
-              reFocus: false,
-            },
-            visible: {
-              slicing: false,
-            },
-            layer: {visible: false},
-          }}
-        />)}
+          options={kedroVizOptions}
+        />
+      )}
     </div>
   );
 }