Show message when no ER entities found. Fixes #36

Author: badsyntax

webview-ui/package-lock.json

@@ -19,7 +19,8 @@
     "d3": "^7.8.0",
     "mermaid": "^9.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1"
   },
   "devDependencies": {
     "@types/d3": "^7.4.0",

webview-ui/package.json

@@ -9,3 +9,33 @@
   width: 100%;
   max-width: 100% !important;
 }
+
+.no-entities {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.no-entities-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+body.mermaid-has-entities .mermaid {
+  display: block;
+}
+
+body.mermaid-has-entities .no-entities {
+  display: none;
+}
+
+body.mermaid-has-no-entities .mermaid {
+  display: none;
+}
+
+body.mermaid-has-no-entities .no-entities {
+  display: flex;
+}

webview-ui/src/components/Mermaid/Mermaid.css

@@ -1,6 +1,7 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import mermaid from 'mermaid';
 import * as d3 from 'd3';
+import { VscWarning } from 'react-icons/vsc';
 import './Mermaid.css';
 
 export type MermaidAPI = {
@@ -32,6 +33,20 @@ export function Mermaid({
     mermaid.contentLoaded();
 
     const svg = d3.select('.mermaid svg');
+    if (!svg.node()) {
+      return;
+    }
+
+    const hasEntities = !!document.querySelector(
+      '.mermaid svg g[id^="entity"]',
+    );
+
+    if (hasEntities) {
+      document.body.classList.add('mermaid-has-entities');
+    } else {
+      document.body.classList.add('mermaid-has-no-entities');
+    }
+
     svg.html('<g>' + svg.html() + '</g>');
 
     const inner = svg.select('g');
@@ -70,8 +85,15 @@ export function Mermaid({
   }));
 
   return (
-    <pre className="mermaid" id="mermaid">
-      {chart}
-    </pre>
+    <>
+      <div className="no-entities">
+        <h2 className="no-entities-header">
+          <VscWarning /> No Entities Were Generated
+        </h2>
+      </div>
+      <pre className="mermaid" id="mermaid">
+        {chart}
+      </pre>
+    </>
   );
 }