Fix expand selected type (#501)

* Fix expand selected type

* Update changelog

Changelog.md

@@ -15,6 +15,8 @@
 
 **Bug Fixes and Minor Changes**
 
+- Fix default selection of expand type to be the first available type for
+  expansion (<https://github.com/aws/graph-explorer/pull/501>)
 - Use `application/sparql-results+json` accept header for SPARQL requests
   (<https://github.com/aws/graph-explorer/pull/499>)
 - Fix text wrapping for labels in edge styling sidebar

packages/graph-explorer/src/hooks/useNeighborsOptions.ts

@@ -1,9 +1,17 @@
 import { useMemo } from "react";
 import { Vertex } from "../@types/entities";
-import { useConfiguration } from "../core/ConfigurationProvider";
+import {
+  useConfiguration,
+  VertexTypeConfig,
+} from "../core/ConfigurationProvider";
 import useTextTransform from "./useTextTransform";
+import { SelectOption } from "../components";
 
-const useNeighborsOptions = (vertex: Vertex) => {
+export type NeighborOption = SelectOption & {
+  config?: VertexTypeConfig;
+};
+
+export default function useNeighborsOptions(vertex: Vertex): NeighborOption[] {
   const config = useConfiguration();
   const textTransform = useTextTransform();
 
@@ -26,6 +34,4 @@ const useNeighborsOptions = (vertex: Vertex) => {
     vertex.data.neighborsCountByType,
     vertex.data.__unfetchedNeighborCounts,
   ]);
-};
-
-export default useNeighborsOptions;
+}

packages/graph-explorer/src/modules/NodeExpand/NodeExpandContent.tsx

@@ -8,7 +8,9 @@ import LoadingSpinner from "../../components/LoadingSpinner";
 import PanelEmptyState from "../../components/PanelEmptyState/PanelEmptyState";
 import { useWithTheme } from "../../core";
 import { useExpandNode } from "../../hooks";
-import useNeighborsOptions from "../../hooks/useNeighborsOptions";
+import useNeighborsOptions, {
+  NeighborOption,
+} from "../../hooks/useNeighborsOptions";
 import useTranslations from "../../hooks/useTranslations";
 import NeighborsList from "../common/NeighborsList/NeighborsList";
 import defaultStyles from "./NodeExpandContent.styles";
@@ -69,13 +71,15 @@ function ExpansionOptions({ vertex }: { vertex: Vertex }) {
   const neighborsOptions = useNeighborsOptions(vertex);
 
   const [selectedType, setSelectedType] = useState<string>(
-    neighborsOptions[0]?.value
+    firstNeighborAvailableForExpansion(neighborsOptions)?.value ?? ""
   );
   const [filters, setFilters] = useState<Array<NodeExpandFilter>>([]);
   const [limit, setLimit] = useState<number | null>(null);
 
   useEffect(() => {
-    setSelectedType(neighborsOptions[0]?.value);
+    setSelectedType(
+      firstNeighborAvailableForExpansion(neighborsOptions)?.value ?? ""
+    );
   }, [neighborsOptions]);
 
   const hasUnfetchedNeighbors = Boolean(vertex.data.__unfetchedNeighborCount);
@@ -151,3 +155,9 @@ function ExpandButton({
     </Button>
   );
 }
+
+function firstNeighborAvailableForExpansion(
+  neighborsOptions: NeighborOption[]
+) {
+  return neighborsOptions.find(x => !x.isDisabled) ?? neighborsOptions[0];
+}

packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx

@@ -7,6 +7,7 @@ import {
   InfoTooltip,
   Input,
   Select,
+  SelectOption,
 } from "../../components";
 import { useConfiguration } from "../../core";
 import useTextTransform from "../../hooks/useTextTransform";
@@ -17,7 +18,7 @@ export type NodeExpandFilter = {
   value: string;
 };
 export type NodeExpandFiltersProps = {
-  neighborsOptions: Array<{ label: string; value: string }>;
+  neighborsOptions: SelectOption[];
   selectedType: string;
   onSelectedTypeChange(type: string): void;
   filters: Array<NodeExpandFilter>;