Better readability of graph visualisation in dark VSCode themes (issue …

…#8)
elsevierlabs-os · Mar 29, 2024 · d8b9349 · d8b9349
1 parent 9c01cae
commit d8b9349
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 73 deletions.
diff --git a/src/inspector.css b/src/inspector.css
@@ -1,64 +1,3 @@
-
-  /* .links path {
-    stroke: #444;
-    stroke-opacity: 0.6;
-  }
-
-  marker {
-    stroke: #444;
-    fill: #444;
-    stroke-width: 0.1;
-  }
-
-  .edgelabel textPath {
-    fill: #444;
-  }
-
-  .nodes circle {
-    stroke: #fff;
-    stroke-width: 1.5px;
-  }
-
-  text {
-    font-family: "Elsevier Display", sans-serif;
-    font-size: 10px;
-  } 
-
-  .d3-tip {
-    line-height: 1;
-    padding: 6px;
-    background: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    border-radius: 4px;
-    font-family: "Elsevier Display", sans-serif;
-
-  }
-
-  table {
-    max-width: 500px;
-    vertical-align: top;
-  }
-
-  th, td {
-    vertical-align: top;
-  }
-
-  td {color: lightgray;}
-
-  svg {
-    width: 100%; 
-    padding-bottom: 92%; 
-    height: 1px; 
-    overflow: visible
-  } */
-
-
-
-  /* svg {
-    border: 1px solid #ccc;
-  } */
-
-
 svg {
   width: 100%; 
   padding-bottom: 92%; 
@@ -69,6 +8,21 @@ svg {
 body {
   font: 10px sans-serif;
 }
+
+body.vscode-light {
+  color: black;
+  fill: black;
+}
+
+body.vscode-dark {
+  color: white;
+  fill: white;
+}
+
+body.vscode-high-contrast {
+  color: red;
+}
+
 circle.node {
   fill: lightsteelblue;
   stroke: #555;
@@ -89,14 +43,3 @@ div.tooltip {
     position: absolute;
     display: block;
 }
-
-/* table {
-  max-width: 500px;
-  vertical-align: top;
-}
-
-th, td {
-  vertical-align: top;
-}
-
-td {color: lightgray;} */
diff --git a/src/inspector.js b/src/inspector.js
@@ -1,6 +1,7 @@
 import * as d3 from "d3";
 import { default as d3tip } from "d3-tip";
-// import { on } from "events";
+import { on } from "events";
+import css from './inspector.css';
 
 document.addEventListener('DOMContentLoaded', function() {
     const dataContents = window.document.getElementById('data').innerText;
@@ -128,6 +129,7 @@ function ForceGraph({nodes, links}, // a dictionary with nodes and links arrays.
             .style("opacity", 0)
             .attr("class","tooltip")
             .style("background-color", "white")
+            .style("color","rgb(36, 41, 46)")
             .style("border", "solid")
             .style("border-width", "2px")
             .style("border-radius", "5px")