Move node count by type query (#441)

* Ensure vertexType is defined * Move query to queries file
aws · Jun 18, 2024 · ae6e7d9 · ae6e7d9
1 parent 6feb2f5
commit ae6e7d9
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/packages/graph-explorer/src/connector/queries.ts b/packages/graph-explorer/src/connector/queries.ts
@@ -1,5 +1,6 @@
 import { queryOptions } from "@tanstack/react-query";
 import {
+  CountsByTypeResponse,
   Explorer,
   NeighborsRequest,
   NeighborsResponse,
@@ -62,3 +63,23 @@ export const neighborsCountQuery = (id: VertexId, explorer: Explorer | null) =>
       };
     },
   });
+
+/**
+ * Retrieves the count of nodes for a specific node type.
+ * @param nodeType A node label or class.
+ * @param explorer The service client to use for fetching.
+ * @returns An object with the total nodes for the given node type.
+ */
+export const nodeCountByNodeTypeQuery = (
+  nodeType: string,
+  explorer: Explorer | null
+) =>
+  queryOptions({
+    queryKey: ["node-count-by-node-type", nodeType, explorer],
+    enabled: Boolean(explorer),
+    queryFn: () =>
+      explorer?.fetchVertexCountsByType({
+        label: nodeType,
+      }) ?? nodeCountByNodeTypeEmptyResponse,
+  });
+const nodeCountByNodeTypeEmptyResponse: CountsByTypeResponse = { total: 0 };
diff --git a/packages/graph-explorer/src/hooks/useUpdateVertexTypeCounts.ts b/packages/graph-explorer/src/hooks/useUpdateVertexTypeCounts.ts
@@ -4,25 +4,14 @@ import { useConfiguration } from "../core";
 import { explorerSelector } from "../core/connector";
 import useUpdateSchema from "./useUpdateSchema";
 import { useRecoilValue } from "recoil";
+import { nodeCountByNodeTypeQuery } from "../connector/queries";
 
-const useUpdateVertexTypeCounts = (vertexType?: string) => {
+export default function useUpdateVertexTypeCounts(vertexType: string) {
   const config = useConfiguration();
   const configId = config?.id;
   const explorer = useRecoilValue(explorerSelector);
 
-  const query = useQuery({
-    queryKey: ["fetchCountsByType", vertexType, explorer],
-    queryFn: () => {
-      if (!vertexType) {
-        return { total: 0 };
-      }
-
-      return explorer?.fetchVertexCountsByType({
-        label: vertexType,
-      });
-    },
-    enabled: Boolean(vertexType),
-  });
+  const query = useQuery(nodeCountByNodeTypeQuery(vertexType, explorer));
 
   // Sync the result over to the schema in Recoil state
   const updateSchemaState = useUpdateSchema();
@@ -51,6 +40,4 @@ const useUpdateVertexTypeCounts = (vertexType?: string) => {
       };
     });
   }, [query.data, configId, updateSchemaState, vertexType]);
-};
-
-export default useUpdateVertexTypeCounts;
+}
diff --git a/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx b/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx
@@ -50,18 +50,32 @@ import TopBarWithLogo from "../common/TopBarWithLogo";
 import defaultStyles from "./DataExplorer.styles";
 
 export type ConnectionsProps = {
+  vertexType: string;
   classNamePrefix?: string;
 };
 
 const DEFAULT_COLUMN = {
   width: 150,
 };
 
-const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
+export default function DataExplorer() {
+  const { vertexType } = useParams();
+
+  if (!vertexType) {
+    // React Router will redirect if vertexType is not defined before reaching here.
+    return <>No vertex type was defined</>;
+  }
+
+  return <DataExplorerContent vertexType={vertexType} />;
+}
+
+function DataExplorerContent({
+  vertexType,
+  classNamePrefix = "ft",
+}: ConnectionsProps) {
   const styleWithTheme = useWithTheme();
   const pfx = withClassNamePrefix(classNamePrefix);
   const navigate = useNavigate();
-  const { vertexType } = useParams<{ vertexType: string }>();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const config = useConfiguration();
@@ -74,10 +88,6 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
   useUpdateVertexTypeCounts(vertexType);
 
   const vertexConfig = useMemo(() => {
-    if (!vertexType) {
-      return;
-    }
-
     return config?.getVertexTypeConfig(vertexType);
   }, [config, vertexType]);
 
@@ -198,7 +208,7 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
   const { data, isFetching } = useQuery({
     queryKey: ["keywordSearch", vertexType, pageIndex, pageSize, explorer],
     queryFn: () => {
-      if (!vertexType || !explorer) {
+      if (!explorer) {
         return { vertices: [] } as KeywordSearchResponse;
       }
 
@@ -209,7 +219,7 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
       });
     },
     placeholderData: keepPreviousData,
-    enabled: Boolean(vertexType) && Boolean(explorer),
+    enabled: Boolean(explorer),
   });
 
   useEffect(() => {
@@ -223,10 +233,6 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
   const setUserStyling = useSetRecoilState(userStylingAtom);
   const onDisplayNameChange = useCallback(
     (field: "name" | "longName") => (value: string | string[]) => {
-      if (!vertexType) {
-        return;
-      }
-
       setUserStyling(prevStyling => {
         const vtItem =
           clone(prevStyling.vertices?.find(v => v.type === vertexType)) ||
@@ -355,6 +361,4 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
       </Workspace.Content>
     </Workspace>
   );
-};
-
-export default DataExplorer;
+}