@vitessce/vit-s 3.8.4 → 3.8.6

package/dist-tsc/Sidebar.d.ts

@@ -0,0 +1,2 @@
+export function Sidebar(props: any): JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist-tsc/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../src/Sidebar.js"],"names":[],"mappings":"AAgCA,iDA+CC"}

package/dist-tsc/Sidebar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { makeStyles, IconButton, Code as CodeIcon, InvertColors as InvertColorsIcon, } from '@vitessce/styles';
+const useStyles = makeStyles()(() => ({
+    sidebarContainer: {
+        backgroundColor: 'silver',
+        width: '30px',
+        height: '100%',
+    },
+    sidebarUl: {
+        listStyleType: 'none',
+        margin: 0,
+        padding: 0,
+    },
+    sidebarLi: {},
+    sidebarIconButton: {
+        padding: '3px',
+    },
+    sidebarIcon: {
+        color: 'black',
+        width: '24px',
+        height: '24px',
+    },
+}));
+export function Sidebar(props) {
+    const { theme, setTheme, configEditable, themeEditable, } = props;
+    const { classes } = useStyles();
+    const onToggleTheme = useCallback(() => {
+        setTheme(theme === 'dark' ? 'light2' : 'dark');
+    }, [theme]);
+    return (_jsx("div", { className: classes.sidebarContainer, children: _jsxs("ul", { className: classes.sidebarUl, children: [themeEditable ? (_jsx("li", { className: classes.sidebarLi, children: _jsx(IconButton, { alt: "Change theme", onClick: onToggleTheme, "aria-label": "Change theme", className: classes.sidebarIconButton, children: _jsx(InvertColorsIcon, { className: classes.sidebarIcon }) }) })) : null, configEditable ? (_jsx("li", { className: classes.sidebarLi, children: _jsx(IconButton, { alt: "Edit configuration", onClick: () => { }, "aria-label": "Edit configuration", className: classes.sidebarIconButton, children: _jsx(CodeIcon, { className: classes.sidebarIcon }) }) })) : null] }) }));
+}

package/dist-tsc/VitS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,4BApCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGW,cAAc,EAApC,SAAS,GAAC,IAAI;IAEC,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eA0PA"}
+{"version":3,"file":"VitS.d.ts","sourceRoot":"","sources":["../src/VitS.js"],"names":[],"mappings":"AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,4BApCG;IAAsB,MAAM,EAApB,MAAM;IAGkB,SAAS,EAAjC,SAAS,GAAC,MAAM;IACF,MAAM,EAApB,MAAM;IACQ,KAAK,EAAnB,MAAM;IAEU,MAAM;IACN,cAAc;IAEd,cAAc;IAEf,cAAc,EAA7B,OAAO;IAIQ,sBAAsB,EAArC,OAAO;IAGY,GAAG,EAAtB,IAAI,GAAC,MAAM;IAGW,cAAc,EAApC,SAAS,GAAC,IAAI;IAEC,kBAAkB,EAAjC,OAAO;IAEM,SAAS,EAAtB,KAAK;IACQ,SAAS,EAAtB,KAAK;IACQ,cAAc,EAA3B,KAAK;IACQ,iBAAiB,EAA9B,KAAK;IACc,OAAO,EAA1B,IAAI,GAAC,MAAM;IACI,QAAQ,EAAvB,OAAO;IACQ,SAAS,EAAxB,OAAO;IACY,QAAQ,EAA3B,IAAI,GAAC,MAAM;CAErB,eAmQA"}

package/dist-tsc/VitS.js

@@ -55,6 +55,14 @@ import { AsyncFunctionsContext } from './contexts.js';
  */
 export function VitS(props) {
     const { config, stores, rowHeight, height, theme, onWarn, onConfigChange, onLoaderChange, validateConfig = true, validateOnConfigChange = false, isBounded = false, uid = null, styleContainer, remountOnUidChange = true, viewTypes: viewTypesProp, fileTypes: fileTypesProp, jointFileTypes: jointFileTypesProp, coordinationTypes: coordinationTypesProp, asyncFunctions: asyncFunctionsProp, warning, pageMode = false, children, debugMode = DEFAULT_DEBUG_MODE, logLevel = DEFAULT_LOG_LEVEL, } = props;
+    /*
+    const prefersDark = (
+      window.matchMedia
+      && window.matchMedia('(prefers-color-scheme: dark)').matches
+    );
+    const defaultTheme = prefersDark ? 'dark' : 'light';
+    const [theme, setTheme] = useState(themeProp ?? defaultTheme);
+    */
     // eslint-disable-next-line no-unused-vars
     const [debugErrors, setDebugErrors] = useState([]);
     const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);

package/dist-tsc/VitessceGrid.js

@@ -28,7 +28,7 @@ export default function VitessceGrid(props) {
     const { success, configKey, rowHeight: initialRowHeight, config, theme, height, isBounded, viewTypes, fileTypes, coordinationTypes, stores, pageMode, children, } = props;
     const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
     const onResize = useEmitGridResize();
-    const [componentWidth] = useClosestVitessceContainerSize(containerRef);
+    const [componentWidth] = useClosestVitessceContainerSize(containerRef, 0);
     const { classes } = useVitessceContainerStyles();
     const { classes: titleClasses } = useTitleStyles();
     const altText = useMemo(() => getAltText(config), [configKey]);

package/dist-tsc/hooks.d.ts

@@ -39,7 +39,7 @@ export function useUrls(urls: (null | object[])[]): array;
  * @returns {array} `[width, height]` where width and height
  * are numbers.
  */
-export function useClosestVitessceContainerSize(ref: Ref): array;
+export function useClosestVitessceContainerSize(ref: Ref, sidebarWidth: any): array;
 /**
  * Normalize an obsFeatureMatrix to a Uint8Array.
  * @param {object} params

package/dist-tsc/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAqBA,oDAOC;AAED;;;;GAIG;AACH,uCAHa,KAAK,CAmBjB;AAED;;;;GAIG;AACH,mCAHa,KAAK,CAoCjB;AAED;;;;;GAKG;AACH,qCAJa,KAAK,CAqCjB;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,GACf,KAAK,CAYjB;AAED;;;;;;GAMG;AACH,qDAJW,GAAG,GACD,KAAK,CA0BjB;AAED;;;;;;;;;;GAUG;AACH,+DARG;IAAuB,gBAAgB,EAA/B,MAAM;CAEd,GAAU,KAAK,CAmBjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,yDAbW,YAAY,EAAE,GAAG,IAAI,GAInB;IACZ,QAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACjC,OAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACtC,OAAU,EAAE,MAAM,EAAE,CAAA;CACjB,CAwBH;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC;AAED;;;;;;;;;;GAUG;AACH,yDALW,MAAM,oBACN,gBAAI,IAAI,iBAEN;IAAE,kBAAkB,EAAE,OAAO,CAAA;CAAE,GAAC,IAAI,CAkChD;AAED;;;;;;;GAOG;AACH,6CALW,GAAC,YACD,CAAC,OAAO,CAAC,GAEP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8BlC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.js"],"names":[],"mappings":"AAqBA,oDAOC;AAED;;;;GAIG;AACH,uCAHa,KAAK,CAmBjB;AAED;;;;GAIG;AACH,mCAHa,KAAK,CAoCjB;AAED;;;;;GAKG;AACH,qCAJa,KAAK,CAqCjB;AAED;;;;;;GAMG;AACH,uCAHW,MAAM,EAAE,GACN,OAAO,CAOnB;AAED;;;;GAIG;AACH,8BAHW,CAAC,IAAI,GAAC,MAAM,EAAE,CAAC,EAAE,GACf,KAAK,CAYjB;AAED;;;;;;GAMG;AACH,qDAJW,GAAG,sBACD,KAAK,CA0BjB;AAED;;;;;;;;;;GAUG;AACH,+DARG;IAAuB,gBAAgB,EAA/B,MAAM;CAEd,GAAU,KAAK,CAmBjB;AAED;;;;;;;;;;;;;;;GAeG;AACH,yDAbW,YAAY,EAAE,GAAG,IAAI,GAInB;IACZ,QAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACjC,OAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC;IACtC,OAAU,EAAE,MAAM,EAAE,CAAA;CACjB,CAwBH;AAED;;;;QA2BC;AAED,iEAOC;AAED,kHA4BC;AAED;;;;;;;;;;GAUG;AACH,yDALW,MAAM,oBACN,gBAAI,IAAI,iBAEN;IAAE,kBAAkB,EAAE,OAAO,CAAA;CAAE,GAAC,IAAI,CAkChD;AAED;;;;;;;GAOG;AACH,6CALW,GAAC,YACD,CAAC,OAAO,CAAC,GAEP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8BlC"}

package/dist-tsc/hooks.js

@@ -141,14 +141,14 @@ export function useUrls(urls) {
  * @returns {array} `[width, height]` where width and height
  * are numbers.
  */
-export function useClosestVitessceContainerSize(ref) {
+export function useClosestVitessceContainerSize(ref, sidebarWidth) {
     const [height, setHeight] = useState();
     const [width, setWidth] = useState();
     useEffect(() => {
         function onWindowResize() {
             if (ref.current) {
                 const { clientHeight: componentHeight, clientWidth: componentWidth, } = ref.current.closest(`.${VITESSCE_CONTAINER}`);
-                setWidth(componentWidth);
+                setWidth(componentWidth - sidebarWidth);
                 setHeight(componentHeight);
             }
         }

package/dist-tsc/index.d.ts

@@ -5,6 +5,7 @@ export { PopperMenu } from "./shared-mui/components.js";
 export { useHasLoader } from "./data-hook-utils.js";
 export { logConfig } from "./view-config-utils.js";
 export { createLoaders } from "./vitessce-grid-utils.js";
+export { createOnDrop } from "./on-drop.js";
 export { useReady, useUrls, useVitessceContainer, useDeckCanvasSize, useUint8ObsFeatureMatrix, useUint8FeatureSelection, useExpressionValueGetter, useGetObsMembership, useGetObsInfo, useClosestVitessceContainerSize, useWindowDimensions, useGridItemSize, useExpandedFeatureLabelsMap, useColumnNameMapping } from "./hooks.js";
 export { useCoordinationScopes, useCoordinationScopesBy, useInitialCoordination, useCoordination, useComplexCoordination, useComplexCoordinationSecondary, useMultiCoordinationScopes, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondary, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationValues, useMultiDatasetCoordination, useDatasetUids, useLoaders, useMergeCoordination, useMatchingLoader, useViewConfigStore, useViewConfigStoreApi, useViewConfig, useSetViewConfig, useComponentHover, useSetComponentHover, useComponentViewInfo, useSetComponentViewInfo, useWarning, useSetWarning, useAuxiliaryCoordination, useComponentLayout, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes } from "./state/hooks.js";
 export { useDescription, useImageData, useObsSetsData, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useSampleSetsData, useSampleEdgesData, useMultiObsLabels, useMultiObsSpots, useMultiObsPoints, useSpotMultiObsSets, useSpotMultiFeatureLabels, useMultiObsSegmentations, useMultiImages, useObsSpotsData, useObsPointsData, useObsLocationsData, useObsSegmentationsData, useNeighborhoodsData, useObsLabelsData, useObsFeatureMatrixData, useFeatureLabelsData, useGenomicProfilesData, useComparisonMetadata, useFeatureStatsData, useFeatureSetStatsData, useObsSetStatsData } from "./data-hooks.js";

package/dist-tsc/index.js

@@ -12,3 +12,4 @@ export { CellColorEncodingOption, OptionsContainer, OptionSelect, usePlotOptions
 export { logConfig } from './view-config-utils.js';
 export { useAsyncFunction, usePageModeView } from './contexts.js';
 export { createLoaders } from './vitessce-grid-utils.js';
+export { createOnDrop } from './on-drop.js';

package/dist-tsc/on-drop.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Create an event handler for either dropzone or input type="file" elements.
+ * @param {object} setters - The parameters for the drop event handler.
+ * @param {function} setters.setViewConfig - A function to set the view config.
+ * @param {function} setters.setStores - A function to set the stores.
+ * @param {boolean} isFileInput - Whether the drop zone is for file input.
+ * By default, false.
+ * @param {boolean} isConfigInput - Whether the drop zone is for config input.
+ * By default, false.
+ * @returns A drop event handler async function.
+ */
+export function createOnDrop(setters: {
+    setViewConfig: Function;
+    setStores: Function;
+}, isFileInput?: boolean, isConfigInput?: boolean): (e: any) => Promise<void>;
+//# sourceMappingURL=on-drop.d.ts.map

package/dist-tsc/on-drop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-drop.d.ts","sourceRoot":"","sources":["../src/on-drop.js"],"names":[],"mappings":"AAoEA;;;;;;;;;;GAUG;AACH,sCARG;IAA0B,aAAa;IACb,SAAS;CACnC,gBAAQ,OAAO,kBAEP,OAAO,6BAyHjB"}

package/dist-tsc/on-drop.js

@@ -0,0 +1,180 @@
+import { getFilesFromDataTransferItems } from '@placemarkio/flat-drop-files';
+import { generateConfigAlt as generateConfig, parseUrlsFromString } from '@vitessce/config';
+// Stores
+// This "flat" store can be slow to initialize when the Zarr store contains many files.
+class FlatFileSystemStore {
+    constructor(files) {
+        this.files = files;
+    }
+    async get(key) {
+        // The list of files does not prefix its paths with slashes.
+        const file = this.files.find(f => `/${f.relpath}` === key);
+        if (!file)
+            return undefined;
+        const buffer = await file.arrayBuffer();
+        return new Uint8Array(buffer);
+    }
+}
+/*
+// Get a file handle to a file in a directory.
+async function resolveFileHandleForPath(
+  root, // A root directory from the Web File System API.
+  path, // A key to a file in the root directory.
+) {
+  const dirs = path.split('/');
+  const fname = dirs.pop();
+  if (!fname) {
+    throw new Error('Invalid path');
+  }
+  for (const dir of dirs) {
+    root = await root.getDirectoryHandle(dir);
+  }
+  // Returns a file handle to the file.
+  return root.getFileHandle(fname);
+}
+
+// TODO: use this hierarchical store to avoid the issues with flattening the file tree up-front,
+// as this store only traverses/accesses the parts of the tree that are needed.
+class HierarchicalFileSystemStore {
+  constructor(root) {
+    // root is a FileSystemDirectoryHandle
+    this.root = root;
+  }
+
+  async get(key) {
+    // TODO: better error handling
+    // I believe a missing file will trigger an error here, which we should explicitly
+    // catch and return `undefined`
+    const fh = await resolveFileHandleForPath(this.root, key.slice(1)).catch(
+      () => undefined,
+    );
+    if (!fh) {
+      return undefined;
+    }
+
+    const file = await fh.getFile();
+    return file.arrayBuffer();
+  }
+
+  // TODO: implement getRange
+}
+*/
+/**
+ * Create an event handler for either dropzone or input type="file" elements.
+ * @param {object} setters - The parameters for the drop event handler.
+ * @param {function} setters.setViewConfig - A function to set the view config.
+ * @param {function} setters.setStores - A function to set the stores.
+ * @param {boolean} isFileInput - Whether the drop zone is for file input.
+ * By default, false.
+ * @param {boolean} isConfigInput - Whether the drop zone is for config input.
+ * By default, false.
+ * @returns A drop event handler async function.
+ */
+export function createOnDrop(setters, isFileInput = false, isConfigInput = false) {
+    return async (e) => {
+        const { setViewConfig, setStores } = setters;
+        let topLevelEntries;
+        let files;
+        if (isFileInput) {
+            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+            // Note: e.target.files is a FileList, not an array.
+            // If we use the spread operator, the methods like file.arrayBuffer() get lost.
+            files = Array.from(e.target.files);
+            // Here, we use files.forEach rather than files = files.map
+            // so that we can modify the original array in place.
+            files.forEach((f, i) => {
+                if (!f.path) {
+                    // eslint-disable-next-line no-param-reassign
+                    files[i].path = files[i].webkitRelativePath;
+                }
+            });
+            // When a user selects a directory via a file picker dialog,
+            // we get only a flat list of files.
+            // In order to match e.dataTransfer.items behavior,
+            // we create fake top-level entries for each unique directory/file name.
+            const dirNames = new Set();
+            topLevelEntries = [];
+            Array.from(files).forEach((file) => {
+                const dirName = file.path.split('/')[0];
+                if (dirName) {
+                    dirNames.add(dirName);
+                }
+                // If the file is at the top level (no directory),
+                // we need to add a top-level entry for it.
+                if (dirName === file.name) {
+                    topLevelEntries.push({
+                        isDirectory: false,
+                        name: file.name,
+                    });
+                }
+            });
+            topLevelEntries = topLevelEntries.concat(Array.from(dirNames).map(name => ({
+                isDirectory: true,
+                name,
+            })));
+        }
+        else {
+            topLevelEntries = Object.values(e.dataTransfer.items)
+                .map(item => item.webkitGetAsEntry());
+            files = await getFilesFromDataTransferItems(e.dataTransfer.items);
+        }
+        if (isConfigInput) {
+            // We expect a single file which contains the config JSON.
+            if (files.length === 1) {
+                const file = files[0];
+                if (file.name.endsWith('.json')) {
+                    const content = await file.arrayBuffer();
+                    // Alternatively, use the FileReader API.
+                    const json = JSON.parse(new TextDecoder().decode(content));
+                    setViewConfig(json);
+                    return;
+                }
+            }
+        }
+        // TODO: implement an alternative approach that does not first flatten the file tree,
+        // since it can be very large.
+        // See https://github.com/manzt/zarrita.js/pull/161/files
+        const stores = topLevelEntries.map((entry) => {
+            if (entry.isDirectory) {
+                // TODO: optimize by using a single loop for filter+map,
+                // and by using .substring (rather than split+slice+join).
+                const dirFiles = files
+                    .filter(f => f.path.split('/')?.[0] === entry.name)
+                    .map((f) => {
+                    // eslint-disable-next-line no-param-reassign
+                    f.relpath = f.path.split('/')?.slice(1).join('/');
+                    return f;
+                });
+                // Create a store for each top-level item of e.dataTransfer.items.
+                const store = new FlatFileSystemStore(dirFiles);
+                return [entry.name, store];
+            }
+            // This is a single file. Check extension to determine how to create a store.
+            if (entry.name.endsWith('.zip')) {
+                // Create a zip store.
+                // TODO
+            }
+            else if (entry.name.endsWith('.tif') || entry.name.endsWith('.tiff')) {
+                // Create an OME-TIFF-as-NGFF store?
+                // TODO
+            }
+            else if (entry.name.endsWith('.csv')) {
+                // Create a CSV store?
+                // TODO
+            }
+            else {
+                // Throw?
+                // TODO
+            }
+            return [entry.name, null];
+        });
+        const parsedUrls = stores.map(([name, store]) => ({
+            ...parseUrlsFromString(name)[0],
+            store,
+        }));
+        const { config, stores: storesForConfig } = await generateConfig(parsedUrls);
+        const newConfig = config.toJSON();
+        setViewConfig(newConfig);
+        setStores(storesForConfig);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -28,16 +28,18 @@
     "zustand": "^5.0.4",
     "react-aria": "^3.28.0",
     "react-error-boundary": "^5.0.0",
-    "@vitessce/styles": "3.8.4",
-    "@vitessce/abstract": "3.8.4",
-    "@vitessce/error": "3.8.4",
-    "@vitessce/constants-internal": "3.8.4",
-    "@vitessce/plugins": "3.8.4",
-    "@vitessce/schemas": "3.8.4",
-    "@vitessce/utils": "3.8.4",
-    "@vitessce/sets-utils": "3.8.4",
-    "@vitessce/config": "3.8.4",
-    "@vitessce/globals": "3.8.4"
+    "@placemarkio/flat-drop-files": "^1.0.2",
+    "zarrita": "0.5.4",
+    "@vitessce/styles": "3.8.6",
+    "@vitessce/abstract": "3.8.6",
+    "@vitessce/error": "3.8.6",
+    "@vitessce/constants-internal": "3.8.6",
+    "@vitessce/plugins": "3.8.6",
+    "@vitessce/schemas": "3.8.6",
+    "@vitessce/sets-utils": "3.8.6",
+    "@vitessce/utils": "3.8.6",
+    "@vitessce/config": "3.8.6",
+    "@vitessce/globals": "3.8.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -46,7 +48,7 @@
     "react-dom": "18.3.1",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "3.8.4"
+    "@vitessce/types": "3.8.6"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/Sidebar.js

@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import {
+  makeStyles,
+  IconButton,
+  Code as CodeIcon,
+  InvertColors as InvertColorsIcon,
+} from '@vitessce/styles';
+
+const useStyles = makeStyles()(() => ({
+  sidebarContainer: {
+    backgroundColor: 'silver',
+    width: '30px',
+    height: '100%',
+  },
+  sidebarUl: {
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+  },
+  sidebarLi: {
+
+  },
+  sidebarIconButton: {
+    padding: '3px',
+  },
+  sidebarIcon: {
+    color: 'black',
+    width: '24px',
+    height: '24px',
+  },
+}));
+
+export function Sidebar(props) {
+  const {
+    theme,
+    setTheme,
+    configEditable,
+    themeEditable,
+  } = props;
+  const { classes } = useStyles();
+
+  const onToggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light2' : 'dark');
+  }, [theme]);
+
+  return (
+    <div className={classes.sidebarContainer}>
+      <ul className={classes.sidebarUl}>
+        {themeEditable ? (
+          <li className={classes.sidebarLi}>
+            <IconButton
+              alt="Change theme"
+              onClick={onToggleTheme}
+              aria-label="Change theme"
+              className={classes.sidebarIconButton}
+            >
+              <InvertColorsIcon
+                className={classes.sidebarIcon}
+              />
+            </IconButton>
+          </li>
+        ) : null}
+        {configEditable ? (
+          <li className={classes.sidebarLi}>
+            <IconButton
+              alt="Edit configuration"
+              onClick={() => {}}
+              aria-label="Edit configuration"
+              className={classes.sidebarIconButton}
+            >
+              <CodeIcon
+                className={classes.sidebarIcon}
+              />
+            </IconButton>
+          </li>
+        ) : null}
+      </ul>
+    </div>
+  );
+}

package/src/VitS.js

@@ -102,6 +102,15 @@ export function VitS(props) {
     logLevel = DEFAULT_LOG_LEVEL,
   } = props;
 
+  /*
+  const prefersDark = (
+    window.matchMedia
+    && window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+  const defaultTheme = prefersDark ? 'dark' : 'light';
+  const [theme, setTheme] = useState(themeProp ?? defaultTheme);
+  */
+
   // eslint-disable-next-line no-unused-vars
   const [debugErrors, setDebugErrors] = useState([]);
   const viewTypes = useMemo(() => (viewTypesProp || []), [viewTypesProp]);

package/src/VitessceGrid.js

@@ -62,7 +62,7 @@ export default function VitessceGrid(props) {
   const [rowHeight, containerRef] = useRowHeight(config, initialRowHeight, height, margin, padding);
   const onResize = useEmitGridResize();
 
-  const [componentWidth] = useClosestVitessceContainerSize(containerRef);
+  const [componentWidth] = useClosestVitessceContainerSize(containerRef, 0);
 
   const { classes } = useVitessceContainerStyles();
   const { classes: titleClasses } = useTitleStyles();

package/src/hooks.js

@@ -170,7 +170,7 @@ export function useUrls(urls) {
  * @returns {array} `[width, height]` where width and height
  * are numbers.
  */
-export function useClosestVitessceContainerSize(ref) {
+export function useClosestVitessceContainerSize(ref, sidebarWidth) {
   const [height, setHeight] = useState();
   const [width, setWidth] = useState();
 
@@ -180,7 +180,7 @@ export function useClosestVitessceContainerSize(ref) {
         const {
           clientHeight: componentHeight, clientWidth: componentWidth,
         } = ref.current.closest(`.${VITESSCE_CONTAINER}`);
-        setWidth(componentWidth);
+        setWidth(componentWidth - sidebarWidth);
         setHeight(componentHeight);
       }
     }

package/src/index.js

@@ -105,3 +105,4 @@ export {
 export { logConfig } from './view-config-utils.js';
 export { useAsyncFunction, usePageModeView } from './contexts.js';
 export { createLoaders } from './vitessce-grid-utils.js';
+export { createOnDrop } from './on-drop.js';