Skip to content

Add conditional styling for vertex and edge types#1915

Open
jkemmererupgrade wants to merge 1 commit into
aws:mainfrom
jkemmererupgrade:conditional-styling-v2
Open

Add conditional styling for vertex and edge types#1915
jkemmererupgrade wants to merge 1 commit into
aws:mainfrom
jkemmererupgrade:conditional-styling-v2

Conversation

@jkemmererupgrade

Copy link
Copy Markdown
Contributor

Description

Adds an optional conditional style per vertex and edge type. When a rendered entity's attribute satisfies a condition, an alternate style is layered on top of the base style — useful for flagging states (e.g. a Person node with known_bad = true) without defining a separate type.

  • One condition per type. All base styling properties are available in the conditional pane, which inherits the base style and overrides only the fields you change.
  • Condition = attribute + operator (=, !=, >, <, >=, <=) + value. Comparison is type-aware and evaluated in JavaScript at render time: numeric when both sides are numbers, chronological when both parse as dates (handles ISO and non-ISO formats like M/D/YYYY), lexicographic otherwise. Matching is exposed to Cytoscape via a conditionMet flag rather than Cytoscape's value-selector operators, which compare lexicographically / via parseFloat and mishandle dates.
  • Precedence. Selection, focus dimming, and hidden states always take visual priority over a conditional style (Cytoscape's order-based cascade).
  • Import / export / reset. Conditional styles ride the existing shared-file-envelope format and the styling cascade, so they are saved, shared, imported, and reset with no new plumbing and no file-format version bump.
  • The conditional pane hides the type-level Display Name / Description selects, since those are not per-entity concerns.

Validation

  • pnpm checks passes with no errors; pnpm test passes (2102 tests).
  • A full headless-Cytoscape pipeline test drives condition evaluation + selector generation + the applied stylesheet and asserts only the matching entity receives the conditional color — covering numeric, ISO date, non-ISO (M/D/YYYY) date, and boolean conditions.
  • Manually validated in a locally built Docker image against a live graph: toggling a condition styles only the entities that satisfy it, and non-ISO dates compare correctly.

Related Issues

Related to #1785 (property-based node styling). This is a partial step: it covers the single-condition case — differentiating entities that meet one condition (e.g. known_bad = true, or risk_score > 90 → red) — which handles the fraud use case the issue leads with. It does not yet cover the issue's other examples: mapping one property to several distinct icons (e.g. gender → distinct icons) or mapping a numeric property to a color gradient. Those would be follow-on work.

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.

🤖 Generated with Claude Code

Adds an optional per-type condition that layers an alternate style on matching vertices and edges. The condition is type-aware (numeric/string/boolean comparisons) and evaluated in JS at render time. Conditional styles are included in styling import, export, and reset. Updates docs/features/graph-view.md accordingly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@jkemmererupgrade

Copy link
Copy Markdown
Contributor Author

Hey @kmcginnes, Thank you for merging the node-styling! I refactored the simple conditional styling PR I had to use the latest and put it up as a direct PR and closed mine. Style import and Export as you have it works and brings along the conditional styling as well.

@jkemmererupgrade

Copy link
Copy Markdown
Contributor Author

Applying conditional styling to a node:
Screenshot 2026-07-09 at 2 29 16 PM

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