Support dark mode for graph (#139)

dsherret · Feb 28, 2024 · 8131fac · 8131fac
1 parent cfaa482
commit 8131fac
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/site/src/components/FlowNodeGraph.tsx b/site/src/components/FlowNodeGraph.tsx
@@ -2,6 +2,7 @@ import { instance as vizJsInstance, Viz } from "@viz-js/viz";
 import React from "react";
 
 import { FlowFlags, FlowNode } from "typescript";
+import { useAppContext } from "../AppContext";
 import { CompilerApi } from "../compiler";
 import { enumUtils } from "../utils";
 
@@ -11,7 +12,7 @@ export interface FlowNodeGraphProps {
 }
 
 function quoted(txt: string): string {
-  return JSON.stringify(txt).slice(1, -1);
+  return JSON.stringify(txt).slice(1, -1).replace("{", "\\{");
 }
 
 function getFlagText(api: CompilerApi, flags: FlowFlags) {
@@ -25,14 +26,15 @@ function getFlagText(api: CompilerApi, flags: FlowFlags) {
     case FlowFlags.BranchLabel:
     case FlowFlags.LoopLabel:
     case FlowFlags.Call:
+    case FlowFlags.SwitchClause:
       return enumUtils.getNamesForValues(api.FlowFlags).find(e => e.value === flags)!.names[0];
   }
   const flagElements = enumUtils.getEnumFlagLines(api.FlowFlags, flags);
   const flagLines = flagElements ? flagElements.join("\\n") : String(flags);
   return `flags=${flagLines.length > 1 ? "\\n" : ""}${flagLines}`;
 }
 
-function getDotForFlowGraph(api: CompilerApi, node: FlowNode) {
+function getDotForFlowGraph(api: CompilerApi, node: FlowNode, darkMode: boolean) {
   let nextId = 0;
   const getNextId = () => nextId++;
   const nodeIds = new Map<FlowNode, string>();
@@ -49,6 +51,9 @@ function getDotForFlowGraph(api: CompilerApi, node: FlowNode) {
   const nodeLines = [];
   const edgeLines = [];
 
+  const nodeProps = darkMode ? "color=\"white\" fontcolor=\"white\"" : "";
+  const edgeProps = darkMode ? "color=\"white\"" : "";
+
   const seen = new Set<FlowNode>();
   let fringe = [node];
   while (fringe.length) {
@@ -74,12 +79,12 @@ function getDotForFlowGraph(api: CompilerApi, node: FlowNode) {
       parts.push(quoted(nodeText));
     }
     parts.push(flagText);
-    nodeLines.push(`${id} [shape=record label="{${parts.join("|")}}"];`);
+    nodeLines.push(`${id} [shape=record ${nodeProps} label="{${parts.join("|")}}"];`);
     const antecedents = "antecedent" in fn ? [fn.antecedent] : ("antecedents" in fn && fn.antecedents) ? fn.antecedents : [];
     for (const antecedent of antecedents) {
       fringe.push(antecedent);
       const antId = idForNode(antecedent);
-      edgeLines.push(`${id} -> ${antId};`);
+      edgeLines.push(`${id} -> ${antId} [${edgeProps}];`);
     }
   }
 
@@ -116,7 +121,10 @@ function DotViz({ dot }: DotVizProps) {
 }
 
 export function FlowNodeGraph({ flowNode, api }: FlowNodeGraphProps) {
-  const dot = React.useMemo(() => getDotForFlowGraph(api, flowNode), [flowNode]);
-  // return <textarea rows={10} cols={40}>{dot}</textarea>;
+  const { state } = useAppContext();
+  const darkMode = state.editorTheme === "dark";
+  const dot = React.useMemo(() => getDotForFlowGraph(api, flowNode, darkMode), [flowNode, darkMode]);
+  // todo: make this work with dark mode
+  // const url = "https://dreampuf.github.io/GraphvizOnline/#" + encodeURI(dot);
   return <DotViz dot={dot} />;
 }
diff --git a/site/src/components/PropertiesViewer.tsx b/site/src/components/PropertiesViewer.tsx
@@ -95,7 +95,7 @@ function getBindingSection(context: Context, selectedNode: Node, typeChecker: Ty
       </div>
       <h2>FlowNode</h2>
       <div>
-        {getForFlowNode(context, selectedNode, typeChecker)}
+        {getForFlowNode(context, selectedNode)}
       </div>
     </>
   );
@@ -198,7 +198,7 @@ function getForSignature(context: Context, node: Node, typeChecker: TypeChecker)
   return getTreeView(context, signature, "Signature");
 }
 
-function getForFlowNode(context: Context, node: Node, typeChecker: TypeChecker) {
+function getForFlowNode(context: Context, node: Node) {
   const nodeWithFlowNode = node as Node & { flowNode?: FlowNode };
   if (nodeWithFlowNode.flowNode == null) {
     return <>[None]</>;