diff --git a/packages/graph-explorer/src/core/StateProvider/userPreferences.ts b/packages/graph-explorer/src/core/StateProvider/userPreferences.ts index d9f0dfe9d..a4b81d7a1 100644 --- a/packages/graph-explorer/src/core/StateProvider/userPreferences.ts +++ b/packages/graph-explorer/src/core/StateProvider/userPreferences.ts @@ -4,11 +4,10 @@ import { atom, useAtomValue, useSetAtom } from "jotai"; import { atomFamily } from "jotai-family"; import { useDeferredValue } from "react"; -import { RESERVED_ID_PROPERTY, RESERVED_TYPES_PROPERTY } from "@/utils"; +import { LABELS, RESERVED_ID_PROPERTY, RESERVED_TYPES_PROPERTY } from "@/utils"; import DEFAULT_ICON_URL from "@/utils/defaultIconUrl"; -import type { EdgeType, VertexType } from "../entities"; - +import { createVertexType, type EdgeType, type VertexType } from "../entities"; import { useActiveSchema } from "./schema"; import { userStylingAtom } from "./storageAtoms"; @@ -216,7 +215,14 @@ export function createEdgePreference( export function useAllVertexPreferences(): VertexPreferences[] { const prefs = useAtomValue(vertexPreferencesAtom); const { vertices: allSchemas } = useActiveSchema(); - return allSchemas.map(({ type }) => prefs.get(type)); + const vertexTypes = allSchemas.map(({ type }) => type); + const missingType = createVertexType(LABELS.MISSING_TYPE); + + if (!vertexTypes.includes(missingType)) { + vertexTypes.push(missingType); + } + + return vertexTypes.map(type => prefs.get(type)); } /** Returns an array of edge preferences based on the known edge types in the schema. */ diff --git a/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx b/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx index 3002a999d..5d3abaa8c 100644 --- a/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx +++ b/packages/graph-explorer/src/modules/GraphViewer/useGraphStyles.test.tsx @@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, type Mock, vi } from "vitest"; import type { GraphProps } from "@/components/Graph"; import { createEdgeType, createVertexType } from "@/core"; +import { LABELS } from "@/utils"; import { createRandomEdgeTypeConfig, createRandomVertexTypeConfig, @@ -71,6 +72,24 @@ describe("useGraphStyles", () => { }); }); + it("should generate a default style for vertices without a schema type", async () => { + const { result } = renderHookWithState(() => useGraphStyles(), dbState); + + await waitFor(() => { + const vertexStyle = getStyles(result)[ + `node[type="${LABELS.MISSING_TYPE}"]` + ] as any; + expect(vertexStyle).toMatchObject({ + "background-image": "data:image/svg+xml;utf8,", + "background-color": "#128EE5", + "background-opacity": 0.4, + shape: "ellipse", + width: 24, + height: 24, + }); + }); + }); + it("should generate edge styles correctly", () => { const edgeConfig = { ...createRandomEdgeTypeConfig(),