NickAkhmetov/scFind

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/scfind.test.ts

@@ -0,0 +1,61 @@
+import { createScfindKey, annotationNamesToGetParams, SCFIND_BASE } from './utils';
+
+describe('createScfindKey', () => {
+  function expectURLIsValid(key: string) {
+    expect(() => new URL(key)).not.toThrow();
+  }
+
+  it('should use the appropriate scfind base URL', () => {
+    const key = createScfindKey('endpoint', {});
+    expect(key).toContain(SCFIND_BASE);
+    expectURLIsValid(key);
+  });
+
+  it.each(['endpoint1', 'endpoint2', 'endpoint3', 'my-weird-endpoint'])(
+    'should use the appropriate provided endpoint',
+    (endpoint) => {
+      const key = createScfindKey(endpoint, {});
+      expect(key).toContain(endpoint);
+      expectURLIsValid(key);
+    },
+  );
+
+  it.each([
+    {
+      params: {
+        param1: 'value1',
+        param2: 'value2',
+        param3: undefined,
+      },
+      definedKeys: ['param1', 'param2'],
+      undefinedKeys: ['param3'],
+    },
+  ])('should filter out undefined passed params', ({ params, definedKeys, undefinedKeys }) => {
+    const key = createScfindKey('endpoint', params);
+    definedKeys.forEach((k) => {
+      expect(key.includes(k));
+    });
+    undefinedKeys.forEach((k) => {
+      expect(!key.includes(k));
+    });
+    expectURLIsValid(key);
+  });
+});
+
+describe('annotationNamesToGetParams', () => {
+  it('should return undefined if annotationNames is undefined', () => {
+    expect(annotationNamesToGetParams(undefined)).toBeUndefined();
+  });
+
+  it.each([
+    {
+      obj: [
+        { Organ: 'organ1', Tissue: 'tissue1' },
+        { Organ: 'organ1', Tissue: 'tissue2' },
+      ],
+      expected: '[{"Organ": "organ1", "Tissue": "tissue1"},{"Organ": "organ1", "Tissue": "tissue2"}]',
+    },
+  ])('should format annotation names correctly', ({ obj, expected }) => {
+    expect(annotationNamesToGetParams(obj)).toBe(expected);
+  });
+});

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

@@ -0,0 +1,6 @@
+interface AnnotationNames {
+  Organ: string;
+  Tissue: string;
+}
+
+export type AnnotationNamesList = AnnotationNames[];

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

@@ -0,0 +1,61 @@
+import useSWR from 'swr';
+import { fetcher } from 'js/helpers/swr';
+import { AnnotationNamesList } from './types';
+import { createScfindKey, annotationNamesToGetParams } from './utils';
+
+interface CellTypeMarkerInfo {
+  cellType: string;
+  f1: number;
+  fn: number;
+  fp: number;
+  genes: string;
+  precision: number;
+  recall: number;
+  tp: number;
+}
+
+export interface CellTypeMarkersParams {
+  cellTypes: string | string[];
+  annotationNames?: AnnotationNamesList;
+  backgroundCellTypes?: string[];
+  backgroundAnnotationNames?: AnnotationNamesList;
+  topK?: number;
+  sortField?: keyof CellTypeMarkerInfo;
+  includePrefix?: boolean;
+}
+
+type CellTypeMarkersKey = string;
+
+interface CellTypeMarkersResponse {
+  cellTypeMarkers: CellTypeMarkerInfo[];
+}
+
+export function createCellTypeMarkersKey({
+  cellTypes,
+  annotationNames,
+  backgroundCellTypes,
+  backgroundAnnotationNames,
+  topK,
+  sortField,
+  includePrefix,
+}: CellTypeMarkersParams): CellTypeMarkersKey {
+  return createScfindKey('cellTypeMarkers', {
+    cell_types: Array.isArray(cellTypes) ? cellTypes.join(',') : cellTypes,
+    annotation_names: annotationNames ? annotationNamesToGetParams(annotationNames) : undefined,
+    background_cell_types: Array.isArray(backgroundCellTypes) ? backgroundCellTypes.join(',') : backgroundCellTypes,
+    background_annotation_names: annotationNamesToGetParams(backgroundAnnotationNames),
+    top_k: topK ? topK.toString() : undefined,
+    include_prefix: includePrefix ? String(includePrefix) : undefined,
+    sort_field: sortField,
+  });
+}
+
+export default function useCellTypeMarkers({
+  topK = 10,
+  sortField = 'f1',
+  includePrefix = true,
+  ...params
+}: CellTypeMarkersParams) {
+  const key = createCellTypeMarkersKey({ topK, sortField, includePrefix, ...params });
+  return useSWR<CellTypeMarkersResponse, unknown, CellTypeMarkersKey>(key, (url) => fetcher({ url }));
+}

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

@@ -0,0 +1,25 @@
+import useSWR from 'swr';
+import { fetcher } from 'js/helpers/swr';
+import { createScfindKey, annotationNamesToGetParams } from './utils';
+import { AnnotationNamesList } from './types';
+
+type CellTypeNamesKey = string;
+
+export interface CellTypeNamesParams {
+  annotationNames: AnnotationNamesList;
+}
+
+interface CellTypeNamesResponse {
+  cellTypeNames: string[];
+}
+
+export function createCellTypeNamesKey(annotationNames?: AnnotationNamesList): CellTypeNamesKey {
+  return createScfindKey('cellTypeNames', {
+    annotation_names: annotationNames ? annotationNamesToGetParams(annotationNames) : undefined,
+  });
+}
+
+export default function useCellTypeNames({ annotationNames }: CellTypeNamesParams) {
+  const key = createCellTypeNamesKey(annotationNames);
+  return useSWR<CellTypeNamesResponse, unknown, CellTypeNamesKey>(key, (url) => fetcher({ url }));
+}

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">Evaluate 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/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;