Neighbor list and vertex icon style (#714)

* Move vertex icon color logic internal * Ensure vertex icon doesn’t shrink * Move logic to NeighborTypeRow * Neighbor list styles
aws · Dec 11, 2024 · a99c0ed · a99c0ed
1 parent b0f8ce2
commit a99c0ed
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 112 deletions.
diff --git a/packages/graph-explorer/src/components/VertexIcon.tsx b/packages/graph-explorer/src/components/VertexIcon.tsx
@@ -10,11 +10,21 @@ interface Props {
 function VertexIcon({ vertexStyle, className }: Props) {
   if (vertexStyle.iconImageType === "image/svg+xml") {
     return (
-      <SVG src={vertexStyle.iconUrl} className={cn("size-6", className)} />
+      <SVG
+        src={vertexStyle.iconUrl}
+        className={cn("size-6 shrink-0", className)}
+        style={{ color: vertexStyle.color }}
+      />
     );
   }
 
-  return <img src={vertexStyle.iconUrl} className={cn("size-6", className)} />;
+  return (
+    <img
+      src={vertexStyle.iconUrl}
+      className={cn("size-6 shrink-0", className)}
+      style={{ color: vertexStyle.color }}
+    />
+  );
 }
 
 export function VertexSymbol({
@@ -32,7 +42,6 @@ export function VertexSymbol({
       )}
       style={{
         background: fade(vertexStyle.color, 0.2),
-        color: vertexStyle.color,
       }}
     >
       <VertexIcon vertexStyle={vertexStyle} className="size-full" />

diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionData.tsx
@@ -38,15 +38,7 @@ const ConnectionData = () => {
             <div className="node-title">{vtConfig.displayLabel}</div>
           </div>
         ),
-        icon: (
-          <div
-            style={{
-              color: vtConfig.style.color,
-            }}
-          >
-            <VertexIcon vertexStyle={vtConfig.style} />
-          </div>
-        ),
+        icon: <VertexIcon vertexStyle={vtConfig.style} />,
         className: css`
           .start-adornment {
             color: ${vtConfig.style.color}!important;

diff --git a/packages/graph-explorer/src/modules/EntitiesFilter/useFiltersConfig.tsx b/packages/graph-explorer/src/modules/EntitiesFilter/useFiltersConfig.tsx
@@ -120,15 +120,7 @@ const useFiltersConfig = () => {
         return {
           id: vertexConfig.type,
           text: vertexConfig.displayLabel,
-          endAdornment: (
-            <div
-              style={{
-                color: vertexConfig.style.color,
-              }}
-            >
-              <VertexIcon vertexStyle={vertexConfig.style} />
-            </div>
-          ),
+          endAdornment: <VertexIcon vertexStyle={vertexConfig.style} />,
         } as CheckboxListItemProps;
       })
       .toArray();

diff --git a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.styles.ts
diff --git a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/utils";
-import { VertexId } from "@/@types/entities";
+import { Vertex, VertexId } from "@/@types/entities";
 import {
   Button,
   Chip,
@@ -9,64 +9,43 @@ import {
   VertexIcon,
   VisibleIcon,
 } from "@/components";
-import { useNode, useWithTheme } from "@/core";
-import useNeighborsOptions from "@/hooks/useNeighborsOptions";
-import defaultStyles from "./NeighborsList.styles";
-import { useState } from "react";
+import { useNode } from "@/core";
+import useNeighborsOptions, {
+  NeighborOption,
+} from "@/hooks/useNeighborsOptions";
+import { ComponentPropsWithoutRef, useState } from "react";
 import { useQueryEngine } from "@/core/connector";
 
 export type NeighborsListProps = {
   id: VertexId;
-};
+} & ComponentPropsWithoutRef<"div">;
 
 const MAX_NEIGHBOR_TYPE_ROWS = 5;
 
-export default function NeighborsList({ id }: NeighborsListProps) {
-  const styleWithTheme = useWithTheme();
+export default function NeighborsList({
+  id,
+  className,
+  ...props
+}: NeighborsListProps) {
   const vertex = useNode(id);
   const neighborsOptions = useNeighborsOptions(vertex);
   const [showMore, setShowMore] = useState(false);
 
   return (
-    <div className={cn(styleWithTheme(defaultStyles), "section")}>
-      <div className="title">Neighbors ({vertex.neighborsCount})</div>
-      {neighborsOptions
-        .slice(0, showMore ? undefined : MAX_NEIGHBOR_TYPE_ROWS)
-        .map(op => {
-          const neighborsInView =
-            vertex.neighborsCountByType[op.value] -
-            (vertex.__unfetchedNeighborCounts?.[op.value] ?? 0);
-          return (
-            <div key={op.value} className="node-item">
-              <div className="vertex-type">
-                <div
-                  style={{
-                    color: op.config.style.color,
-                  }}
-                >
-                  <VertexIcon vertexStyle={op.config.style} />
-                </div>
-                {op.label}
-              </div>
-              <div className="vertex-totals">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Chip className="min-w-12">
-                      <VisibleIcon />
-                      {neighborsInView}
-                    </Chip>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {`${neighborsInView} ${op.label} in the Graph View`}
-                  </TooltipContent>
-                </Tooltip>
-                <Chip className="min-w-12">
-                  {vertex.neighborsCountByType[op.value]}
-                </Chip>
-              </div>
-            </div>
-          );
-        })}
+    <div
+      className={cn("flex flex-col gap-3 border-b p-3", className)}
+      {...props}
+    >
+      <div className="font-bold">Neighbors ({vertex.neighborsCount})</div>
+      <ul className="flex flex-col gap-3">
+        {neighborsOptions
+          .slice(0, showMore ? undefined : MAX_NEIGHBOR_TYPE_ROWS)
+          .map(op => (
+            <li key={op.value}>
+              <NeighborTypeRow vertex={vertex} op={op} />
+            </li>
+          ))}
+      </ul>
 
       <ExpandToggleButton
         itemCount={neighborsOptions.length}
@@ -77,6 +56,43 @@ export default function NeighborsList({ id }: NeighborsListProps) {
   );
 }
 
+function NeighborTypeRow({
+  vertex,
+  op,
+}: {
+  vertex: Vertex;
+  op: NeighborOption;
+}) {
+  const neighborsInView =
+    vertex.neighborsCountByType[op.value] -
+    (vertex.__unfetchedNeighborCounts?.[op.value] ?? 0);
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center gap-2 font-medium">
+        <VertexIcon vertexStyle={op.config.style} />
+        {op.label}
+      </div>
+      <div className="flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Chip className="min-w-12">
+              <VisibleIcon />
+              {neighborsInView}
+            </Chip>
+          </TooltipTrigger>
+          <TooltipContent>
+            {`${neighborsInView} ${op.label} in the Graph View`}
+          </TooltipContent>
+        </Tooltip>
+        <Chip className="min-w-12">
+          {vertex.neighborsCountByType[op.value]}
+        </Chip>
+      </div>
+    </div>
+  );
+}
+
 function ExpandToggleButton({
   itemCount,
   expanded,