Skip to content

Add conditional styling override for nodes and edges#4

Open
jkemmererupgrade wants to merge 14 commits into
feature/styling-import-exportfrom
feature/conditional-styling
Open

Add conditional styling override for nodes and edges#4
jkemmererupgrade wants to merge 14 commits into
feature/styling-import-exportfrom
feature/conditional-styling

Conversation

@jkemmererupgrade
Copy link
Copy Markdown
Owner

@jkemmererupgrade jkemmererupgrade commented May 28, 2026

Description

Slice 3 of the 3-slice split of aws#1589, stacking on Slice 2 (#3).

Adds per-type conditional style overrides to vertices and edges. When a node or edge's source property matches a configured condition (property operator value), a secondary style (color, icon, border, shape, opacity, display properties) overrides the base style in the graph canvas and all previews.

Screenshot 2026-05-28 at 2 50 54 PM

Architecture

  • StyleCondition type + buildConditionalNodeSelector/buildConditionalEdgeSelector helpers in conditionalStyling.ts
  • condition + conditionalStyle fields on VertexPreferencesStorageModel / EdgePreferencesStorageModel (optional, excluded from the required VertexPreferences runtime type)
  • renderedEntities.ts flattens vertex.original.attributes into Cytoscape element data as prop_<key> entries so Cytoscape selectors can match them. Date values are coerced to ISO strings for lexicographic comparison.
  • useGraphStyles.ts emits additional high-specificity selectors (node[type="X"][prop_known_bad = "true"]) for types that have a condition + conditionalStyle set
  • useBackgroundImageMap.ts generates conditional icon queries keyed as ${type}:cond
  • NodeStyleDialog and EdgeStyleDialog gain a Base / Conditional tab toggle. The conditional tab shows a condition builder (ConditionalSection component: property dropdown from schema, operator select filtered by dataType, value input) and a full copy of the style fields wired to conditionalStyle. Selecting a property shows a VertexSymbol preview of the node with the conditional style applied.
  • The styling file format (Zod schema in defaultStyling.ts) accepts condition + conditionalStyle — round-trips cleanly through import and export

Supported operators

DataType Operators
String, Boolean =, !=
Number, Date =, !=, >, <, >=, <=

Date values from Neptune are coerced to ISO 8601 strings; comparisons work lexicographically (e.g. create_date > 2026-03-26).

Deliberately NOT in this PR

  • No changes to Slice 1 (icon picker) or Slice 2 (import/export UI) behavior

Validation

  • pnpm run checks — lint + format + types clean
  • pnpm test — 1813 / 1813 pass
  • pnpm coverage — all 4 thresholds met
  • Manually validated against live Neptune backend: conditional color + icon override applied to matching nodes; non-matching nodes kept base style; date comparison works with ISO format; per-type Remove Condition restores base; import/export round-trips condition + conditionalStyle

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 (docs/features/graph-view.md).

jkemmererupgrade and others added 14 commits May 28, 2026 15:21
…rt conditional icons

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
…condition + conditionalStyle

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
… selectors; add icon preview to conditional pane
@jkemmererupgrade jkemmererupgrade force-pushed the feature/conditional-styling branch from fd1caff to 129cc29 Compare May 28, 2026 21:24
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.

1 participant