Remove broken round-polygon shapes from the picker and coerce stored values (#1922)

Cytoscape's round-polygon renderer degenerates at 24px for six shapes
(round-triangle, round-pentagon, round-hexagon, round-heptagon,
round-octagon, round-tag), rendering them as blobs and causing edges to
disappear. This removes them from the shape picker so they can't be
newly selected, and coerces any previously-stored values to
round-rectangle at both the storage-read boundary (ReadTransform) and
the styling-import boundary (Zod transform). The shapes remain in
SHAPE_STYLES so older files still parse without rejection.

Author: kmcginnes

packages/graph-explorer/src/core/StateProvider/graphStyles.test.ts

@@ -8,8 +8,10 @@ import { DbState, renderHookWithState } from "@/utils/testing";
 import {
   appDefaultEdgeStyle,
   appDefaultVertexStyle,
+  coerceBrokenShape,
   edgeStyleAtom,
   type EdgeStyleStorage,
+  type ShapeStyle,
   useEdgeStyling,
   useVertexStyling,
   vertexStyleAtom,
@@ -460,3 +462,32 @@ describe("edgeStyleAtom", () => {
     );
   });
 });
+
+describe("coerceBrokenShape", () => {
+  const BROKEN: ShapeStyle[] = [
+    "round-triangle",
+    "round-pentagon",
+    "round-hexagon",
+    "round-heptagon",
+    "round-octagon",
+    "round-tag",
+  ];
+
+  it.each(BROKEN)("coerces %s to round-rectangle", shape => {
+    expect(coerceBrokenShape(shape)).toBe("round-rectangle");
+  });
+
+  const SAFE: ShapeStyle[] = [
+    "ellipse",
+    "rectangle",
+    "round-rectangle",
+    "round-diamond",
+    "star",
+    "diamond",
+    "triangle",
+  ];
+
+  it.each(SAFE)("passes %s through unchanged", shape => {
+    expect(coerceBrokenShape(shape)).toBe(shape);
+  });
+});

packages/graph-explorer/src/core/StateProvider/graphStyles.ts

@@ -45,6 +45,31 @@ export const SHAPE_STYLES = [
 ] as const;
 export type ShapeStyle = (typeof SHAPE_STYLES)[number];
 
+/**
+ * Shapes that cytoscape's round-polygon renderer draws incorrectly at small
+ * node size (24px): their corner computation degenerates, rendering as a blob
+ * and producing invalid edge endpoints that cause edges to disappear. These are
+ * kept in {@link SHAPE_STYLES} so older files still parse, but are coerced to
+ * `round-rectangle` at every read boundary.
+ */
+const BROKEN_ROUND_POLYGON_SHAPES: ReadonlySet<ShapeStyle> = new Set([
+  "round-triangle",
+  "round-pentagon",
+  "round-hexagon",
+  "round-heptagon",
+  "round-octagon",
+  "round-tag",
+]);
+
+const BROKEN_SHAPE_REPLACEMENT: ShapeStyle = "round-rectangle";
+
+/** Coerces a broken round-polygon shape to `round-rectangle`, passing all others through. */
+export function coerceBrokenShape(shape: ShapeStyle): ShapeStyle {
+  return BROKEN_ROUND_POLYGON_SHAPES.has(shape)
+    ? BROKEN_SHAPE_REPLACEMENT
+    : shape;
+}
+
 export const LINE_STYLES = ["solid", "dashed", "dotted"] as const;
 export type LineStyle = (typeof LINE_STYLES)[number];
 

packages/graph-explorer/src/core/StateProvider/storageAtoms.ts

@@ -19,6 +19,7 @@ import {
   defaultSchemaViewLayout,
   transformSchemaViewLayout,
 } from "./schemaViewLayoutDefaults";
+import { transformVertexStyles } from "./vertexStylesTransform";
 
 // Run migrations before the atoms preload so they read the migrated data.
 // Each migration owns its own failure reporting (surfacing through the
@@ -95,7 +96,7 @@ const [
   atomWithLocalForage(
     "user-vertex-styles",
     new Map<VertexType, VertexStyleStorage>(),
-    { reconcile: reconcileMapByKey },
+    { reconcile: reconcileMapByKey, transform: transformVertexStyles },
   ),
   /** User-defined edge style overrides, keyed by type. */
   atomWithLocalForage(
@@ -111,7 +112,7 @@ const [
   atomWithLocalForage(
     "shared-vertex-styles",
     new Map<VertexType, VertexStyleStorage>(),
-    { reconcile: reconcileMapByKey },
+    { reconcile: reconcileMapByKey, transform: transformVertexStyles },
   ),
   /** Shared edge styles, loaded from a styling file. */
   atomWithLocalForage(

packages/graph-explorer/src/core/StateProvider/vertexStylesTransform.test.ts

@@ -0,0 +1,75 @@
+import { createVertexType, type VertexType } from "@/core/entities";
+
+import type { ShapeStyle, VertexStyleStorage } from "./graphStyles";
+
+import { transformVertexStyles } from "./vertexStylesTransform";
+
+function vertexMap(
+  entries: Array<[string, Omit<VertexStyleStorage, "type">]>,
+): Map<VertexType, VertexStyleStorage> {
+  return new Map(
+    entries.map(([name, fields]) => {
+      const type = createVertexType(name);
+      return [type, { ...fields, type }];
+    }),
+  );
+}
+
+describe("transformVertexStyles", () => {
+  it("returns the same reference when no shapes need coercion", () => {
+    const styles = vertexMap([
+      ["A", { shape: "ellipse" }],
+      ["B", { color: "#fff" }],
+    ]);
+
+    expect(transformVertexStyles(styles)).toBe(styles);
+  });
+
+  it("coerces each broken round-polygon shape to round-rectangle", () => {
+    const broken: ShapeStyle[] = [
+      "round-triangle",
+      "round-pentagon",
+      "round-hexagon",
+      "round-heptagon",
+      "round-octagon",
+      "round-tag",
+    ];
+
+    for (const shape of broken) {
+      const styles = vertexMap([["X", { shape }]]);
+      const result = transformVertexStyles(styles);
+      expect(result.get(createVertexType("X"))!.shape).toBe("round-rectangle");
+    }
+  });
+
+  it("does not coerce round-rectangle or round-diamond", () => {
+    const styles = vertexMap([
+      ["A", { shape: "round-rectangle" }],
+      ["B", { shape: "round-diamond" }],
+    ]);
+
+    expect(transformVertexStyles(styles)).toBe(styles);
+  });
+
+  it("preserves other fields on a coerced entry", () => {
+    const styles = vertexMap([
+      ["A", { shape: "round-tag", color: "#ff0000", borderWidth: 2 }],
+    ]);
+
+    const result = transformVertexStyles(styles);
+    const entry = result.get(createVertexType("A"))!;
+    expect(entry.shape).toBe("round-rectangle");
+    expect(entry.color).toBe("#ff0000");
+    expect(entry.borderWidth).toBe(2);
+  });
+
+  it("handles an empty map", () => {
+    const styles = vertexMap([]);
+    expect(transformVertexStyles(styles)).toBe(styles);
+  });
+
+  it("passes through entries without a shape field", () => {
+    const styles = vertexMap([["A", { color: "#abc" }]]);
+    expect(transformVertexStyles(styles)).toBe(styles);
+  });
+});

packages/graph-explorer/src/core/StateProvider/vertexStylesTransform.ts

@@ -0,0 +1,29 @@
+import type { VertexType } from "../entities";
+
+import { coerceBrokenShape, type VertexStyleStorage } from "./graphStyles";
+
+/**
+ * ReadTransform for vertex style maps: coerces broken round-polygon shapes to
+ * `round-rectangle` at load time. Entries without a `shape` field are passed
+ * through unchanged. Returns the same reference when no coercion was needed.
+ */
+export function transformVertexStyles(
+  styles: Map<VertexType, VertexStyleStorage>,
+): Map<VertexType, VertexStyleStorage> {
+  let changed = false;
+  const result = new Map<VertexType, VertexStyleStorage>();
+
+  for (const [type, entry] of styles) {
+    if (entry.shape !== undefined) {
+      const coerced = coerceBrokenShape(entry.shape);
+      if (coerced !== entry.shape) {
+        result.set(type, { ...entry, shape: coerced });
+        changed = true;
+        continue;
+      }
+    }
+    result.set(type, entry);
+  }
+
+  return changed ? result : styles;
+}

packages/graph-explorer/src/core/styling/stylingParser.test.ts

@@ -64,12 +64,34 @@ describe("style enum validation", () => {
     "none",
   ];
 
+  const BROKEN_SHAPES = new Set([
+    "round-triangle",
+    "round-pentagon",
+    "round-hexagon",
+    "round-heptagon",
+    "round-octagon",
+    "round-tag",
+  ]);
+
   test.each(SHAPES)("accepts shape %s", shape => {
     const result = parseStylingPayload({
       vertices: { A: { shape } },
       edges: {},
     });
-    expect(result.vertexStyles.get(createVertexType("A"))!.shape).toBe(shape);
+    const expected = BROKEN_SHAPES.has(shape) ? "round-rectangle" : shape;
+    expect(result.vertexStyles.get(createVertexType("A"))!.shape).toBe(
+      expected,
+    );
+  });
+
+  test("coerces broken round-polygon shapes to round-rectangle on import", () => {
+    const result = parseStylingPayload({
+      vertices: { A: { shape: "round-tag" } },
+      edges: {},
+    });
+    expect(result.vertexStyles.get(createVertexType("A"))!.shape).toBe(
+      "round-rectangle",
+    );
   });
 
   test("rejects an unknown shape, listing the valid options", () => {

packages/graph-explorer/src/core/styling/stylingParser.ts

@@ -8,6 +8,7 @@ import { createEdgeType, createVertexType } from "@/core/entities";
 import { FileEnvelopeError } from "@/core/fileEnvelope";
 import {
   ARROW_STYLES,
+  coerceBrokenShape,
   type EdgeStyleStorage,
   LINE_STYLES,
   SHAPE_STYLES,
@@ -133,7 +134,7 @@ const vertexEntrySchema = z
     displayLabel: z.string().optional(),
     displayNameAttribute: z.string().optional(),
     longDisplayNameAttribute: z.string().optional(),
-    shape: z.enum(SHAPE_STYLES).optional(),
+    shape: z.enum(SHAPE_STYLES).transform(coerceBrokenShape).optional(),
     backgroundOpacity: z.number().optional(),
     borderWidth: z.number().optional(),
     borderColor: z.string().optional(),

packages/graph-explorer/src/modules/NodesStyling/nodeShape.ts

@@ -11,13 +11,7 @@ export const NODE_SHAPE = [
   { label: "Rectangle", value: "rectangle" },
   { label: "Rhomboid", value: "rhomboid" },
   { label: "Round Diamond", value: "round-diamond" },
-  { label: "Round Heptagon", value: "round-heptagon" },
-  { label: "Round Hexagon", value: "round-hexagon" },
-  { label: "Round Octagon", value: "round-octagon" },
-  { label: "Round Pentagon", value: "round-pentagon" },
   { label: "Round Rectangle", value: "roundrectangle" },
-  { label: "Round Tag", value: "round-tag" },
-  { label: "Round Triangle", value: "round-triangle" },
   { label: "Star", value: "star" },
   { label: "Tag", value: "tag" },
   { label: "Triangle", value: "triangle" },