BUG: Ambiguous precedence of CSS selectors for SVG nodes/edges. (#915)

Author: epatters

packages/frontend/src/stdlib/analyses/diagram_graph.tsx

@@ -57,7 +57,7 @@ export function diagramToGraphviz(
             attributes: {
                 id,
                 label: [label, overLabel].filter((s) => s).join(" : "),
-                class: graphStyles.svgCssClasses(meta).join(" "),
+                class: graphStyles.svgNodeCssClasses(meta).join(" "),
                 fontname: graphStyles.graphvizFontname(meta),
             },
         });
@@ -79,7 +79,7 @@ export function diagramToGraphviz(
             attributes: {
                 id,
                 label: overLabel ?? "",
-                class: graphStyles.svgCssClasses(meta).join(" "),
+                class: graphStyles.svgEdgeCssClasses(meta).join(" "),
                 fontname: graphStyles.graphvizFontname(meta),
             },
         });

packages/frontend/src/stdlib/analyses/model_graph.tsx

@@ -54,7 +54,7 @@ export function modelToGraphviz(
             attributes: {
                 id,
                 label: ob.label?.join(".") ?? "",
-                class: graphStyles.svgCssClasses(meta).join(" "),
+                class: graphStyles.svgNodeCssClasses(meta).join(" "),
                 fontname: graphStyles.graphvizFontname(meta),
             },
         });
@@ -74,7 +74,7 @@ export function modelToGraphviz(
             attributes: {
                 id,
                 label,
-                class: graphStyles.svgCssClasses(meta).join(" "),
+                class: graphStyles.svgEdgeCssClasses(meta).join(" "),
                 fontname: graphStyles.graphvizFontname(meta),
                 // Not recognized by Graphviz but will be passed through!
                 arrowstyle: meta?.arrowStyle ?? "default",

packages/frontend/src/stdlib/analyses/stock_flow_diagram.tsx

@@ -129,7 +129,6 @@ function StockFlowSVG(props: {
         return result;
     };
 
-    const linkClass = ["edge", svgStyles["link"]].join(" ");
     return (
         <svg
             ref={props.ref}
@@ -144,7 +143,7 @@ function StockFlowSVG(props: {
             <For each={props.layout?.edges ?? []}>{(edge) => <EdgeSVG edge={edge} />}</For>
             <For each={linkPaths()}>
                 {(data) => (
-                    <g class={linkClass}>
+                    <g class={svgStyles["link"]}>
                         <path marker-end={`url(#arrowhead-${linkMarker})`} d={data} />
                     </g>
                 )}

packages/frontend/src/stdlib/graph_styles.ts

@@ -28,8 +28,14 @@ export const defaultEdgeAttributes: Required<Viz.Graph>["edgeAttributes"] = {
 export const graphvizFontname = (meta?: BaseTypeMeta): string =>
     meta?.textClasses?.includes(textStyles.code) ? "Courier" : "Helvetica";
 
-// XXX: This should probably go somewhere else.
-export const svgCssClasses = (meta?: BaseTypeMeta): string[] => [
-    ...(meta?.svgClasses ?? []),
+/** CSS classes applied to a node in an SVG graph. */
+export const svgNodeCssClasses = (meta?: BaseTypeMeta): string[] => [
+    ...(meta?.svgClasses ?? ["node"]),
+    ...(meta?.textClasses ?? []),
+];
+
+/** CSS classes applied to an edge in an SVG graph. */
+export const svgEdgeCssClasses = (meta?: BaseTypeMeta): string[] => [
+    ...(meta?.svgClasses ?? ["edge"]),
     ...(meta?.textClasses ?? []),
 ];

packages/frontend/src/stdlib/svg_styles.module.css

@@ -12,5 +12,7 @@
 }
 
 .link path {
+    fill: none;
     stroke: blue;
+    stroke-width: 1.2;
 }

packages/frontend/src/visualization/graph_svg.tsx

@@ -46,7 +46,7 @@ export function NodeSVG<Id>(props: { node: GraphLayout.Node<Id> }) {
     } = destructure(props, { deep: true });
 
     return (
-        <g class={`node ${props.node.cssClass ?? ""}`}>
+        <g class={props.node.cssClass ?? "node"}>
             <rect x={x() - width() / 2} y={y() - height() / 2} width={width()} height={height()} />
             <Show when={props.node.label}>
                 <text class="label" x={x()} y={y()} dominant-baseline="middle" text-anchor="middle">
@@ -89,7 +89,7 @@ export function EdgeSVG<Id>(props: { edge: GraphLayout.Edge<Id> }) {
     };
 
     return (
-        <g class={`edge ${props.edge.cssClass ?? ""}`}>
+        <g class={props.edge.cssClass ?? "edge"}>
             <Switch fallback={defaultPath()}>
                 <Match when={props.edge.style === "double"}>
                     <path class="double-outer" d={path()} />