Vertex and edge types whose label contains a double quote lose all styling

[kmcginnes]

Description

useGraphStyles builds each per-type cytoscape selector by interpolating the type directly into a string, for vertex types and edge types alike:

// packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.ts:50
styles[`node[type="${vt}"]`] = { ... };
// packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.ts:67
styles[`edge[type="${et}"]`] = { ... };

Both come from the database. createVertexType (packages/graph-explorer/src/core/entities/vertex.ts:94-96) is return type as VertexType, a cast with no validation or escaping, and connectors build vertex and edge types straight from the query response.

So a label containing a double quote closes the attribute selector early and produces a malformed one. Cytoscape cannot match it, and every style for that type is silently dropped. For a vertex type that is color, shape, border, and icon. For an edge type it is line color, line style, arrows, and label color. The element falls back to default styling with nothing in the UI to explain it. Custom styling for that type also appears to do nothing, which is the confusing part for a user.

The edge case is confirmed on a live graph. On Neptune 1.4.7.0, an edge type containing " makes the graph view log The selector `edge[type="GXW_dq"x"]` is invalid to the console three times, and nothing appears in the UI.

A type containing ] or \ is likely affected the same way. Worth checking both while fixing.

This is long-standing, not a regression.

Environment

Found by code inspection rather than a report, so this is not environment specific.

• OS: any
• Browser: any
• Graph Explorer Version: 3.2.2 (main at 5a50963)
• Graph Database & Version: any. Reachable on any database that permits a quote in a label, which includes openCypher backtick-quoted labels and SPARQL type IRIs.

Steps to Reproduce

1. Connect to a graph containing a vertex type or edge type whose label contains a " character.
2. Open the graph view and add a node of that type, or a node with an edge of that type.
3. Give that type a custom color or icon in node styling, or a custom line color or style in edge styling.
4. The element keeps default styling and the customization has no visible effect.

Expected Behavior

Styling applies to every vertex type and edge type regardless of the characters in its label, or the type is rejected at the boundary with a clear error. Either way, styling should never fail silently.

Notes

Two ways to fix, and the choice depends on #2111.

Escaping at the selector is the small fix: escape " and \ when building both selectors, or reject invalid types in createVertexType and createEdgeType instead of casting.

Resolving styling off selectors entirely, which #2111 is scoping, deletes this code path and the bug with it. #2104 already replaced the schema view's per-type selectors with a single node/edge rule; the graph viewer still builds one selector per type. If #2111 lands soon, this issue is better closed by that work than patched ahead of it.

Related Issues

• Blocked by Spike: Resolve per-type graph styling off both selectors and element data #2111
• Part of Reconcile the graph canvas — stop rebuilding on every change #1887

Important

Internal only — this issue is maintained by the core team and is not accepting external contributions.