From fe5f6dc2a37d38e0fc44b252bed49755eb645ca9 Mon Sep 17 00:00:00 2001 From: Sajid Alam Date: Wed, 11 Dec 2024 14:21:41 +0000 Subject: [PATCH 1/4] draft Signed-off-by: Sajid Alam --- src/common/utilities.ts | 11 ++++-- webview/src/App.jsx | 75 +++++++++++++++++++++++------------------ 2 files changed, 51 insertions(+), 35 deletions(-) diff --git a/src/common/utilities.ts b/src/common/utilities.ts index 2495d34..4433817 100644 --- a/src/common/utilities.ts +++ b/src/common/utilities.ts @@ -173,8 +173,15 @@ function parseTelemetryConsent(logMessage: string): Record | null { } export async function updateKedroVizPanel(lsClient: LanguageClient | undefined): Promise { - 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 { diff --git a/webview/src/App.jsx b/webview/src/App.jsx index b4218c0..1517e2b 100644 --- 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,12 +29,12 @@ function App() { default: break; } - }); + }; + window.addEventListener("message", handleMessage); return () => { - window.removeEventListener("message", () => {console.log("removed")}); + window.removeEventListener("message", handleMessage); }; - }, []); const handleNodeClick = (node) => { @@ -39,19 +42,18 @@ function App() { 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 ( -
- {loading ? showMessages() : ( + {loading ? showMessages() : ( + )} + options={kedroVizOptions} + /> + )}
); } From fb6892404a2291d66da4ec6aa6de8953867884e0 Mon Sep 17 00:00:00 2001 From: Sajid Alam Date: Tue, 17 Dec 2024 10:13:59 +0000 Subject: [PATCH 2/4] enable sidebar Signed-off-by: Sajid Alam --- src/common/utilities.ts | 11 ++---- webview/src/App.jsx | 75 ++++++++++++++++++----------------------- 2 files changed, 35 insertions(+), 51 deletions(-) diff --git a/src/common/utilities.ts b/src/common/utilities.ts index 4433817..2495d34 100644 --- a/src/common/utilities.ts +++ b/src/common/utilities.ts @@ -173,15 +173,8 @@ function parseTelemetryConsent(logMessage: string): Record | null { } export async function updateKedroVizPanel(lsClient: LanguageClient | undefined): Promise { - const projectData = await executeGetProjectDataCommand(lsClient) ?? {}; - const toolbarOptions = { export: false }; - - const dataToSend = { - ...projectData, - toolbar: toolbarOptions - }; - - KedroVizPanel.currentPanel?.updateData(dataToSend); + const projectData = await executeGetProjectDataCommand(lsClient); + KedroVizPanel.currentPanel?.updateData(projectData); } export async function isKedroProject(): Promise { diff --git a/webview/src/App.jsx b/webview/src/App.jsx index 1517e2b..aaf8a15 100644 --- a/webview/src/App.jsx +++ b/webview/src/App.jsx @@ -1,25 +1,22 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } 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] = useState({ nodes: [], edges: [] }); - const [toolbar, setToolbar] = useState({}); - const [error, setError] = useState(false); - const [loading, setLoading] = useState(true); + const [data, setData] = React.useState({ nodes: [], edges: [] }); + const [error, setError] = React.useState(false); + const [loading, setLoading] = React.useState(true); useEffect(() => { // Handle messages sent from the extension to the webview - const handleMessage = (event) => { + window.addEventListener("message", (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); @@ -29,12 +26,12 @@ function App() { default: break; } - }; + }); - window.addEventListener("message", handleMessage); return () => { - window.removeEventListener("message", handleMessage); + window.removeEventListener("message", () => {console.log("removed")}); }; + }, []); const handleNodeClick = (node) => { @@ -42,18 +39,19 @@ function App() { 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 = () => { @@ -87,34 +85,27 @@ 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 ( -
- {loading ? showMessages() : ( - + {loading ? showMessages() : ( - )} + options={{ + display: { + globalNavigation: false, + metadataPanel: false, + miniMap: false, + sidebar: true, + }, + behaviour: { + reFocus: false, + }, + visible: { + slicing: false, + }, + layer: {visible: false}, + }} + />)}
); } From 5edefc5e1f424886c3dd389cbfdf2469883824ed Mon Sep 17 00:00:00 2001 From: Sajid Alam Date: Tue, 17 Dec 2024 11:14:53 +0000 Subject: [PATCH 3/4] add toolbarOptions Signed-off-by: Sajid Alam --- webview/src/App.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/webview/src/App.jsx b/webview/src/App.jsx index aaf8a15..29cd7ef 100644 --- a/webview/src/App.jsx +++ b/webview/src/App.jsx @@ -8,6 +8,13 @@ function App() { const [error, setError] = React.useState(false); const [loading, setLoading] = React.useState(true); + const toolbarOptions = { + labelBtn: true, + layerBtn: true, + expandPipelinesBtn: true, + exportBtn: false, + }; + useEffect(() => { // Handle messages sent from the extension to the webview window.addEventListener("message", (event) => { @@ -96,6 +103,7 @@ function App() { metadataPanel: false, miniMap: false, sidebar: true, + ...toolbarOptions, }, behaviour: { reFocus: false, From d68897231f203aa77d0a477894814a05c216483e Mon Sep 17 00:00:00 2001 From: Sajid Alam Date: Wed, 15 Jan 2025 13:45:13 +0000 Subject: [PATCH 4/4] disable the expandPipelinesBtn Signed-off-by: Sajid Alam --- webview/src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/App.jsx b/webview/src/App.jsx index 29cd7ef..15dcd39 100644 --- a/webview/src/App.jsx +++ b/webview/src/App.jsx @@ -11,7 +11,7 @@ function App() { const toolbarOptions = { labelBtn: true, layerBtn: true, - expandPipelinesBtn: true, + expandPipelinesBtn: false, exportBtn: false, };