Rollback serialized id type (#773)

* Pass request to query key

* Make blank nodes map keyed on VertexId

* Make sure updatePrefixes is sent string

* Allow entity ID to be number or string

packages/graph-explorer/src/components/Graph/hooks/useRenderBadges.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Vertex } from "@/core";
+import { RenderedVertex } from "@/core";
 import { DrawBoxWithAdornmentOptions } from "@/components/utils";
 import drawBoxWithAdornment from "@/components/utils/canvas/drawBoxWithAdornment";
 import type {
@@ -17,7 +17,7 @@ export type Badge = DrawBoxWithAdornmentOptions & {
 };
 
 export type BadgeRenderer = (
-  nodeData: Vertex,
+  nodeData: RenderedVertex["data"],
   boundingBox: BoundingBox,
   options: {
     context: CanvasRenderingContext2D;
@@ -113,7 +113,7 @@ const useRenderBadges = ({
         // Draw model elements
         cy.nodes().forEach(node => {
           const zoomLevel = getZoomLevel(cy);
-          const nodeData = node.data() as Vertex;
+          const nodeData = node.data() as RenderedVertex["data"];
 
           if (
             node.style("display") === "none" ||

packages/graph-explorer/src/connector/queries.ts

@@ -39,6 +39,10 @@ export function searchQuery(
   });
 }
 
+export type NeighborCountsQueryRequest = {
+  vertexId: VertexId;
+};
+
 export type NeighborCountsQueryResponse = {
   nodeId: VertexId;
   totalCount: number;
@@ -53,16 +57,15 @@ export type NeighborCountsQueryResponse = {
  * @returns The count of neighbors for the given node as a total and per type.
  */
 export function neighborsCountQuery(
-  vertexId: VertexId,
+  request: NeighborCountsQueryRequest,
   explorer: Explorer | null
 ) {
   return queryOptions({
-    queryKey: ["neighborsCount", vertexId, explorer],
-    enabled: Boolean(explorer),
+    queryKey: ["neighborsCount", request, explorer],
     queryFn: async (): Promise<NeighborCountsQueryResponse> => {
       if (!explorer) {
         return {
-          nodeId: vertexId,
+          nodeId: request.vertexId,
           totalCount: 0,
           counts: {},
         };
@@ -71,12 +74,12 @@ export function neighborsCountQuery(
       const limit = explorer.connection.nodeExpansionLimit;
 
       const result = await explorer.fetchNeighborsCount({
-        vertexId,
+        vertexId: request.vertexId,
         limit,
       });
 
       return {
-        nodeId: vertexId,
+        nodeId: request.vertexId,
         totalCount: result.totalCount,
         counts: result.counts,
       };
@@ -108,14 +111,13 @@ export function vertexDetailsQuery(
   request: VertexDetailsRequest,
   explorer: Explorer | null
 ) {
-  const vertexId = request.vertexId;
   return queryOptions({
-    queryKey: ["db", "vertex", "details", vertexId, explorer],
+    queryKey: ["db", "vertex", "details", request, explorer],
     queryFn: async ({ signal }): Promise<VertexDetailsResponse> => {
       if (!explorer) {
         return { vertex: null };
       }
-      return await explorer.vertexDetails({ vertexId }, { signal });
+      return await explorer.vertexDetails(request, { signal });
     },
   });
 }
@@ -124,14 +126,13 @@ export function edgeDetailsQuery(
   request: EdgeDetailsRequest,
   explorer: Explorer | null
 ) {
-  const edgeId = request.edgeId;
   return queryOptions({
-    queryKey: ["db", "edge", "details", edgeId, explorer],
+    queryKey: ["db", "edge", "details", request, explorer],
     queryFn: async ({ signal }): Promise<EdgeDetailsResponse> => {
       if (!explorer) {
         return { edge: null };
       }
-      return await explorer.edgeDetails({ edgeId }, { signal });
+      return await explorer.edgeDetails(request, { signal });
     },
   });
 }

packages/graph-explorer/src/connector/sparql/types.ts

@@ -1,5 +1,4 @@
 import {
-  createEdgeId,
   createVertexId,
   Edge,
   EdgeId,
@@ -169,7 +168,7 @@ export type BlankNodeItem = {
   };
 };
 
-export type BlankNodesMap = Map<string, BlankNodeItem>;
+export type BlankNodesMap = Map<VertexId, BlankNodeItem>;
 
 export type GraphSummary = {
   numDistinctSubjects: number;
@@ -256,7 +255,7 @@ export function parseEdgeId(edgeId: EdgeId): {
 
   return {
     source: createVertexId(match[1].trim()),
-    predicate: createEdgeId(match[2].trim()),
+    predicate: match[2].trim(),
     target: createVertexId(match[3].trim()),
   };
 }

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

@@ -1,5 +1,10 @@
 import { atom, selector, selectorFamily } from "recoil";
-import type { Edge, EdgeId } from "@/core";
+import {
+  createRenderedEdgeId,
+  getEdgeIdFromRenderedEdgeId,
+  type Edge,
+  type EdgeId,
+} from "@/core";
 import isDefaultValue from "./isDefaultValue";
 import { nodesFilteredIdsAtom, nodesTypesFilteredAtom } from "./nodes";
 
@@ -59,11 +64,45 @@ export const edgesSelectedIdsAtom = atom<Set<EdgeId>>({
   default: new Set(),
 });
 
+export const edgesSelectedRenderedIdsAtom = selector({
+  key: "edges-selected-rendered-ids",
+  get: ({ get }) =>
+    new Set(get(edgesSelectedIdsAtom).values().map(createRenderedEdgeId)),
+  set: ({ set }, newValue) => {
+    if (isDefaultValue(newValue)) {
+      set(edgesSelectedIdsAtom, newValue);
+      return;
+    }
+
+    set(
+      edgesSelectedIdsAtom,
+      new Set(newValue.values().map(getEdgeIdFromRenderedEdgeId))
+    );
+  },
+});
+
 export const edgesOutOfFocusIdsAtom = atom<Set<EdgeId>>({
   key: "edges-out-of-focus-ids",
   default: new Set(),
 });
 
+export const edgesOutOfFocusRenderedIdsAtom = selector({
+  key: "edges-out-of-focus-rendered-ids",
+  get: ({ get }) =>
+    new Set(get(edgesOutOfFocusIdsAtom).values().map(createRenderedEdgeId)),
+  set: ({ set }, newValue) => {
+    if (isDefaultValue(newValue)) {
+      set(edgesOutOfFocusIdsAtom, newValue);
+      return;
+    }
+
+    set(
+      edgesOutOfFocusIdsAtom,
+      new Set(newValue.values().map(getEdgeIdFromRenderedEdgeId))
+    );
+  },
+});
+
 export const edgesFilteredIdsAtom = atom<Set<EdgeId>>({
   key: "edges-filtered-ids",
   default: new Set(),

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

@@ -45,7 +45,7 @@ export function useNeighborsCallback() {
     );
     const explorer = await snapshot.getPromise(explorerSelector);
     const response = await queryClient.ensureQueryData(
-      neighborsCountQuery(vertexId, explorer)
+      neighborsCountQuery({ vertexId }, explorer)
     );
 
     const neighbors = calculateNeighbors(

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

@@ -1,5 +1,10 @@
 import { atom, selector, selectorFamily, useRecoilValue } from "recoil";
-import type { Vertex, VertexId } from "@/core";
+import {
+  createRenderedVertexId,
+  getVertexIdFromRenderedVertexId,
+  type Vertex,
+  type VertexId,
+} from "@/core";
 import isDefaultValue from "./isDefaultValue";
 
 export function toNodeMap(nodes: Vertex[]): Map<VertexId, Vertex> {
@@ -55,11 +60,45 @@ export const nodesSelectedIdsAtom = atom<Set<VertexId>>({
   default: new Set(),
 });
 
+export const nodesSelectedRenderedIdsAtom = selector({
+  key: "nodes-selected-rendered-ids",
+  get: ({ get }) =>
+    new Set(get(nodesSelectedIdsAtom).values().map(createRenderedVertexId)),
+  set: ({ set }, newValue) => {
+    if (isDefaultValue(newValue)) {
+      set(nodesSelectedIdsAtom, newValue);
+      return;
+    }
+
+    set(
+      nodesSelectedIdsAtom,
+      new Set(newValue.values().map(getVertexIdFromRenderedVertexId))
+    );
+  },
+});
+
 export const nodesOutOfFocusIdsAtom = atom<Set<VertexId>>({
   key: "nodes-out-of-focus-ids",
   default: new Set(),
 });
 
+export const nodesOutOfFocusRenderedIdsAtom = selector({
+  key: "nodes-out-of-focus-rendered-ids",
+  get: ({ get }) =>
+    new Set(get(nodesOutOfFocusIdsAtom).values().map(createRenderedVertexId)),
+  set: ({ set }, newValue) => {
+    if (isDefaultValue(newValue)) {
+      set(nodesOutOfFocusIdsAtom, newValue);
+      return;
+    }
+
+    set(
+      nodesOutOfFocusIdsAtom,
+      new Set(newValue.values().map(getVertexIdFromRenderedVertexId))
+    );
+  },
+});
+
 export const nodesFilteredIdsAtom = atom<Set<VertexId>>({
   key: "nodes-filtered-ids",
   default: new Set(),

packages/graph-explorer/src/core/entities.ts

@@ -1,7 +1,7 @@
 import { Branded } from "@/utils";
 
-export type EdgeId = Branded<string, "EdgeId">;
-export type VertexId = Branded<string, "VertexId">;
+export type EdgeId = Branded<string | number, "EdgeId">;
+export type VertexId = Branded<string | number, "VertexId">;
 
 export type Vertex = {
   /**

packages/graph-explorer/src/core/entityIdType.test.ts

@@ -4,35 +4,35 @@ import { createEdgeId, createVertexId, getRawId } from "./entityIdType";
 describe("createVertexId", () => {
   it("should create a vertex id out of a string", () => {
     const id = createVertexId("123");
-    expect(id).toBe("(str)123");
+    expect(id).toBe("123");
   });
 
   it("should create a vertex id out of a number", () => {
     const id = createVertexId(123);
-    expect(id).toBe("(num)123");
+    expect(id).toBe(123);
   });
 });
 
 describe("createEdgeId", () => {
   it("should create an edge id out of a string", () => {
     const id = createEdgeId("123");
-    expect(id).toBe("(str)123");
+    expect(id).toBe("123");
   });
 
   it("should create an edge id out of a number", () => {
     const id = createEdgeId(123);
-    expect(id).toBe("(num)123");
+    expect(id).toBe(123);
   });
 });
 
 describe("getRawId", () => {
   it("should return the raw string id without the prefix", () => {
-    const id = getRawId("(str)123" as VertexId);
+    const id = getRawId(createVertexId("123"));
     expect(id).toBe("123");
   });
 
   it("should return the raw number id without the prefix", () => {
-    const id = getRawId("(num)123" as VertexId);
+    const id = getRawId(createVertexId(123));
     expect(id).toBe(123);
   });
 

packages/graph-explorer/src/core/entityIdType.ts

@@ -1,21 +1,19 @@
 import { VertexId, EdgeId } from "@/core";
 
 /**
- * Creates a VertexId that is a string prefixed with the ID type.
+ * Creates a VertexId from the given database ID.
  * @param id The original database ID
- * @returns A VertexId that is a string prefixed with the ID type
  */
 export function createVertexId(id: string | number): VertexId {
-  return prefixIdWithType(id) as VertexId;
+  return id as VertexId;
 }
 
 /**
- * Creates an EdgeId that is a string prefixed with the ID type.
+ * Creates an EdgeId from the given database ID.
  * @param id The original database ID
- * @returns An EdgeId that is a string prefixed with the ID type
  */
 export function createEdgeId(id: string | number): EdgeId {
-  return prefixIdWithType(id) as EdgeId;
+  return id as EdgeId;
 }
 
 /**
@@ -24,40 +22,5 @@ export function createEdgeId(id: string | number): EdgeId {
  * @returns The original database ID without the ID type prefix
  */
 export function getRawId(id: VertexId | EdgeId): string | number {
-  if (isIdNumber(id)) {
-    return parseInt(stripIdTypePrefix(id));
-  }
-  if (isIdString(id)) {
-    return stripIdTypePrefix(id);
-  }
-  return id;
-}
-
-const ID_TYPE_NUM_PREFIX = "(num)";
-const ID_TYPE_STR_PREFIX = "(str)";
-
-function prefixIdWithType(id: string | number): string {
-  if (typeof id === "number") {
-    return `${ID_TYPE_NUM_PREFIX}${id}`;
-  }
-
-  return `${ID_TYPE_STR_PREFIX}${id}`;
-}
-
-function isIdNumber(id: string): boolean {
-  return id.startsWith(ID_TYPE_NUM_PREFIX);
-}
-
-function isIdString(id: string): boolean {
-  return id.startsWith(ID_TYPE_STR_PREFIX);
-}
-
-function stripIdTypePrefix(id: string): string {
-  if (isIdNumber(id)) {
-    return id.slice(ID_TYPE_NUM_PREFIX.length);
-  }
-  if (isIdString(id)) {
-    return id.slice(ID_TYPE_STR_PREFIX.length);
-  }
   return id;
 }

packages/graph-explorer/src/core/index.ts

@@ -5,3 +5,4 @@ export * from "./StateProvider";
 export * from "./connector";
 export * from "./entityIdType";
 export * from "./entities";
+export * from "./renderedEntities";