@vitessce/vit-s 3.3.1 → 3.3.2

package/dist/index.js

@@ -35394,10 +35394,10 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
   CoordinationType$1.EMBEDDING_OBS_OPACITY
 ];
 const note = "This file is autogenerated by .changeset/post-changelog.mjs.";
-const version = "3.3.1";
-const date = "2023-11-08";
+const version = "3.3.2";
+const date = "2023-11-30";
 const branch = "changeset-release/main";
-const hash = "8e897a20";
+const hash = "a562d787";
 const META_VERSION = {
   note,
   version,
@@ -44453,12 +44453,13 @@ function PlotOptions(props) {
   const { options } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles$1();
+  const buttonIcon = useMemo(() => /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIconWithArrow, { open }), [open]);
   return options ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     PopperMenu,
     {
       open,
       setOpen,
-      buttonIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIconWithArrow, { open }),
+      buttonIcon,
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
       "aria-label": "Open plot options menu",
@@ -44476,16 +44477,17 @@ function DownloadOptions(props) {
   const { urls } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles$1();
+  const buttonIcon = useMemo(() => /* @__PURE__ */ jsxRuntimeExports.jsx(CloudDownloadIconWithArrow, { open }), [open]);
   return urls && urls.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     PopperMenu,
     {
       open,
       setOpen,
-      buttonIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(CloudDownloadIconWithArrow, { open }),
+      buttonIcon,
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
       "aria-label": "Open download options menu",
-      children: urls.map(({ url, name }) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem$1, { dense: true, getArialLabel: () => `Click to download ${name}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Link$1, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: [
+      children: urls.map(({ url, name }) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem$1, { dense: true, "aria-label": `Click to download ${name}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Link$1, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: [
         "Download ",
         name
       ] }) }, `${url}_${name}`))
@@ -44517,7 +44519,9 @@ function TitleInfo(props) {
     removeGridComponent,
     urls,
     isReady,
-    options
+    options,
+    closeButtonVisible = true,
+    downloadButtonVisible = true
   } = props;
   const classes = useTitleStyles();
   return (
@@ -44533,18 +44537,18 @@ function TitleInfo(props) {
               options
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+          downloadButtonVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             DownloadOptions,
             {
               urls
             }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ) : null,
+          closeButtonVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ClosePaneButton,
             {
               removeGridComponent
             }
-          )
+          ) : null
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(

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

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AA0HA,mDAiDC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AA6HA,mDAqDC"}

package/dist-tsc/TitleInfo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
 import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
 import { CloudDownload as CloudDownloadIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Settings as SettingsIcon, Close as CloseIcon, } from '@material-ui/icons';
@@ -43,7 +43,8 @@ function PlotOptions(props) {
     const { options } = props;
     const [open, setOpen] = useState(false);
     const classes = useStyles();
-    return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(SettingsIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open plot options menu", children: options })) : null);
+    const buttonIcon = useMemo(() => (_jsx(SettingsIconWithArrow, { open: open })), [open]);
+    return (options ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: buttonIcon, buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open plot options menu", children: options })) : null);
 }
 function CloudDownloadIconWithArrow({ open }) {
     return (_jsxs(_Fragment, { children: [_jsx(CloudDownloadIcon, {}), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }));
@@ -52,7 +53,8 @@ function DownloadOptions(props) {
     const { urls } = props;
     const [open, setOpen] = useState(false);
     const classes = useStyles();
-    return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(CloudDownloadIconWithArrow, { open: open }), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open download options menu", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, getArialLabel: () => `Click to download ${name}`, children: _jsxs(Link, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
+    const buttonIcon = useMemo(() => (_jsx(CloudDownloadIconWithArrow, { open: open })), [open]);
+    return (urls && urls.length ? (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: buttonIcon, buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open download options menu", children: urls.map(({ url, name }) => (_jsx(MenuItem, { dense: true, "aria-label": `Click to download ${name}`, children: _jsxs(Link, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink, children: ["Download ", name] }) }, `${url}_${name}`))) })) : null);
 }
 function ClosePaneButton(props) {
     const { removeGridComponent } = props;
@@ -60,11 +62,11 @@ function ClosePaneButton(props) {
     return (_jsx(IconButton, { onClick: removeGridComponent, size: "small", className: classes.iconButton, title: "close", "aria-label": "Close panel button", children: _jsx(CloseIcon, {}) }));
 }
 export function TitleInfo(props) {
-    const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, } = props;
+    const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, } = props;
     const classes = useTitleStyles();
     return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), _jsx(DownloadOptions, { urls: urls }), _jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.title, role: "banner", children: [_jsx("div", { className: classes.titleLeft, role: "heading", "aria-level": "1", children: title }), _jsx("div", { className: classes.titleInfo, title: info, role: "note", children: info }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, closeButtonVisible ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,10 +29,10 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.3.1",
-    "@vitessce/plugins": "3.3.1",
-    "@vitessce/schemas": "3.3.1",
-    "@vitessce/utils": "3.3.1"
+    "@vitessce/constants-internal": "3.3.2",
+    "@vitessce/plugins": "3.3.2",
+    "@vitessce/schemas": "3.3.2",
+    "@vitessce/utils": "3.3.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/TitleInfo.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import clsx from 'clsx';
 import { makeStyles, MenuItem, IconButton, Link } from '@material-ui/core';
 import {
@@ -57,11 +57,13 @@ function PlotOptions(props) {
   const { options } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles();
+
+  const buttonIcon = useMemo(() => (<SettingsIconWithArrow open={open} />), [open]);
   return (options ? (
     <PopperMenu
       open={open}
       setOpen={setOpen}
-      buttonIcon={<SettingsIconWithArrow open={open} />}
+      buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
       aria-label="Open plot options menu"
@@ -84,17 +86,18 @@ function DownloadOptions(props) {
   const { urls } = props;
   const [open, setOpen] = useState(false);
   const classes = useStyles();
+  const buttonIcon = useMemo(() => (<CloudDownloadIconWithArrow open={open} />), [open]);
   return (urls && urls.length ? (
     <PopperMenu
       open={open}
       setOpen={setOpen}
-      buttonIcon={<CloudDownloadIconWithArrow open={open} />}
+      buttonIcon={buttonIcon}
       buttonClassName={classes.iconButton}
       placement="bottom-end"
       aria-label="Open download options menu"
     >
       {urls.map(({ url, name }) => (
-        <MenuItem dense key={`${url}_${name}`} getArialLabel={() => `Click to download ${name}`}>
+        <MenuItem dense key={`${url}_${name}`} aria-label={`Click to download ${name}`}>
           <Link underline="always" href={url} target="_blank" rel="noopener" className={classes.downloadLink}>
             Download {name}
           </Link>
@@ -123,7 +126,7 @@ function ClosePaneButton(props) {
 export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,
-    isReady, options,
+    isReady, options, closeButtonVisible = true, downloadButtonVisible = true,
   } = props;
 
   const classes = useTitleStyles();
@@ -142,12 +145,16 @@ export function TitleInfo(props) {
           <PlotOptions
             options={options}
           />
-          <DownloadOptions
-            urls={urls}
-          />
-          <ClosePaneButton
-            removeGridComponent={removeGridComponent}
-          />
+          {downloadButtonVisible ? (
+            <DownloadOptions
+              urls={urls}
+            />
+          ) : null}
+          {closeButtonVisible ? (
+            <ClosePaneButton
+              removeGridComponent={removeGridComponent}
+            />
+          ) : null}
         </div>
       </div>
       <div