Anndata zarr port

anndata-zarr/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": ["react-app", "prettier", "plugin:import/errors", "plugin:import/warnings", "plugin:prettier/recommended"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      },
+      "alias": {
+        "map": [["@app", "./src"]],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", ["parent", "sibling"], "index"],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    ]
+  }
+}

anndata-zarr/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

anndata-zarr/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@biongff/anndata-zarr",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/biongff-anndata-zarr.cjs.js",
+  "module": "dist/biongff-anndata-zarr.es.js",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "import": "./dist/biongff-anndata-zarr.es.js",
+      "require": "./dist/biongff-anndata-zarr.cjs.js"
+    },
+    "./dist/anndata-zarr.css": "./dist/anndata-zarr.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.85.3",
+    "lodash": "^4.17.21",
+    "react-window": "^2.0.2",
+    "zarrita": "0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^6.2.3",
+    "vitest": "^3.0.8"
+  }
+}

anndata-zarr/src/components/AnndataController.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+
+import { FeatureSelect } from "./FeatureSelect";
+import { ObsSelect } from "./ObsSelect";
+
+export const AnndataController = ({ adata, callback = () => {} }) => {
+  const [feature, setFeature] = useState(null);
+  const [obsCol, setObsCol] = useState(null);
+
+  const handleFeatureSelect = (f) => {
+    setFeature(f);
+    setObsCol(null);
+  };
+
+  const handleObsSelect = (o) => {
+    setObsCol(o);
+    setFeature(null);
+  };
+
+  return (
+    <Stack sx={{ height: "100%" }}>
+      <Box sx={{ height: "50%" }}>
+        <FeatureSelect adata={adata} callback={callback} feature={feature} onSelect={handleFeatureSelect} />
+      </Box>
+      <Box sx={{ height: "50%" }}>
+        <ObsSelect adata={adata} callback={callback} obsCol={obsCol} onSelect={handleObsSelect} />
+      </Box>
+    </Stack>
+  );
+};

anndata-zarr/src/components/FeatureSelect.jsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import Box from "@mui/material/Box";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { List } from "react-window";
+
+import { useAnndataColors, useAnndataFeatures } from "../hooks";
+import { Legend } from "./Legend";
+
+const RowComponent = ({ index, items, style, onSelect, selectedIndex }) => {
+  return (
+    <ListItem style={style} key={index} component="div" disablePadding>
+      <ListItemButton
+        style={{ height: "100%" }}
+        onClick={() => onSelect({ index: items[index].matrixIndex })}
+        selected={items[index].matrixIndex === selectedIndex}
+      >
+        <ListItemText primary={items[index].name} />
+      </ListItemButton>
+    </ListItem>
+  );
+};
+
+export const FeatureSelect = ({ adata, feature, onSelect, callback = () => {} }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { data, isLoading, serverError } = useAnndataFeatures(adata);
+  const colorData = useAnndataColors(
+    {
+      ...adata,
+      matrixProps: {
+        feature: feature,
+      },
+    },
+    { enabled: !!feature },
+  );
+
+  useEffect(() => {
+    if (colorData?.serverError) {
+      callback(null);
+      return;
+    }
+    if (!colorData?.isLoading && colorData?.data) {
+      callback(colorData.data.colors);
+    }
+  }, [colorData, callback]);
+
+  const items = useMemo(() => {
+    if (!data) return [];
+    const allItems = data.map((name, index) => ({
+      name,
+      matrixIndex: index,
+    }));
+    if (!searchTerm) return allItems;
+    return allItems.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
+  }, [data, searchTerm]);
+
+  const legend = useMemo(() => {
+    if (colorData?.serverError || colorData?.isLoading || !colorData?.data) {
+      return null;
+    }
+    const { min, max, colorscale } = colorData.data;
+    return <Legend min={min} max={max} colorscale={colorscale} />;
+  }, [colorData.data, colorData?.isLoading, colorData?.serverError]);
+
+  if (isLoading) {
+    return <></>;
+  }
+  if (serverError) {
+    return <div>Error loading features</div>;
+  }
+  return (
+    <Box
+      sx={{
+        width: 250,
+        height: "100%",
+        minHeight: 250,
+        zIndex: 1,
+      }}
+    >
+      <Stack sx={{ height: "100%" }}>
+        <TextField
+          label="Search features"
+          type="search"
+          variant="filled"
+          fullWidth
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+        <List
+          rowComponent={RowComponent}
+          rowCount={items.length}
+          rowHeight={25}
+          rowProps={{
+            items,
+            onSelect,
+            selectedIndex: feature?.index,
+          }}
+        />
+        {!!feature && legend}
+      </Stack>
+    </Box>
+  );
+};

anndata-zarr/src/components/Legend.jsx

@@ -0,0 +1,25 @@
+import React, { useMemo } from "react";
+
+import _ from "lodash";
+
+import { getColor } from "../utils";
+
+export const Legend = ({ min, max, colorscale }) => {
+  const spanList = useMemo(() => {
+    return _.range(100).map((i) => {
+      const color = getColor({ value: i / 100, colorscale });
+      return <span key={i} className="grad-step" style={{ backgroundColor: `rgba(${color})` }} />;
+    });
+  }, [colorscale]);
+
+  return (
+    <div className="legend">
+      <div className="gradient">
+        {spanList}
+        <span className="domain-min">{min.toFixed(2)}</span>
+        <span className="domain-mid">{((min + max) / 2).toFixed(2)}</span>
+        <span className="domain-max">{max.toFixed(2)}</span>
+      </div>
+    </div>
+  );
+};