DHFPROD-8166: Export Graph To PNG in Modeling

Author: AkshayBajajML

marklogic-data-hub-central/ui/e2e/cypress/integration/modeling/reader.spec.tsx

@@ -95,6 +95,15 @@ describe("Entity Modeling: Reader Role", () => {
   it("can navigate to graph view from table view", () => {
     entityTypeTable.viewEntityInGraphView("Customer");
 
+    //To test graph view model png is downloaded successfully
+    graphView.getExportGraphIcon().click().then(
+      () => {
+        cy.readFile("./cypress/downloads/graph-view-model.png", "base64").then(
+          (downloadPng) => {
+            expect(downloadPng).exist;
+          });
+      });
+
     // To verify modeling info is rendered properly in graph view
     modelPage.clickModelingInfoIcon();
     modelPage.verifyModelingInfo();

marklogic-data-hub-central/ui/src/components/entities/merging/add-merge-rule/merge-rule-dialog.tsx

@@ -855,7 +855,7 @@ const MergeRuleDialog: React.FC<Props> = (props) => {
                   <MLButton aria-label="add-slider-button" type="primary" size="default" className={styles.addSliderButton} onClick={onAddOptions}>Add</MLButton>
                 </div>
                 <div>
-                  <div><span className={styles.enableStrategySwitch}><b>Enable Merge Strategy Scale </b></span><Switch aria-label="mergeStrategy-scale-switch" defaultChecked={false} onChange={(e) => toggleDisplayPriorityOrderTimeline(e)}></Switch>
+                  <div><span className={styles.enableStrategySwitch}><b>Enable Priority Order Scale </b></span><Switch aria-label="mergeStrategy-scale-switch" defaultChecked={false} onChange={(e) => toggleDisplayPriorityOrderTimeline(e)}></Switch>
                     <span>
                       <MLTooltip title={MergeRuleTooltips.strategyScale} id="priority-order-tooltip" placement="right">
                         <Icon type="question-circle" className={styles.questionCircle} theme="filled" />

marklogic-data-hub-central/ui/src/components/modeling/graph-view/graph-view.tsx

@@ -40,6 +40,7 @@ const GraphView: React.FC<Props> = (props) => {
   const [graphEditMode, setGraphEditMode] = useState(false);
   const [coordsChanged, setCoordsChanged] = useState(false);
   const [splitPaneResized, setSplitPaneResized] = useState(false);
+  const [exportPngButtonClicked, setExportPngButtonClicked] = useState(false);
 
   useEffect(() => {
     if (coordsChanged) {
@@ -177,7 +178,7 @@ const GraphView: React.FC<Props> = (props) => {
       <span className={styles.disabledCursor}>{publishButton}</span>
     </MLTooltip>
     <MLTooltip title={ModelingTooltips.exportGraph} placement="topLeft">
-      <FontAwesomeIcon className={styles.graphExportIcon} icon={faFileExport} aria-label="graph-export"/>
+      <FontAwesomeIcon className={styles.graphExportIcon} icon={faFileExport} aria-label="graph-export" onClick={() => { setExportPngButtonClicked(true); }}/>
     </MLTooltip>
   </span>;
 
@@ -251,6 +252,8 @@ const GraphView: React.FC<Props> = (props) => {
           getColor={getColor}
           splitPaneResized={splitPaneResized}
           setSplitPaneResized={setSplitPaneResized}
+          exportPngButtonClicked = {exportPngButtonClicked}
+          setExportPngButtonClicked = {setExportPngButtonClicked}
         />
       </div>
     </div>;

marklogic-data-hub-central/ui/src/components/modeling/graph-view/graph-vis/graph-vis.tsx

@@ -31,6 +31,8 @@ type Props = {
   getColor: any;
   splitPaneResized: any;
   setSplitPaneResized: any;
+  exportPngButtonClicked: boolean;
+  setExportPngButtonClicked: any;
 };
 
 let entityMetadata = {};
@@ -119,6 +121,18 @@ const GraphVis: React.FC<Props> = (props) => {
     }
   }, [network, modelingOptions.view]);
 
+  useEffect(() => {
+    if (props.exportPngButtonClicked)  {
+      let canvas = document.getElementsByClassName("vis-network")[0]["canvas"];
+      let link = document.createElement("a");
+      link.href = canvas.toDataURL();
+      link.setAttribute("download", "graph-view-model");
+      document.body.appendChild(link);
+      link.click();
+      props.setExportPngButtonClicked(false);
+    }
+  }, [props.exportPngButtonClicked]);
+
   const updateNetworkHeight = async () => {
     let baseHeight = Math.round(window.innerHeight-network.body.container.offsetTop);
     if (window.devicePixelRatio < 2) {