Skip to content

Support per-type label-badge styling for vertices, not just edges - #2137

Open
giantamoeba wants to merge 1 commit into
aws:mainfrom
giantamoeba:feat/per-type-node-label-styles
Open

Support per-type label-badge styling for vertices, not just edges#2137
giantamoeba wants to merge 1 commit into
aws:mainfrom
giantamoeba:feat/per-type-node-label-styles

Conversation

@giantamoeba

Copy link
Copy Markdown

Description

Closes #2135.

Edge types can already style their own label badge per type — labelColor, labelBackgroundOpacity, labelBorderColor, labelBorderWidth, and labelBorderStyle are all part of EdgeVisualStyle, accepted by the styling file's edgeEntrySchema, and read by the per-type Cytoscape rule in useGraphStyles.ts (edge[type="..."]) to set text-background-color, text-background-opacity, text-border-*, etc.

Vertex types have no equivalent. VertexVisualStyle carried no label fields, vertexEntrySchema silently dropped any labelColor/etc a user added to a vertex entry in a styling file, and the per-type node rule (node[type="..."]) only ever emitted background-image/color/opacity, border-color/width/opacity/style, shape, width, height — never any text-* property. Node label appearance was therefore stuck on a single hardcoded canvas-wide default (components/Graph/styles/defaultNodeStyle.ts), with no way to make one vertex type's label look different from another's, even though the exact same mechanism already worked for edges.

This PR brings vertex label styling up to parity with edges:

  • core/StateProvider/graphStyles.ts: folds the existing LabelVisualStyle type into VertexVisualStyle, the same way EdgeVisualStyle already does (EdgeVisualStyle = LabelVisualStyle & {...}). appDefaultVertexStyle now carries the label defaults directly (previously split out into a separate, hand-synced appDefaultNodeLabelStyle constant used only by preview/legend UI, disconnected from the real canvas default). appDefaultNodeLabelStyle is kept as an export — used by VertexPreview.tsx and a test — but is now derived from appDefaultVertexStyle instead of duplicating its values by hand.
  • core/styling/stylingParser.ts: adds the matching optional fields (labelColor, labelBackgroundOpacity, labelBorderColor, labelBorderStyle, labelBorderWidth) to vertexEntrySchema, matching edgeEntrySchema exactly, so a styling file can now set them per vertex type and have them round-trip on export.
  • modules/GraphViewer/useGraphStyles.ts: the per-type node rule now emits the same text-* Cytoscape properties the edge rule already does, computing label text color from labelColor the same way (new Color(...).isDark() ? "#FFFFFF" : "#000000").

Not changed: node shape, background, and border resolution are untouched; this only adds the previously-missing label-badge fields alongside them, following the existing per-type/app-default resolution pattern (resolveVertexStyle) already used for everything else on VertexStyle.

Validation

  • pnpm run check:types — passes
  • pnpm run check:lint — 0 warnings, 0 errors
  • pnpm run check:format — passes
  • pnpm run test — full suite passes (one pre-existing, unrelated failure in safeSessionStorage.test.ts reproduces identically on main with no changes — a vi.mocked(logger.warn) assertion that appears environment-dependent, not something this PR touches)
  • New test in useGraphStyles.test.tsx (should apply a vertex type's own label-badge style, not just the app default) asserts a vertex type's labelColor/labelBackgroundOpacity/labelBorderColor/labelBorderWidth/labelBorderStyle produce the corresponding text-* Cytoscape properties and the correct computed text color, mirroring the existing edge-side test; the existing vertex-style test was updated for the now-present label fields in its expected output.

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary.

Edge types have always been able to style their own label badge
(labelColor, labelBackgroundOpacity, labelBorderColor/Width/Style) via
the per-type Cytoscape rule in useGraphStyles.ts. Vertex types could
not: VertexVisualStyle carried none of these fields, the styling-file
import schema had no vertex-side labelColor/etc, and the per-type node
Cytoscape rule only ever emitted background/border/shape -- node label
appearance was hardcoded to a single canvas-wide default with no way
to override it per type.

Folds LabelVisualStyle into VertexVisualStyle (mirroring how
EdgeVisualStyle already does), adds the matching fields to the styling
file's vertexEntrySchema, and extends createGraphStyles's per-type node
rule to emit the same text-* Cytoscape properties the edge rule already
does. appDefaultNodeLabelStyle (used by preview/legend UI) is now
derived from appDefaultVertexStyle instead of duplicating it, since the
label fields live there now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Vertex types can't style their own label badge (only edges can)

2 participants