Use common VertexRow component (#697)

* Use common VertexRow component * Remove RemoteSvgIcon * Update changelog
aws · Nov 29, 2024 · bc80f94 · bc80f94
1 parent 85e7eb0
commit bc80f94
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 137 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -2,6 +2,9 @@
 
 ## Upcoming
 
+- **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** styling on icon buttons
   ([#675](https://github.com/aws/graph-explorer/pull/675))
 - **Improved** styling on checkboxes across the app, and specifically the export

diff --git a/packages/graph-explorer/src/components/RemoteSvgIcon/RemoteSvgIcon.tsx b/packages/graph-explorer/src/components/RemoteSvgIcon/RemoteSvgIcon.tsx
diff --git a/packages/graph-explorer/src/components/RemoteSvgIcon/index.ts b/packages/graph-explorer/src/components/RemoteSvgIcon/index.ts
diff --git a/packages/graph-explorer/src/components/VertexIcon.tsx b/packages/graph-explorer/src/components/VertexIcon.tsx
@@ -1,5 +1,5 @@
 import { fade, VertexTypeConfig } from "@/core";
-import RemoteSvgIcon from "./RemoteSvgIcon";
+import SVG from "react-inlinesvg";
 import { cn } from "@/utils";
 
 interface Props {
@@ -14,7 +14,7 @@ function VertexIcon({ iconUrl, iconImageType, className }: Props) {
   }
 
   if (iconImageType === "image/svg+xml") {
-    return <RemoteSvgIcon src={iconUrl} className={cn("size-6", className)} />;
+    return <SVG src={iconUrl} className={cn("size-6", className)} />;
   }
 
   return <img src={iconUrl} className={cn("size-6", className)} />;

diff --git a/packages/graph-explorer/src/components/VertexRow.tsx b/packages/graph-explorer/src/components/VertexRow.tsx
@@ -0,0 +1,43 @@
+import {
+  useVertexTypeConfig,
+  useVertexTypeConfigs,
+} from "@/core/ConfigurationProvider/useConfiguration";
+import { Vertex } from "@/@types/entities";
+import { useDisplayNames, useTextTransform } from "@/hooks";
+import { VertexSymbol } from ".";
+import { ComponentPropsWithoutRef } from "react";
+import { cn } from "@/utils";
+
+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(", ");
+
+  return (
+    <div
+      className={cn("flex flex-row items-center gap-3", className)}
+      {...props}
+    >
+      <VertexSymbol vtConfig={vtConfigForStyling} />
+      <div className="flex grow flex-col items-start">
+        <div className="text-base font-bold leading-snug">
+          {vertexTypeDisplayLabels} &rsaquo; {name}
+        </div>
+        <div className="text-text-secondary/90 line-clamp-2 text-base leading-snug">
+          {longName}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/graph-explorer/src/components/index.ts b/packages/graph-explorer/src/components/index.ts
@@ -45,9 +45,6 @@ export * from "./Popover";
 
 export { default as NotInProduction } from "./NotInProduction";
 
-export { default as RemoteSvgIcon } from "./RemoteSvgIcon";
-export * from "./RemoteSvgIcon";
-
 export { default as Section } from "./Section";
 export * from "./Section";
 
@@ -63,6 +60,8 @@ export * from "./UseLayer";
 export { default as VertexIcon } from "./VertexIcon";
 export * from "./VertexIcon";
 
+export * from "./VertexRow";
+
 export { default as Workspace } from "./Workspace";
 export * from "./Workspace";
 

diff --git a/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx b/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx
@@ -14,13 +14,12 @@ import {
   ArrowTriangleCross,
   ArrowTriangleTee,
   ArrowVee,
-  VertexIcon,
+  VertexRow,
 } from "@/components";
 import EdgeIcon from "@/components/icons/EdgeIcon";
 import { useWithTheme } from "@/core";
 import { useConfiguration } from "@/core/ConfigurationProvider";
-import fade from "@/core/ThemeProvider/utils/fade";
-import { useTextTransform, useDisplayNames } from "@/hooks";
+import { useTextTransform } from "@/hooks";
 import { formatDate } from "@/utils";
 import defaultStyles from "./EntityDetail.styles";
 import { useEdgeTypeConfig } from "@/core/ConfigurationProvider/useConfiguration";
@@ -37,20 +36,6 @@ const EdgeDetail = ({ edge, sourceVertex, targetVertex }: EdgeDetailProps) => {
 
   const edgeConfig = useEdgeTypeConfig(edge.type);
 
-  const sourceVertexConfig = useMemo(() => {
-    if (!sourceVertex) {
-      return;
-    }
-    return config?.getVertexTypeConfig(sourceVertex?.type);
-  }, [config, sourceVertex]);
-
-  const targetVertexConfig = useMemo(() => {
-    if (!targetVertex) {
-      return;
-    }
-    return config?.getVertexTypeConfig(targetVertex?.type);
-  }, [config, targetVertex]);
-
   const sortedAttributes = useMemo(() => {
     const attributes = clone(edgeConfig?.attributes);
     return (
@@ -61,9 +46,6 @@ const EdgeDetail = ({ edge, sourceVertex, targetVertex }: EdgeDetailProps) => {
   }, [edgeConfig?.attributes]);
 
   const textTransform = useTextTransform();
-  const getDisplayNames = useDisplayNames();
-  const { name: sourceName } = getDisplayNames(sourceVertex);
-  const { name: targetName } = getDisplayNames(targetVertex);
 
   return (
     <div className={styleWithTheme(defaultStyles(edgeConfig?.lineColor))}>
@@ -118,24 +100,7 @@ const EdgeDetail = ({ edge, sourceVertex, targetVertex }: EdgeDetailProps) => {
             <ArrowNone className={"source-arrow-type"} />
           )}
         </div>
-        {sourceVertexConfig?.iconUrl && (
-          <div
-            className={"icon"}
-            style={{
-              background: fade(sourceVertexConfig.color, 0.2),
-              color: sourceVertexConfig.color,
-            }}
-          >
-            <VertexIcon
-              iconUrl={sourceVertexConfig?.iconUrl}
-              iconImageType={sourceVertexConfig?.iconImageType}
-            />
-          </div>
-        )}
-        <div className={"content"}>
-          <div className={"title"}>{sourceName}</div>
-          <div>{textTransform(sourceVertex?.type || sourceVertex?.id)}</div>
-        </div>
+        <VertexRow vertex={sourceVertex} />
       </div>
       <div className={cn("header", "target-vertex")}>
         <div
@@ -176,24 +141,7 @@ const EdgeDetail = ({ edge, sourceVertex, targetVertex }: EdgeDetailProps) => {
             <ArrowNone className={"target-arrow-type"} />
           )}
         </div>
-        {targetVertexConfig?.iconUrl && (
-          <div
-            className={"icon"}
-            style={{
-              background: fade(targetVertexConfig.color, 0.2),
-              color: targetVertexConfig.color,
-            }}
-          >
-            <VertexIcon
-              iconUrl={targetVertexConfig?.iconUrl}
-              iconImageType={targetVertexConfig?.iconImageType}
-            />
-          </div>
-        )}
-        <div className={"content"}>
-          <div className={"title"}>{targetName}</div>
-          <div>{textTransform(targetVertex?.type || targetVertex?.id)}</div>
-        </div>
+        <VertexRow vertex={targetVertex} />
       </div>
       {edgeConfig && sortedAttributes.length > 0 && (
         <div className={"properties"}>

diff --git a/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx b/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx
@@ -8,9 +8,9 @@ import useTranslations from "@/hooks/useTranslations";
 import NeighborsList from "@/modules/common/NeighborsList/NeighborsList";
 import EntityAttribute from "./EntityAttribute";
 import defaultStyles from "./EntityDetail.styles";
-import VertexHeader from "@/modules/common/VertexHeader";
 import { useVertexTypeConfig } from "@/core/ConfigurationProvider/useConfiguration";
 import { RESERVED_ID_PROPERTY } from "@/utils/constants";
+import { VertexRow } from "@/components";
 
 export type VertexDetailProps = {
   node: Vertex;
@@ -45,7 +45,7 @@ export default function NodeDetail({ node }: VertexDetailProps) {
 
   return (
     <div className={styleWithTheme(defaultStyles())}>
-      <VertexHeader vertex={node} />
+      <VertexRow vertex={node} className="border-b p-3" />
       <NeighborsList vertex={node} />
       <div className={"properties"}>
         <div className={"title"}>Properties</div>

diff --git a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.tsx b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { Vertex } from "@/types/entities";
-import { PanelError, PanelFooter } from "@/components";
+import { PanelError, PanelFooter, VertexRow } from "@/components";
 import Button from "@/components/Button";
 import ExpandGraphIcon from "@/components/icons/ExpandGraphIcon";
 import GraphIcon from "@/components/icons/GraphIcon";
@@ -15,7 +15,6 @@ import useTranslations from "@/hooks/useTranslations";
 import NeighborsList from "@/modules/common/NeighborsList/NeighborsList";
 import defaultStyles from "./NodeExpandContent.styles";
 import NodeExpandFilters, { NodeExpandFilter } from "./NodeExpandFilters";
-import VertexHeader from "@/modules/common/VertexHeader";
 import { ExpandNodeRequest } from "@/hooks/useExpandNode";
 import { useUpdateNodeCountsQuery } from "@/hooks/useUpdateNodeCounts";
 import { cn } from "@/utils";
@@ -31,7 +30,7 @@ export default function NodeExpandContent({ vertex }: NodeExpandContentProps) {
     <div
       className={cn(styleWithTheme(defaultStyles), "flex h-full grow flex-col")}
     >
-      <VertexHeader vertex={vertex} />
+      <VertexRow vertex={vertex} className="border-b p-3" />
       <ExpandSidebarContent vertex={vertex} />
     </div>
   );

diff --git a/packages/graph-explorer/src/modules/SearchSidebar/NodeSearchResult.tsx b/packages/graph-explorer/src/modules/SearchSidebar/NodeSearchResult.tsx
@@ -1,12 +1,9 @@
 import { Vertex } from "@/@types/entities";
-import { Button, Tooltip, VertexSymbol } from "@/components";
-import { useVertexTypeConfig } from "@/core/ConfigurationProvider/useConfiguration";
+import { Button, Tooltip, VertexRow } from "@/components";
 import {
   useAddToGraph,
   useHasNodeBeenAddedToGraph,
   useRemoveNodeFromGraph,
-  useDisplayNames,
-  useTextTransform,
 } from "@/hooks";
 import { cn } from "@/utils";
 import {
@@ -18,14 +15,6 @@ import { useState } from "react";
 
 export function NodeSearchResult({ node }: { node: Vertex }) {
   const [expanded, setExpanded] = useState(false);
-  const getDisplayNames = useDisplayNames();
-  const textTransform = useTextTransform();
-
-  const { name, longName } = getDisplayNames(node);
-
-  const vtConfig = useVertexTypeConfig(node.type);
-  const nodeType = vtConfig?.displayLabel || textTransform(node.type);
-
   const addToGraph = useAddToGraph(node);
   const removeFromGraph = useRemoveNodeFromGraph(node.id);
   const hasBeenAdded = useHasNodeBeenAddedToGraph(node.id);
@@ -44,17 +33,7 @@ export function NodeSearchResult({ node }: { node: Vertex }) {
         <div>
           <ChevronRightIcon className="text-primary-dark/50 size-5 transition-transform duration-200 ease-in-out group-data-[expanded=true]:rotate-90" />
         </div>
-        <div className="flex grow flex-row items-center gap-3">
-          <VertexSymbol vtConfig={vtConfig} />
-          <div className="flex grow flex-col items-start">
-            <div className="text-base font-bold leading-snug">
-              {nodeType} &rsaquo; {name}
-            </div>
-            <div className="text-text-secondary/90 line-clamp-2 text-base leading-snug">
-              {longName}
-            </div>
-          </div>
-        </div>
+        <VertexRow vertex={node} className="grow" />
         <Tooltip
           text={hasBeenAdded ? "Remove node from view" : "Add node to view"}
           delayEnter={200}

diff --git a/packages/graph-explorer/src/modules/common/VertexHeader.tsx b/packages/graph-explorer/src/modules/common/VertexHeader.tsx