Adding export lineage

new_lineage_panel/src/ActionWidget.tsx

@@ -3,6 +3,7 @@ import "reactflow/dist/style.css";
 import { Alert, Button, Card, CardBody } from "reactstrap";
 import ResetIcon from "./assets/icons/reset.svg?react";
 import HelpIcon from "./assets/icons/help.svg?react";
+import DownloadIcon from "./assets/icons/download-button.svg?react";
 import FeedbackIcon from "./assets/icons/feedback.svg?react";
 import ExpandIcon from "./assets/icons/expand.svg?react";
 import ArrowLeftDoubleIcon from "./assets/icons/arrow-left-double.svg?react";
@@ -11,7 +12,7 @@ import ArrowLeftIcon from "./assets/icons/arrow-left.svg?react";
 import ArrowRightIcon from "./assets/icons/arrow-right.svg?react";
 import GearIcon from "./assets/icons/gear.svg?react";
 import styles from "./styles.module.scss";
-import { HELP_SIDEBAR, SETTINGS_SIDEBAR } from "./constants";
+import { HELP_SIDEBAR, SETTINGS_SIDEBAR, EXPORT_SIDEBAR } from "./constants";
 import { init, openURL, setLegacyLineageView, CLL, requestExecutor } from "./service_utils";
 import { LineageContext, MissingLineageMessage, aiEnabled } from "./Lineage";
 import { useReactFlow } from "reactflow";
@@ -351,6 +352,10 @@ export const ActionWidget = ({missingLineageMessage}: {missingLineageMessage?: M
         <FeedbackIcon />
         <span>Feedback</span>
       </ActionButton>
+      <ActionButton onClick={() => setSidebarScreen(EXPORT_SIDEBAR)}>
+        <DownloadIcon />
+        <span>Export Lineage</span>
+      </ActionButton>
     </div>
   );
 };

new_lineage_panel/src/ExportLineage.tsx

@@ -0,0 +1,37 @@
+import { Button } from "reactstrap";
+import styles from "./styles.module.scss";
+import { exportLineage } from "./service_utils";
+// import { saveLineage } from "./exporter";
+
+ // When the saveLineage is imported and used in the onClick this makes the lineage panel white and unusable
+function ExportLineage() {
+  return (
+    <div className="p-3 h-100 d-flex flex-column overflow-y">
+      <div className="mb-2 d-flex">
+        <div className="fw-semibold fs-5">Export Lineage</div>
+        <div className="spacer"></div>
+        <Button
+          size="sm"
+          color="primary"
+          onClick={() => {
+            exportLineage();
+            // saveLineage("active-frame");
+          }}
+        >
+          Download
+        </Button>
+      </div>
+      <div className={styles.help_body}>
+        <p>
+          Placeholder text for the side panel.
+          This is to contain options related 
+          to download quality and location.
+        </p>
+
+
+      </div>
+    </div>
+  );
+}
+
+export { ExportLineage };

new_lineage_panel/src/Lineage.tsx

@@ -40,12 +40,14 @@ import {
   COLUMNS_SIDEBAR,
   EXPOSURE_SIDEBAR,
   FEEDBACK_SIDEBAR,
+  EXPORT_SIDEBAR,
   HELP_SIDEBAR,
   SETTINGS_SIDEBAR,
 } from "./constants";
 import ExposureDetails from "./ExposureDetails";
 import { Feedback } from "./Feedback";
 import { Help } from "./Help";
+import { ExportLineage } from "./ExportLineage";
 import { Demo } from "./Demo";
 import {
   handleResponse,
@@ -481,6 +483,7 @@ export const Lineage = () => {
                 <Feedback close={() => setSidebarScreen("")} />
               )}
               {sidebarScreen === HELP_SIDEBAR && <Help />}
+              {sidebarScreen === EXPORT_SIDEBAR && <ExportLineage />}
               {sidebarScreen === SETTINGS_SIDEBAR && <Settings />}
             </SidebarModal>
             <Modal isOpen={showDemoModal} close={() => setShowDemoModal(false)}>

new_lineage_panel/src/constants.ts

@@ -4,6 +4,7 @@ export const EXPOSURE_SIDEBAR = "exposure";
 export const TABLES_SIDEBAR = "tables";
 export const FEEDBACK_SIDEBAR = "feedback";
 export const HELP_SIDEBAR = "help";
+export const EXPORT_SIDEBAR = "export";
 export const SETTINGS_SIDEBAR = "settings";
 
 // react flow prefix for node types

new_lineage_panel/src/exporter.ts

@@ -0,0 +1,42 @@
+import * as htmlToImage from 'html-to-image';
+
+declare const acquireVsCodeApi: () => { postMessage: (v: unknown) => void };
+
+const vscode = acquireVsCodeApi();
+// Adding these lines to enable debug logging
+
+function saveLineage(elementId: string) {
+  console.log('Starting saveLineage function.');
+
+  const element = document.getElementById(elementId);
+
+  if (!element) {
+    vscode.postMessage({ command: "error", text: `Element with ID ${elementId} not found.` });
+    return;
+  }
+
+  console.log('Element found, converting to SVG.');
+
+  function filter(node: Node): boolean {
+    return (node.nodeName !== 'I'); // Filter out <i> tags
+  }
+
+  htmlToImage.toSvg(element, { filter: filter })
+    .then((dataUrl: string) => {
+      console.log('SVG conversion successful.');
+
+      const downloadLink = document.createElement('a');
+      downloadLink.href = dataUrl;
+      downloadLink.download = 'exported_image.svg';
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+
+      console.log('SVG download initiated and cleanup done.');
+    })
+    .catch((error: Error) => {
+      vscode.postMessage({ command: "error", text: `Error during SVG export: ${error.message}` });
+    });
+}
+
+export { saveLineage };

new_lineage_panel/src/service_utils.ts

@@ -41,6 +41,10 @@ export const openURL = (url: string) => {
   vscode.postMessage({ command: "openURL", args: { url } });
 };
 
+export const exportLineage = () => {
+  vscode.postMessage({ command: "exportToSVG"});
+};
+
 export const openChat = () => openURL("https://app.myaltimate.com/contactus");
 
 export const previewFeature = () => {

package.json

@@ -1176,6 +1176,7 @@
     "@vscode/vsce": "^2.26.1",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "dayjs": "^1.11.11",
+    "html-to-image": "^1.11.11",
     "inversify": "^6.0.2",
     "inversify-binding-decorators": "^4.0.0",
     "node-abort-controller": "^3.1.1",