Use DM callAPI refactoring

Author: makseq

web/libs/datamanager/src/components/MainView/ScatterView/ScatterView.tsx

@@ -154,8 +154,9 @@ export const ScatterView: FC<ScatterViewProps> = observer(
     }, [data, settings.classField]);
 
     // load base points via API
-    const projectId = (view as any)?.root?.SDK?.projectId;
-    const { basePoints, loading: baseLoading, reload } = useScatterBaseData(projectId, settings);
+    const datamanager = (view as any)?.root?.SDK;
+    const projectId = datamanager?.projectId;
+    const { basePoints, loading: baseLoading, reload } = useScatterBaseData(projectId, settings, datamanager);
 
     const numericPoints: TaskPoint[] = useMemo(() => {
       return [...basePoints, ...numericPointsFiltered];
@@ -411,7 +412,7 @@ export const ScatterView: FC<ScatterViewProps> = observer(
         </Block>
 
         <DeckGL
-          key={`scatter-${deckKey}`}
+          key={`s catter-${deckKey}`}
           layers={layers}
           views={new OrthographicView({ id: "ortho-view" })}
           initialViewState={initialViewState}

web/libs/datamanager/src/components/MainView/ScatterView/hooks/useScatterBaseData.ts

@@ -36,11 +36,13 @@ const scatterCache = new Map<string, TaskPoint[]>();
  * 
  * @param projectId - Current project ID (undefined before project loaded)
  * @param settings - Scatter view settings with classField for categorization
+ * @param datamanager - Optional datamanager object
  * @returns Object with basePoints array, loading state, and reload function
  */
 export function useScatterBaseData(
   projectId: number | undefined,
   settings: ScatterSettings,
+  datamanager?: { apiCall: (...args: any[]) => Promise<any> },
 ): UseScatterBaseDataResult {
   const [basePoints, setBasePoints] = useState<TaskPoint[]>([]);
   const [loading, setLoading] = useState(false);
@@ -79,6 +81,7 @@ export function useScatterBaseData(
             classField: settings.classField,
             abortSignal: ctrl.signal,
             page: currentPage,
+            datamanager,
           });
 
           // Add this page's points to our accumulated array
@@ -106,7 +109,7 @@ export function useScatterBaseData(
 
     // Start the fetching process
     fetchAllPages();
-  }, [projectId, settings.classField]);
+  }, [projectId, settings.classField, datamanager]);
 
   // Trigger initial load and handle cleanup on unmount
   useEffect(() => {

web/libs/datamanager/src/components/MainView/ScatterView/utils/api.ts

@@ -19,6 +19,8 @@ export interface ScatterFetchOptions {
   pageSize?: number;
   /** Callback fired with progress information */
   onProgress?: (current: number, total: number) => void;
+  /** DataManager instance providing apiCall (preferred over window.fetch) */
+  datamanager?: { apiCall: (...args: any[]) => Promise<any> };
 }
 
 export interface ScatterFetchResult {
@@ -49,32 +51,48 @@ export async function fetchScatterPoints(
     abortSignal,
     page = 1,
     pageSize = 10000,
-    onProgress 
+    onProgress,
+    datamanager,
   } = options;
 
-  const queryParams = new URLSearchParams({
-    project: String(project),
+  // Build params object once so we can reuse in either apiCall or fetch
+  const paramsObject: Record<string, string | number> = {
+    project,
     x: "x",
     y: "y",
     class: classField,
     text: "text",
     r: "r",
-    page: String(page),
-    page_size: String(pageSize)
-  });
+    page,
+    page_size: pageSize,
+  };
+
+  // Response placeholder
+  let json: any;
+
+  if (datamanager?.apiCall) {
+    // Prefer DataManager apiCall according to DataManager API usage conventions
+    json = await datamanager.apiCall("scatterTasks", paramsObject, undefined, {
+      allowToCancel: true,
+      alwaysExpectJSON: true,
+    });
+  } else {
+    // Fallback to plain fetch for environments where DataManager is not available (e.g. Storybook)
+    const queryParams = new URLSearchParams(Object.entries(paramsObject).map(([k, v]) => [k, String(v)]));
+    const resp = await fetch(`/api/scatter/tasks?${queryParams.toString()}`, {
+      signal: abortSignal,
+    });
 
-  const resp = await fetch(`/api/scatter/tasks?${queryParams.toString()}`, {
-    signal: abortSignal,
-  });
+    if (!resp.ok) {
+      throw new Error(`Scatter API error ${resp.status}`);
+    }
 
-  if (!resp.ok) {
-    throw new Error(`Scatter API error ${resp.status}`);
+    json = await resp.json();
   }
 
-  const json = await resp.json();
   const tasks = json.tasks as any[];
   const total: number = json.total;
-  const actualPageSize: number = json.page_size;
+  const actualPageSize: number = json.page_size ?? pageSize;
 
   // Map API response to TaskPoint format
   const points: TaskPoint[] = tasks.map((t) => ({
@@ -96,6 +114,6 @@ export async function fetchScatterPoints(
     total,
     page,
     pageSize: actualPageSize,
-    hasMore: points.length === actualPageSize && (page * actualPageSize) < total
+    hasMore: points.length === actualPageSize && page * actualPageSize < total,
   };
 } 

web/libs/datamanager/src/components/MainView/ScatterView/utils/scatter-tokens.ts

@@ -7,19 +7,26 @@ export const CATEGORY_COLORS_OPACITY = 0.75;
 
 /** Base colors without opacity applied */
 const BASE_CATEGORY_COLORS: Color[] = [
-  [255, 107, 107, 255], // red (#ff6b6b)
-  [72, 219, 251, 255],  // blue (#48dbfb)
-  [254, 202, 87, 255],  // yellow (#feca57)
-  [162, 155, 254, 255], // lavender (#a29bfe)
-  [255, 127, 80, 255],  // coral (#ff7f50)
-  [255, 105, 180, 255], // hotpink (#ff69b4)
-  [186, 85, 211, 255],  // mediumorchid (#ba55d3)
-  [60, 179, 113, 255],  // mediumseagreen (#3cb371)
-  [0, 128, 128, 255],   // teal (#008080)
-  [106, 90, 205, 255],  // slateblue (#6a5acd)
-  [0, 255, 0, 255],     // lime (#00ff00)
-  [0, 206, 209, 255],   // darkturquoise (#00ced1)
-  [205, 133, 63, 255],  // peru (#cd853f)
+  [72, 219, 251, 255],    // blue (#48dbfb)
+  [163, 210, 169, 255],   // intermediate blue-yellow
+  [254, 202, 87, 255],    // yellow (#feca57)
+  [208, 178, 170, 255],   // intermediate yellow-lavender
+  [162, 155, 254, 255],   // lavender (#a29bfe)
+  [208, 130, 217, 255],   // intermediate lavender-hotpink
+  [255, 105, 180, 255],   // hotpink (#ff69b4)
+  [220, 95, 195, 255],    // intermediate hotpink-mediumorchid
+  [186, 85, 211, 255],    // mediumorchid (#ba55d3)
+  [123, 132, 162, 255],   // intermediate mediumorchid-mediumseagreen
+  [60, 179, 113, 255],    // mediumseagreen (#3cb371)
+  [30, 153, 120, 255],    // intermediate mediumseagreen-teal
+  [0, 128, 128, 255],     // teal (#008080)
+  [53, 109, 166, 255],    // intermediate teal-slateblue
+  [106, 90, 205, 255],    // slateblue (#6a5acd)
+  [53, 172, 102, 255],    // intermediate slateblue-lime
+  [0, 255, 0, 255],       // lime (#00ff00)
+  [0, 230, 104, 255],     // intermediate lime-darkturquoise
+  [0, 206, 209, 255],     // darkturquoise (#00ced1)
+  [36, 212, 230, 255],    // additional turquoise variant
 ];
 
 /** Helper function to apply opacity to colors */

web/libs/datamanager/src/sdk/api-config.js

@@ -171,5 +171,12 @@ export const APIConfig = {
       path: "/../comments/:id",
       method: "delete",
     },
+
+    /** Scatter tasks for scatter plot */
+    scatterTasks: {
+      path: "/scatter/tasks",
+      gateway: "/api",
+      method: "get",
+    },
   },
 };