add css class and code in utils to highlight nodes

frontend/src/components/CaseContainer.js

@@ -12,7 +12,12 @@ import EditableText from "./EditableText.js";
 import ItemViewer from "./ItemViewer.js";
 import ItemEditor from "./ItemEditor.js";
 import ItemCreator from "./ItemCreator.js";
-import { getBaseURL, jsonToMermaid } from "./utils.js";
+import {
+  getBaseURL,
+  jsonToMermaid,
+  highlightNode,
+  removeHighlight,
+} from "./utils.js";
 import configData from "../config.json";
 import "./CaseContainer.css";
 
@@ -190,7 +195,17 @@ class CaseContainer extends Component {
       let itemType = chunks[0];
       let itemId = chunks[1];
       this.setState({ itemType: itemType, itemId: itemId });
-      console.log("in showViewOrEditLayer, just set state");
+      this.setState({ loading: true });
+
+      this.setState({
+        mermaid_md: highlightNode(
+          this.state.mermaid_md,
+          this.state.itemType,
+          this.state.itemId
+        ),
+      });
+      console.log("setting highlight?");
+      this.setState({ loading: false });
       if (this.inEditMode()) {
         this.showEditLayer(itemType, itemId);
       } else {
@@ -217,7 +232,7 @@ class CaseContainer extends Component {
     // this should be redundant, as the itemId and itemType should already
     // be set when showViewLayer is called, but they can't do any harm..
     this.setState({ itemType: itemType, itemId: itemId });
-    this.hideViewLayer();
+    // this.hideViewLayer();
     this.setState({ showEditLayer: true });
   }
 
@@ -241,11 +256,23 @@ class CaseContainer extends Component {
     this.setState({ showCasePermissionLayer: true });
   }
 
+  resetHighlight() {
+    this.setState({ loading: true });
+    this.setState({
+      mermaid_md: removeHighlight(this.state.mermaid_md),
+    });
+    setTimeout(() => {
+      this.setState({ loading: false });
+    }, 100);
+  }
+
   hideViewLayer() {
+    this.resetHighlight();
     this.setState({ showViewLayer: false });
   }
 
   hideEditLayer() {
+    // this.resetHighlight();
     this.setState({ showEditLayer: false, itemType: null, itemId: null });
   }
 

frontend/src/components/utils.js

@@ -65,6 +65,7 @@ function jsonToMermaid(in_json) {
     if (obj.level !== undefined) {
       outputmd += "\nclass " + node + " classLevel" + obj.level + ";\n";
     }
+
     return outputmd;
   }
 
@@ -110,6 +111,7 @@ function jsonToMermaid(in_json) {
         }
       }
     }
+    console.log("outputmd is ", outputmd);
     return outputmd;
   }
 
@@ -126,4 +128,29 @@ function jsonToMermaid(in_json) {
   return outputmd;
 }
 
-export { getBaseURL, jsonToMermaid, sanitizeForMermaid };
+function highlightNode(inputMarkdown, nodeType, nodeId) {
+  // add a classDef to the bottom of the markdown highlighting a node
+  inputMarkdown = removeHighlight(inputMarkdown);
+  inputMarkdown +=
+    "\nclass " + nodeType + "_" + nodeId + " classHighlighted;\n";
+  return inputMarkdown;
+}
+
+function removeHighlight(inputMarkdown) {
+  // remove last line of markdown if it contains highlight
+  let lines = inputMarkdown.split("\n");
+  let numLines = lines.length;
+  if (lines[numLines - 2].includes("classHighlighted")) {
+    lines.splice(numLines - 2, numLines - 1);
+    inputMarkdown = lines.join("\n");
+  }
+  return inputMarkdown;
+}
+
+export {
+  getBaseURL,
+  jsonToMermaid,
+  sanitizeForMermaid,
+  highlightNode,
+  removeHighlight,
+};

frontend/src/config.json

@@ -15,7 +15,8 @@
     "classProjectClaimLevel3": "fill:#9db4e6,color:#FFF",
     "classSystemClaimLevel1": "fill:#009249,color:#FFF",
     "classSystemClaimLevel2": "fill:#24995e,color:#FFF",
-    "classSystemClaimLevel3": "fill:#3ea572,color:#FFF"
+    "classSystemClaimLevel3": "fill:#3ea572,color:#FFF",
+    "classHighlighted": "stroke:#FF0,stroke-width:4,fill:#7700bb,color:#FF0"
   },
   "navigation": {
     "AssuranceCase": {