Refactor to use display entities (#698)

* Fix edge type display label

* Move icon defaults to constants

* Add useQueryEngine hook

* Use toSorted() instead of sort()

* Use display vertex and edge

* Update changelog

* Remove commented out code

* Fix name in displayAttribute

* Use vertexTypes

* Use constant for “types”

* Use set for type lists

* Pull up displayNodes lookup

* Move display name logic to displayEdge

* Consolidate attribute styles & add edge properties

* Remove unused functions

* Improve the imports

* Only map the selected vertices & edges

* Update default display label to undefined

* Update changelog

* Fix random test failures

* Add tests for displayAttribute

* Revert to nullable displayId

* Revert "Revert to nullable displayId"

This reverts commit b541601.

Changelog.md

@@ -5,6 +5,9 @@
 - **Improved** consistency of rendering node information across search results,
   node details header, edge details header, and expand options header
   ([#697](https://github.com/aws/graph-explorer/pull/697))
+- **Improved** edge properties in the details sidebar, which now includes the
+  source and target vertex IDs and types
+  ([#698](https://github.com/aws/graph-explorer/pull/698))
 - **Improved** styling on icon buttons
   ([#675](https://github.com/aws/graph-explorer/pull/675))
 - **Improved** styling on checkboxes across the app, and specifically the export
@@ -15,6 +18,11 @@
   ([#679](https://github.com/aws/graph-explorer/pull/679))
 - **Updated** documentation to reorganize and extend the troubleshooting tips
   ([#681](https://github.com/aws/graph-explorer/pull/681))
+- **Refactored** logic around the display of nodes and edges to a single
+  location for simplicity and consistency
+  ([#698](https://github.com/aws/graph-explorer/pull/698))
+- **Fixed** date rendering on Gremlin connections
+  ([#698](https://github.com/aws/graph-explorer/pull/698))
 - **Updated** dependencies, including Node v22
   ([#680](https://github.com/aws/graph-explorer/pull/680))
 

packages/graph-explorer/src/components/VertexIcon.tsx

@@ -1,52 +1,41 @@
-import { fade, VertexTypeConfig } from "@/core";
+import { DisplayVertexStyle, fade } from "@/core";
 import SVG from "react-inlinesvg";
 import { cn } from "@/utils";
 
 interface Props {
-  iconUrl?: string;
-  iconImageType?: string;
+  vertexStyle: DisplayVertexStyle;
   className?: string;
 }
 
-function VertexIcon({ iconUrl, iconImageType, className }: Props) {
-  if (!iconUrl) {
-    return null;
+function VertexIcon({ vertexStyle, className }: Props) {
+  if (vertexStyle.iconImageType === "image/svg+xml") {
+    return (
+      <SVG src={vertexStyle.iconUrl} className={cn("size-6", className)} />
+    );
   }
 
-  if (iconImageType === "image/svg+xml") {
-    return <SVG src={iconUrl} className={cn("size-6", className)} />;
-  }
-
-  return <img src={iconUrl} className={cn("size-6", className)} />;
+  return <img src={vertexStyle.iconUrl} className={cn("size-6", className)} />;
 }
 
 export function VertexSymbol({
-  vtConfig,
+  vertexStyle,
   className,
 }: {
-  vtConfig: VertexTypeConfig;
+  vertexStyle: DisplayVertexStyle;
   className?: string;
 }) {
-  if (!vtConfig.iconUrl) {
-    return null;
-  }
-
   return (
     <div
       className={cn(
         "text-primary-main bg-primary-main/20 grid size-[36px] shrink-0 place-content-center rounded-full p-2 text-[2em]",
         className
       )}
       style={{
-        background: fade(vtConfig.color, 0.2),
-        color: vtConfig.color,
+        background: fade(vertexStyle.color, 0.2),
+        color: vertexStyle.color,
       }}
     >
-      <VertexIcon
-        iconUrl={vtConfig.iconUrl}
-        iconImageType={vtConfig.iconImageType}
-        className="size-full"
-      />
+      <VertexIcon vertexStyle={vertexStyle} className="size-full" />
     </div>
   );
 }

packages/graph-explorer/src/components/VertexRow.tsx

@@ -1,9 +1,4 @@
-import {
-  useVertexTypeConfig,
-  useVertexTypeConfigs,
-} from "@/core/ConfigurationProvider/useConfiguration";
-import { Vertex } from "@/@types/entities";
-import { useDisplayNames, useTextTransform } from "@/hooks";
+import { DisplayVertex } from "@/core";
 import { VertexSymbol } from ".";
 import { ComponentPropsWithoutRef } from "react";
 import { cn } from "@/utils";
@@ -12,30 +7,22 @@ export function VertexRow({
   vertex,
   className,
   ...props
-}: { vertex: Vertex } & ComponentPropsWithoutRef<"div">) {
-  const getDisplayNames = useDisplayNames();
-  const textTransform = useTextTransform();
-
-  const { name, longName } = getDisplayNames(vertex);
-
-  const vtConfigForStyling = useVertexTypeConfig(vertex.type);
-  const vertexTypeConfigs = useVertexTypeConfigs(vertex.types ?? [vertex.type]);
-  const vertexTypeDisplayLabels = vertexTypeConfigs
-    .map(vtConfig => vtConfig.displayLabel || textTransform(vtConfig.type))
-    .join(", ");
-
+}: { vertex: DisplayVertex } & ComponentPropsWithoutRef<"div">) {
   return (
     <div
       className={cn("flex flex-row items-center gap-3", className)}
       {...props}
     >
-      <VertexSymbol vtConfig={vtConfigForStyling} />
+      <VertexSymbol
+        vertexStyle={vertex.typeConfig.style}
+        className="size-11 p-[8px]"
+      />
       <div className="flex grow flex-col items-start">
         <div className="text-base font-bold leading-snug">
-          {vertexTypeDisplayLabels} &rsaquo; {name}
+          {vertex.displayTypes} &rsaquo; {vertex.displayName}
         </div>
         <div className="text-text-secondary/90 line-clamp-2 text-base leading-snug">
-          {longName}
+          {vertex.displayDescription}
         </div>
       </div>
     </div>

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

@@ -1,14 +1,12 @@
 import { batchPromisesSerially } from "@/utils";
-import {
-  DEFAULT_CONCURRENT_REQUESTS_LIMIT,
-  RESERVED_ID_PROPERTY,
-} from "@/utils/constants";
+import { DEFAULT_CONCURRENT_REQUESTS_LIMIT } from "@/utils/constants";
 import type { SchemaResponse } from "@/connector/useGEFetchTypes";
 import classesWithCountsTemplates from "../templates/classesWithCountsTemplates";
 import predicatesByClassTemplate from "../templates/predicatesByClassTemplate";
 import predicatesWithCountsTemplate from "../templates/predicatesWithCountsTemplate";
 import { GraphSummary, RawValue, SparqlFetch } from "../types";
 import { LoggerConnector } from "@/connector/LoggerConnector";
+import { defaultVertexTypeConfig } from "@/core/StateProvider/configuration";
 
 type RawClassesWCountsResponse = {
   results: {
@@ -112,13 +110,13 @@ const fetchPredicatesByClass = async (
         .values()
         .map(c => attributes.get(c)?.name)
         .filter(n => n != null)
-        .next().value ?? RESERVED_ID_PROPERTY,
+        .next().value ?? defaultVertexTypeConfig.displayNameAttribute,
     longDisplayNameAttribute:
       displayDescCandidates
         .values()
         .map(c => attributes.get(c)?.name)
         .filter(n => n != null)
-        .next().value ?? "types",
+        .next().value ?? defaultVertexTypeConfig.longDisplayNameAttribute,
     attributes: attributes.values().toArray(),
   }));
 };

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

@@ -1,3 +1,4 @@
 export * from "./types";
 export { default as useConfiguration } from "./useConfiguration";
+export * from "./useConfiguration";
 export { default as fetchConfiguration } from "./fetchConfiguration";

packages/graph-explorer/src/core/ConfigurationProvider/types.ts

@@ -154,8 +154,4 @@ export type ConfigurationContextProps = RawConfiguration & {
   vertexTypes: Array<string>;
   totalEdges: number;
   edgeTypes: Array<string>;
-  getVertexTypeConfig(vertexType: string): VertexTypeConfig;
-  getVertexTypeAttributes(vertexTypes: string[]): Array<AttributeConfig>;
-  getVertexTypeSearchableAttributes(vertexType: string): Array<AttributeConfig>;
-  getEdgeTypeConfig(edgeType: string): EdgeTypeConfig;
 };