add degrees selection in test-page

Author: william-schlegel

packages/app-builder/src/components/Graph/contexts/GraphSessionContext.tsx

@@ -26,11 +26,21 @@ export type GraphRecordRef = {
   recordId: string;
 };
 
+export const GRAPH_DEGREE_OPTIONS = [1, 2, 3, 4, 5] as const;
+export type GraphDegree = (typeof GRAPH_DEGREE_OPTIONS)[number];
+export const DEFAULT_GRAPH_DEGREES: GraphDegree = 2;
+
+export function isGraphDegree(value: number): value is GraphDegree {
+  return (GRAPH_DEGREE_OPTIONS as readonly number[]).includes(value);
+}
+
 export type GraphSessionContextValue = {
   recordType: string;
   setRecordType: (value: string) => void;
   recordId: string;
   setRecordId: (value: string) => void;
+  degrees: GraphDegree;
+  setDegrees: (value: GraphDegree) => void;
 
   graphData: GraphData | null;
   /** Incremented on every fetch; keys the graph subtree so it remounts on new data. */
@@ -76,6 +86,8 @@ export function GraphSessionProvider({
 
   const [recordType, setRecordType] = useState(seed?.recordType ?? '');
   const [recordId, setRecordId] = useState(seed?.recordId ?? '');
+  const [degrees, setDegrees] = useState<GraphDegree>(DEFAULT_GRAPH_DEGREES);
+  const [committedDegrees, setCommittedDegrees] = useState<GraphDegree>(DEFAULT_GRAPH_DEGREES);
   const [loadedRecord, setLoadedRecord] = useState<GraphRecordRef | null>(seed);
   const [selectedTableNames, setSelectedTableNames] = useState(initialTableNames);
   /** `null` means "every group", so groups loading in later are included without a sync effect. */
@@ -112,6 +124,7 @@ export function GraphSessionProvider({
     {
       recordType: loadedRecord?.recordType ?? '',
       recordId: loadedRecord?.recordId ?? '',
+      degrees: committedDegrees,
       ...committedFilterParams,
     },
     loadedRecord != null,
@@ -127,15 +140,26 @@ export function GraphSessionProvider({
     if (!recordType || !trimmedRecordId) return;
 
     const sameFilters = graphFilterParamsEqual(draftFilterParams, committedFilterParams);
+    const sameDegrees = degrees === committedDegrees;
     setCommittedFilterParams(draftFilterParams);
+    setCommittedDegrees(degrees);
 
     if (loadedRecord?.recordType === recordType && loadedRecord?.recordId === trimmedRecordId) {
-      if (sameFilters) void refetch();
+      if (sameFilters && sameDegrees) void refetch();
       return;
     }
 
     setLoadedRecord({ recordType, recordId: trimmedRecordId });
-  }, [committedFilterParams, draftFilterParams, loadedRecord, recordId, recordType, refetch]);
+  }, [
+    committedDegrees,
+    committedFilterParams,
+    degrees,
+    draftFilterParams,
+    loadedRecord,
+    recordId,
+    recordType,
+    refetch,
+  ]);
 
   const refreshGraph = useCallback(() => {
     setCommittedFilterParams(draftFilterParams);
@@ -180,6 +204,8 @@ export function GraphSessionProvider({
       setRecordType,
       recordId,
       setRecordId,
+      degrees,
+      setDegrees,
       graphData: data ?? null,
       graphGeneration: dataUpdatedAt,
       isGeneratingGraph: isFetching,
@@ -196,6 +222,7 @@ export function GraphSessionProvider({
     [
       recordType,
       recordId,
+      degrees,
       data,
       dataUpdatedAt,
       isFetching,

packages/app-builder/src/routes/_app/_builder/test-graph/index.tsx

@@ -1,30 +1,52 @@
 import { Page } from '@app-builder/components';
-import { useGraphSession } from '@app-builder/components/Graph/contexts/GraphSessionContext';
+import {
+  GRAPH_DEGREE_OPTIONS,
+  type GraphDegree,
+  isGraphDegree,
+  useGraphSession,
+} from '@app-builder/components/Graph/contexts/GraphSessionContext';
 import { GraphOptionSelect } from '@app-builder/components/Graph/GraphOptionSelect';
 import { SessionGraphCanvas } from '@app-builder/components/Graph/SessionGraphCanvas';
 import { useDataModel } from '@app-builder/services/data/data-model';
 import { createFileRoute } from '@tanstack/react-router';
-import { Button, Card, Input } from 'ui-design-system';
+import { Button, Card, Input, ThresholdRange, type ThresholdRangeStep } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
 export const Route = createFileRoute('/_app/_builder/test-graph/')({
   component: TestGraphRoute,
 });
 
+const GRAPH_DEGREE_COLORS = {
+  1: 'var(--color-green-primary)',
+  2: 'var(--color-green-primary)',
+  3: 'var(--color-yellow-primary)',
+  4: 'var(--color-orange-primary)',
+  5: 'var(--color-red-primary)',
+} as const satisfies Record<GraphDegree, string>;
+
+const GRAPH_DEGREE_STEPS: ThresholdRangeStep[] = GRAPH_DEGREE_OPTIONS.map((value) => ({
+  value,
+  color: GRAPH_DEGREE_COLORS[value],
+}));
+
 function StartRecordPicker({
   tableNames,
   recordType,
   recordId,
+  degrees,
   onRecordTypeChange,
   onRecordIdChange,
+  onDegreesChange,
   onLoad,
   isLoading,
 }: {
   tableNames: string[];
   recordType: string;
   recordId: string;
+  degrees: GraphDegree;
   onRecordTypeChange: (value: string) => void;
   onRecordIdChange: (value: string) => void;
+  onDegreesChange: (value: GraphDegree) => void;
   onLoad: () => void;
   isLoading: boolean;
 }) {
@@ -61,6 +83,18 @@ function StartRecordPicker({
             className="min-w-56"
           />
         </div>
+        <ThresholdRange
+          title="Degrees"
+          value={degrees}
+          onChange={(value) => {
+            if (isGraphDegree(value)) onDegreesChange(value);
+          }}
+          values={GRAPH_DEGREE_STEPS}
+          initialColor={GRAPH_DEGREE_COLORS[1]}
+          min={GRAPH_DEGREE_OPTIONS[0]}
+          max={GRAPH_DEGREE_OPTIONS.at(-1)}
+          className="w-56 pb-md"
+        />
         <Button variant="primary" disabled={!recordType || !recordId.trim() || isLoading} type="submit">
           {isLoading ? (
             <>
@@ -81,7 +115,8 @@ function StartRecordPicker({
 
 function TestGraphRoute() {
   const dataModel = useDataModel();
-  const { recordType, setRecordType, recordId, setRecordId, isGeneratingGraph, loadGraph } = useGraphSession();
+  const { recordType, setRecordType, recordId, setRecordId, degrees, setDegrees, isGeneratingGraph, loadGraph } =
+    useGraphSession();
 
   const tableNames = dataModel.map((table) => table.name).sort((a, b) => a.localeCompare(b));
 
@@ -92,8 +127,10 @@ function TestGraphRoute() {
           tableNames={tableNames}
           recordType={recordType}
           recordId={recordId}
+          degrees={degrees}
           onRecordTypeChange={setRecordType}
           onRecordIdChange={setRecordId}
+          onDegreesChange={setDegrees}
           onLoad={loadGraph}
           isLoading={isGeneratingGraph}
         />