Add conditional styling override for nodes and edges

docs/features/graph-view.md

@@ -83,6 +83,7 @@ Each node type can be customized in a variety of ways.
 - **Icon** can be picked from the built-in Lucide library via the **Browse** button, or uploaded as a custom SVG/raster image.
 - **Colors and borders** can be customized to visually distinguish from other node types
 - **Reset to Default** restores this node type's styling. If a styling file has been imported via Settings, the imported values for this type are restored; otherwise the application's hardcoded defaults are used.
+- **Conditional Style** — a single condition can be defined per node type via the **Conditional Style** tab in the styling dialog. When a node's property matches the condition (`property operator value`, e.g. `known_bad = true`), a secondary style (any combination of color, icon, border, shape, opacity, and display properties) overrides the base style in the graph canvas and all previews. The condition and its override are persisted, exported, and imported alongside the base style.
 
 ### Edge Styling Panel
 
@@ -93,6 +94,7 @@ Each edge type can be customized in a variety of ways.
 - **Arrow symbol** can be chosen for both source and target variations
 - **Colors and borders** can be customized for the edge label and the line
 - **Line style** can be solid, dotted, or dashed
+- **Conditional Style** — same as node conditional style above, but applied to edge line color, thickness, style, arrow shapes, and label appearance.
 
 ### Namespace Panel
 

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

@@ -0,0 +1,86 @@
+import {
+  buildConditionSelector,
+  buildConditionalNodeSelector,
+  buildConditionalEdgeSelector,
+  validOperatorsForDataType,
+} from "./conditionalStyling";
+
+describe("buildConditionSelector", () => {
+  it("quotes string values", () => {
+    expect(
+      buildConditionSelector(
+        { property: "identifier_type", operator: "=", value: "SSN" },
+        "String",
+      ),
+    ).toBe('[prop_identifier_type = "SSN"]');
+  });
+
+  it("quotes boolean values (stored as strings)", () => {
+    expect(
+      buildConditionSelector(
+        { property: "known_bad", operator: "=", value: "true" },
+        "Boolean",
+      ),
+    ).toBe('[prop_known_bad = "true"]');
+  });
+
+  it("does not quote numeric values", () => {
+    expect(
+      buildConditionSelector(
+        { property: "score", operator: ">", value: "90" },
+        "Number",
+      ),
+    ).toBe("[prop_score > 90]");
+  });
+
+  it("quotes values when dataType is undefined", () => {
+    expect(
+      buildConditionSelector(
+        { property: "x", operator: "=", value: "y" },
+        undefined,
+      ),
+    ).toBe('[prop_x = "y"]');
+  });
+});
+
+describe("buildConditionalNodeSelector", () => {
+  it("combines type + condition", () => {
+    expect(
+      buildConditionalNodeSelector(
+        "Customer",
+        { property: "known_bad", operator: "=", value: "true" },
+        "Boolean",
+      ),
+    ).toBe('node[type="Customer"][prop_known_bad = "true"]');
+  });
+});
+
+describe("buildConditionalEdgeSelector", () => {
+  it("builds edge selector", () => {
+    expect(
+      buildConditionalEdgeSelector(
+        "OWNS",
+        { property: "active", operator: "=", value: "false" },
+        "Boolean",
+      ),
+    ).toBe('edge[type="OWNS"][prop_active = "false"]');
+  });
+});
+
+describe("validOperatorsForDataType", () => {
+  it("returns all 6 for Number", () => {
+    expect(validOperatorsForDataType("Number")).toHaveLength(6);
+  });
+
+  it("returns only = and != for String", () => {
+    expect(validOperatorsForDataType("String")).toEqual(["=", "!="]);
+  });
+
+  it("returns only = and != for Boolean", () => {
+    expect(validOperatorsForDataType("Boolean")).toEqual(["=", "!="]);
+  });
+
+  it("returns all 6 for Date", () => {
+    expect(validOperatorsForDataType("Date")).toHaveLength(6);
+  });
+});

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

@@ -0,0 +1,68 @@
+export type ConditionOperator = "=" | "!=" | ">" | "<" | ">=" | "<=";
+
+/**
+ * A single condition that triggers the secondary style.
+ * `value` is always stored as a string; coercion to the right
+ * Cytoscape literal happens at selector-build time.
+ */
+export type StyleCondition = {
+  property: string;
+  operator: ConditionOperator;
+  value: string;
+};
+
+/**
+ * Source-property key prefix added to Cytoscape element data so that
+ * conditions can reference them without colliding with built-in keys
+ * (type, id, displayName, …).
+ */
+export const PROP_PREFIX = "prop_";
+
+/**
+ * Builds the Cytoscape attribute selector fragment for one condition.
+ *
+ * String/Boolean properties use quoted values: `[prop_x = "true"]`
+ * Number properties use unquoted values:       `[prop_score > 90]`
+ */
+export function buildConditionSelector(
+  condition: StyleCondition,
+  dataType: string | undefined,
+): string {
+  const key = `${PROP_PREFIX}${condition.property}`;
+  const isNumeric = dataType === "Number";
+  const literal = isNumeric ? condition.value : `"${condition.value}"`;
+  return `[${key} ${condition.operator} ${literal}]`;
+}
+
+/**
+ * Full Cytoscape selector for a vertex type + condition.
+ * e.g.  `node[type="Customer"][prop_known_bad = "true"]`
+ */
+export function buildConditionalNodeSelector(
+  vertexType: string,
+  condition: StyleCondition,
+  dataType: string | undefined,
+): string {
+  return `node[type="${vertexType}"]${buildConditionSelector(condition, dataType)}`;
+}
+
+export function buildConditionalEdgeSelector(
+  edgeType: string,
+  condition: StyleCondition,
+  dataType: string | undefined,
+): string {
+  return `edge[type="${edgeType}"]${buildConditionSelector(condition, dataType)}`;
+}
+
+/**
+ * Returns operators valid for the given dataType.
+ * Non-numeric types only support equality operators.
+ */
+export function validOperatorsForDataType(
+  dataType: string | undefined,
+): ConditionOperator[] {
+  if (dataType === "Number" || dataType === "Date") {
+    return ["=", "!=", ">", "<", ">=", "<="];
+  }
+  return ["=", "!="];
+}

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

@@ -22,6 +22,7 @@ import {
   type RenderedEdgeId,
   type RenderedVertexId,
   useRenderedEntities,
+  useRenderedVertices,
 } from "./renderedEntities";
 
 describe("createRenderedVertexId", () => {
@@ -137,6 +138,25 @@ describe("useRenderedVertices", () => {
       expect(vertexIds).toStrictEqual([vertex3.id]);
     });
   });
+
+  it("exposes vertex attributes as prop_ prefixed keys in Cytoscape data", async () => {
+    const vertex = createTestableVertex().with({
+      attributes: { known_bad: true, score: 42 },
+    });
+    const dbState = new DbState();
+    dbState.addTestableVertexToGraph(vertex);
+
+    const { result } = renderHookWithJotai(
+      () => useRenderedVertices(),
+      store => dbState.applyTo(store),
+    );
+
+    await waitFor(() => {
+      const element = result.current.find(v => v.data.vertexId === vertex.id);
+      expect(element?.data["prop_known_bad"]).toBe(true);
+      expect(element?.data["prop_score"]).toBe(42);
+    });
+  });
 });
 
 describe("useRenderedEdges", () => {

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

@@ -7,6 +7,7 @@ import {
   type DisplayVertex,
   edgesFilteredIdsAtom,
   edgesTypesFilteredAtom,
+  type EntityPropertyValue,
   type EntityRawId,
   nodesFilteredIdsAtom,
   nodesTypesFilteredAtom,
@@ -18,14 +19,31 @@ import {
 
 import type { EdgeId } from "../entities/edge";
 
+import { PROP_PREFIX } from "./conditionalStyling";
+
 /** A string representation of a vertex ID that encodes the original type. Cytoscape requires IDs to be strings. */
 export type RenderedVertexId = Branded<string, "RenderedVertexId">;
 
 /** A string representation of an edge ID that encodes the original type. Cytoscape requires IDs to be strings. */
 export type RenderedEdgeId = Branded<string, "RenderedEdgeId">;
 
+/**
+ * The data payload stored in a Cytoscape vertex element.
+ * The index signature allows conditional-styling selectors to access
+ * source vertex attributes via `prop_*` prefixed keys.
+ */
+export type RenderedVertexData = {
+  id: RenderedVertexId;
+  type: string;
+  vertexId: VertexId;
+  displayName: string;
+  displayTypes: string;
+  neighborCount: number;
+  [key: string]: EntityPropertyValue | RenderedVertexId | VertexId;
+};
+
 /** A representation of a vertex that Cytoscape can use. */
-export type RenderedVertex = ReturnType<typeof createRenderedVertex>;
+export type RenderedVertex = { data: RenderedVertexData };
 
 /** A representation of an edge that Cytoscape can use. */
 export type RenderedEdge = ReturnType<typeof createRenderedEdge>;
@@ -166,17 +184,24 @@ function stripIdTypePrefix(id: string): string {
  * - The `id` property is a string
  * - There exists a `data` property where any custom data is stored
  */
-function createRenderedVertex(vertex: DisplayVertex, neighborCount: number) {
-  return {
-    data: {
-      id: createRenderedVertexId(vertex.id),
-      type: vertex.primaryType,
-      vertexId: vertex.id,
-      displayName: vertex.displayName,
-      displayTypes: vertex.displayTypes,
-      neighborCount,
-    },
+function createRenderedVertex(
+  vertex: DisplayVertex,
+  neighborCount: number,
+): RenderedVertex {
+  const data: RenderedVertexData = {
+    id: createRenderedVertexId(vertex.id),
+    type: vertex.primaryType,
+    vertexId: vertex.id,
+    displayName: vertex.displayName,
+    displayTypes: vertex.displayTypes,
+    neighborCount,
   };
+  for (const [k, v] of Object.entries(vertex.original.attributes)) {
+    // Cytoscape selectors can't compare against Date objects — coerce to ISO string
+    // so date conditions like `create_date > "2026-01-01"` work lexicographically.
+    data[`${PROP_PREFIX}${k}`] = v instanceof Date ? v.toISOString() : v;
+  }
+  return { data };
 }
 
 /**