set up storybook pages for each query; pending resolution of CORS issues

context/.storybook/preview.tsx

@@ -9,7 +9,6 @@ import '@fontsource-variable/inter/files/inter-latin-standard-normal.woff2';
 
 enableMapSet();
 
-const allowConditions = [(url) => String(url).endsWith('thumbnail.jpg')];
 initialize({
   serviceWorker: {
     options: {

context/app/static/js/api/scfind/useCellTypeMarkers.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography, Stack, FormControl, TextField } from '@mui/material';
+import { cellTypes } from 'js/components/genes/constants';
+import { http, passthrough } from 'msw';
+import useCellTypeMarkers, { CellTypeMarkersParams } from './useCellTypeMarkers';
+
+import { SCFIND_BASE } from './utils';
+
+function CellTypeMarkersControl(params: CellTypeMarkersParams) {
+  const result = useCellTypeMarkers(params);
+  return (
+    <Stack>
+      <Typography variant="h6">Cell Type Markers</Typography>
+      <Typography variant="body1">Params:</Typography>
+      <pre>{JSON.stringify(params, null, 2)}</pre>
+      <Typography variant="body1">Results:</Typography>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+    </Stack>
+  );
+}
+
+const meta: Meta = {
+  title: 'SCFind/CellTypeMarkers',
+  component: CellTypeMarkersControl,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get(`${SCFIND_BASE}/*`, () => {
+          return passthrough();
+        }),
+      ],
+    },
+  },
+  argTypes: {
+    cellTypes: {
+      control: {
+        type: 'text',
+        defaultValue: 'immature B cell',
+      },
+    },
+    annotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundCellTypes: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundAnnotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    topK: {
+      control: {
+        type: 'number',
+        defaultValue: 10,
+      },
+    },
+    sortField: {
+      control: {
+        type: 'text',
+        defaultValue: 'f1',
+      },
+    },
+    includePrefix: {
+      control: {
+        type: 'boolean',
+        defaultValue: true,
+      },
+    },
+  },
+};
+
+type Story = StoryObj<typeof CellTypeMarkersControl>;
+
+export const CellTypeMarkers: Story = {
+  args: {
+    cellTypes: 'immature B cell',
+  },
+};
+
+export default meta;

context/app/static/js/api/scfind/useCellTypeMarkers.ts

@@ -14,9 +14,9 @@ interface CellTypeMarkerInfo {
   tp: number;
 }
 
-interface CellTypeMarkersParams {
+export interface CellTypeMarkersParams {
   cellTypes: string | string[];
-  annotationNames: AnnotationNamesList;
+  annotationNames?: AnnotationNamesList;
   backgroundCellTypes?: string[];
   backgroundAnnotationNames?: AnnotationNamesList;
   topK?: number;

context/app/static/js/api/scfind/useCellTypeNames.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography, Stack } from '@mui/material';
+import { http, passthrough } from 'msw';
+import useCellTypeNames, { CellTypeNamesParams } from './useCellTypeNames';
+
+import { SCFIND_BASE } from './utils';
+
+function CellTypeNamesControl(params: CellTypeNamesParams) {
+  const result = useCellTypeNames(params);
+  return (
+    <Stack>
+      <Typography variant="h6">Cell Type Names</Typography>
+      <Typography variant="body1">Params:</Typography>
+      <pre>{JSON.stringify(params, null, 2)}</pre>
+      <Typography variant="body1">Results:</Typography>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+    </Stack>
+  );
+}
+
+const meta: Meta = {
+  title: 'SCFind/CellTypeNames',
+  component: CellTypeNamesControl,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get(`${SCFIND_BASE}/*`, () => {
+          return passthrough();
+        }),
+      ],
+    },
+  },
+  argTypes: {
+    annotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+type Story = StoryObj<typeof CellTypeNamesControl>;
+
+export const CellTypeNames: Story = {
+  args: {},
+};
+
+export default meta;

context/app/static/js/api/scfind/useCellTypeNames.ts

@@ -5,7 +5,7 @@ import { AnnotationNamesList } from './types';
 
 type CellTypeNamesKey = string;
 
-interface CellTypeNamesParams {
+export interface CellTypeNamesParams {
   annotationNames: AnnotationNamesList;
 }
 

context/app/static/js/api/scfind/useEvaluateMarkers.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography, Stack } from '@mui/material';
+import { http, passthrough } from 'msw';
+import useEvaluateMarkers, { EvaluateMarkersParams } from './useEvaluateMarkers';
+
+import { SCFIND_BASE } from './utils';
+
+function EvaluateMarkersControl(params: EvaluateMarkersParams) {
+  const result = useEvaluateMarkers(params);
+  return (
+    <Stack>
+      <Typography variant="h6">Cell Type Names</Typography>
+      <Typography variant="body1">Params:</Typography>
+      <pre>{JSON.stringify(params, null, 2)}</pre>
+      <Typography variant="body1">Results:</Typography>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+    </Stack>
+  );
+}
+
+const meta: Meta = {
+  title: 'SCFind/EvaluateMarkers',
+  component: EvaluateMarkersControl,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get(`${SCFIND_BASE}/*`, () => {
+          return passthrough();
+        }),
+      ],
+    },
+  },
+  argTypes: {
+    geneList: {
+      control: {
+        type: 'text',
+      },
+    },
+    cellTypes: {
+      control: {
+        type: 'text',
+      },
+    },
+    annotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundCellTypes: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundAnnotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    sortField: {
+      control: {
+        type: 'text',
+      },
+    },
+    includePrefix: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+type Story = StoryObj<typeof EvaluateMarkersControl>;
+
+export const EvaluateMarkers: Story = {
+  args: {},
+};
+
+export default meta;

context/app/static/js/api/scfind/useEvaluateMarkers.ts

@@ -3,7 +3,7 @@ import { fetcher } from 'js/helpers/swr';
 import { createScfindKey, annotationNamesToGetParams } from './utils';
 import { AnnotationNamesList } from './types';
 
-interface EvaluateMarkersParams {
+export interface EvaluateMarkersParams {
   geneList: string | string[];
   cellTypes: string | string[];
   annotationNames?: AnnotationNamesList;

context/app/static/js/api/scfind/useFindCellTypeSpecificities.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography, Stack } from '@mui/material';
+import { http, passthrough } from 'msw';
+import useFindCellTypeSpecificities, { FindCellTypeSpecificitiesParams } from './useFindCellTypeSpecificities';
+
+import { SCFIND_BASE } from './utils';
+
+function FindCellTypeSpecificitiesControl(params: FindCellTypeSpecificitiesParams) {
+  const result = useFindCellTypeSpecificities(params);
+  return (
+    <Stack>
+      <Typography variant="h6">Cell Type Names</Typography>
+      <Typography variant="body1">Params:</Typography>
+      <pre>{JSON.stringify(params, null, 2)}</pre>
+      <Typography variant="body1">Results:</Typography>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+    </Stack>
+  );
+}
+
+const meta: Meta = {
+  title: 'SCFind/FindCellTypeSpecificities',
+  component: FindCellTypeSpecificitiesControl,
+  parameters: {
+    msw: {
+      handlers: [
+        http.get(`${SCFIND_BASE}/*`, () => {
+          return passthrough();
+        }),
+      ],
+    },
+  },
+  argTypes: {
+    geneList: {
+      control: {
+        type: 'text',
+      },
+    },
+    cellTypes: {
+      control: {
+        type: 'text',
+      },
+    },
+    annotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundCellTypes: {
+      control: {
+        type: 'text',
+      },
+    },
+    backgroundAnnotationNames: {
+      control: {
+        type: 'text',
+      },
+    },
+    sortField: {
+      control: {
+        type: 'text',
+      },
+    },
+    includePrefix: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+type Story = StoryObj<typeof FindCellTypeSpecificitiesControl>;
+
+export const EvaluateMarkers: Story = {
+  args: {},
+};
+
+export default meta;

context/app/static/js/api/scfind/useFindCellTypeSpecificities.ts

@@ -3,7 +3,7 @@ import { fetcher } from 'js/helpers/swr';
 import { createScfindKey, annotationNamesToGetParams } from './utils';
 import { AnnotationNamesList } from './types';
 
-interface EvaluateMarkersParams {
+export interface FindCellTypeSpecificitiesParams {
   geneList?: string | string[];
   annotationNames?: AnnotationNamesList;
   minCells?: number;
@@ -12,7 +12,7 @@ interface EvaluateMarkersParams {
 
 type EvaluateMarkersKey = string;
 
-interface EvaluateMarkersResponse {
+interface FindCellTypeSpecificitiesResponse {
   evaluateMarkers: unknown;
 }
 
@@ -21,7 +21,7 @@ export function createCellTypeSpecificitiesKey({
   annotationNames,
   minCells,
   minFraction,
-}: EvaluateMarkersParams): EvaluateMarkersKey {
+}: FindCellTypeSpecificitiesParams): EvaluateMarkersKey {
   return createScfindKey('findCellTypeSpecificities', {
     annotation_names: annotationNamesToGetParams(annotationNames),
     gene_list: Array.isArray(geneList) ? geneList.join(',') : geneList,
@@ -30,7 +30,7 @@ export function createCellTypeSpecificitiesKey({
   });
 }
 
-export default function useFindCellTypeSpecificities(params: EvaluateMarkersParams) {
+export default function useFindCellTypeSpecificities(params: FindCellTypeSpecificitiesParams) {
   const key = createCellTypeSpecificitiesKey(params);
-  return useSWR<EvaluateMarkersResponse, unknown, EvaluateMarkersKey>(key, (url) => fetcher({ url }));
+  return useSWR<FindCellTypeSpecificitiesResponse, unknown, EvaluateMarkersKey>(key, (url) => fetcher({ url }));
 }