@vitessce/vit-s 3.4.10 → 3.4.11

package/dist/index.js

@@ -28247,10 +28247,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.4.10";
-const date = "2024-09-01";
+const version = "3.4.11";
+const date = "2024-09-27";
 const branch = "changeset-release/main";
-const hash = "26b1c2d6";
+const hash = "efd7d698";
 const META_VERSION = {
   note,
   version,
@@ -38180,6 +38180,9 @@ const CloseIcon = createSvgIcon(/* @__PURE__ */ React$6.createElement("path", {
 const CloudDownloadIcon = createSvgIcon(/* @__PURE__ */ React$6.createElement("path", {
   d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
 }), "CloudDownload");
+const HelpIcon = createSvgIcon(/* @__PURE__ */ React$6.createElement("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+}), "Help");
 const SettingsIcon = createSvgIcon(/* @__PURE__ */ React$6.createElement("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
 }), "Settings");
@@ -38305,6 +38308,18 @@ const useStyles$1 = makeStyles((theme) => ({
   },
   downloadLink: {
     color: theme.palette.primaryForeground
+  },
+  helpTextSpan: {
+    maxWidth: "400px",
+    padding: "5px 10px",
+    display: "inline-block",
+    textAlign: "justify",
+    fontSize: "14px",
+    backgroundColor: theme.palette.gridLayoutBackground,
+    color: theme.palette.tooltipText,
+    borderRadius: "8px",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)",
+    border: "10px solid grey"
   }
 }));
 function SettingsIconWithArrow({ open }) {
@@ -38358,6 +38373,24 @@ function DownloadOptions(props) {
     }
   ) : null;
 }
+function HelpButton(props) {
+  const { helpText } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useStyles$1();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    PopperMenu,
+    {
+      open,
+      setOpen,
+      buttonIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(HelpIcon, {}),
+      buttonClassName: classes.iconButton,
+      placement: "bottom-end",
+      "aria-label": "Open help info",
+      withPaper: false,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.helpTextSpan, children: helpText })
+    }
+  );
+}
 function ClosePaneButton(props) {
   const { removeGridComponent } = props;
   const classes = useStyles$1();
@@ -38385,7 +38418,8 @@ function TitleInfo(props) {
     isReady,
     options,
     closeButtonVisible = true,
-    downloadButtonVisible = true
+    downloadButtonVisible = true,
+    helpText
   } = props;
   const classes = useTitleStyles();
   return (
@@ -38407,6 +38441,12 @@ function TitleInfo(props) {
               urls
             }
           ) : null,
+          helpText ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            HelpButton,
+            {
+              helpText
+            }
+          ) : null,
           closeButtonVisible && removeGridComponent ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ClosePaneButton,
             {
@@ -38430,7 +38470,7 @@ function TitleInfo(props) {
           "aria-busy": !isReady,
           role: "main",
           children: [
-            !isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIndicator, {}),
+            !isReady ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIndicator, {}) : null,
             children2
           ]
         }

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

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

package/dist-tsc/TitleInfo.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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';
+import { CloudDownload as CloudDownloadIcon, ArrowDropDown as ArrowDropDownIcon, ArrowDropUp as ArrowDropUpIcon, Settings as SettingsIcon, Close as CloseIcon, Help as HelpIcon, } from '@material-ui/icons';
 import { TOOLTIP_ANCESTOR } from './classNames.js';
 import LoadingIndicator from './LoadingIndicator.js';
 import { PopperMenu } from './shared-mui/components.js';
@@ -35,6 +35,18 @@ const useStyles = makeStyles(theme => ({
     downloadLink: {
         color: theme.palette.primaryForeground,
     },
+    helpTextSpan: {
+        maxWidth: '400px',
+        padding: '5px 10px',
+        display: 'inline-block',
+        textAlign: 'justify',
+        fontSize: '14px',
+        backgroundColor: theme.palette.gridLayoutBackground,
+        color: theme.palette.tooltipText,
+        borderRadius: '8px',
+        boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+        border: '10px solid grey',
+    },
 }));
 function SettingsIconWithArrow({ open }) {
     return (_jsxs(_Fragment, { children: [_jsx(SettingsIcon, {}), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }));
@@ -56,21 +68,27 @@ function DownloadOptions(props) {
     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 HelpButton(props) {
+    const { helpText } = props;
+    const [open, setOpen] = useState(false);
+    const classes = useStyles();
+    return (_jsx(PopperMenu, { open: open, setOpen: setOpen, buttonIcon: _jsx(HelpIcon, {}), buttonClassName: classes.iconButton, placement: "bottom-end", "aria-label": "Open help info", withPaper: false, children: _jsx("span", { className: classes.helpTextSpan, children: helpText }) }));
+}
 function ClosePaneButton(props) {
     const { removeGridComponent } = props;
     const classes = useStyles();
     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, closeButtonVisible = true, downloadButtonVisible = true, } = props;
+    const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, helpText, } = 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 }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _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, helpText ? (_jsx(HelpButton, { helpText: helpText })) : null, closeButtonVisible && removeGridComponent ? (_jsx(ClosePaneButton, { removeGridComponent: removeGridComponent })) : null] })] }), _jsxs("div", { className: clsx(TOOLTIP_ANCESTOR, classes.card, {
                     [classes.scrollCard]: isScroll,
                     [classes.spatialCard]: isSpatial,
                     [classes.noScrollCard]: !isScroll && !isSpatial,
-                }), "aria-busy": !isReady, role: "main", children: [!isReady && _jsx(LoadingIndicator, {}), children] })] })
+                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] })] })
     // "pl-2" only matters when the window is very narrow.
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -29,12 +29,12 @@
     "uuid": "^9.0.0",
     "zustand": "^3.5.10",
     "react-aria": "^3.28.0",
-    "@vitessce/constants-internal": "3.4.10",
-    "@vitessce/plugins": "3.4.10",
-    "@vitessce/schemas": "3.4.10",
-    "@vitessce/utils": "3.4.10",
-    "@vitessce/sets-utils": "3.4.10",
-    "@vitessce/config": "3.4.10"
+    "@vitessce/constants-internal": "3.4.11",
+    "@vitessce/plugins": "3.4.11",
+    "@vitessce/schemas": "3.4.11",
+    "@vitessce/utils": "3.4.11",
+    "@vitessce/sets-utils": "3.4.11",
+    "@vitessce/config": "3.4.11"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
@@ -42,7 +42,7 @@
     "react": "^18.0.0",
     "vite": "^4.3.0",
     "vitest": "^0.32.2",
-    "@vitessce/types": "3.4.10"
+    "@vitessce/types": "3.4.11"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

package/src/TitleInfo.js

@@ -7,6 +7,7 @@ import {
   ArrowDropUp as ArrowDropUpIcon,
   Settings as SettingsIcon,
   Close as CloseIcon,
+  Help as HelpIcon,
 } from '@material-ui/icons';
 
 import { TOOLTIP_ANCESTOR } from './classNames.js';
@@ -42,6 +43,18 @@ const useStyles = makeStyles(theme => ({
   downloadLink: {
     color: theme.palette.primaryForeground,
   },
+  helpTextSpan: {
+    maxWidth: '400px',
+    padding: '5px 10px',
+    display: 'inline-block',
+    textAlign: 'justify',
+    fontSize: '14px',
+    backgroundColor: theme.palette.gridLayoutBackground,
+    color: theme.palette.tooltipText,
+    borderRadius: '8px',
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+    border: '10px solid grey',
+  },
 }));
 
 function SettingsIconWithArrow({ open }) {
@@ -107,6 +120,26 @@ function DownloadOptions(props) {
   ) : null);
 }
 
+function HelpButton(props) {
+  const { helpText } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+  return (
+    <PopperMenu
+      open={open}
+      setOpen={setOpen}
+      buttonIcon={<HelpIcon />}
+      buttonClassName={classes.iconButton}
+      placement="bottom-end"
+      aria-label="Open help info"
+      withPaper={false}
+    >
+      <span className={classes.helpTextSpan}>{helpText}</span>
+    </PopperMenu>
+  );
+}
+
+
 function ClosePaneButton(props) {
   const { removeGridComponent } = props;
   const classes = useStyles();
@@ -127,6 +160,7 @@ export function TitleInfo(props) {
   const {
     title, info, children, isScroll, isSpatial, removeGridComponent, urls,
     isReady, options, closeButtonVisible = true, downloadButtonVisible = true,
+    helpText,
   } = props;
 
   const classes = useTitleStyles();
@@ -150,6 +184,11 @@ export function TitleInfo(props) {
               urls={urls}
             />
           ) : null}
+          {helpText ? (
+            <HelpButton
+              helpText={helpText}
+            />
+          ) : null}
           {closeButtonVisible && removeGridComponent ? (
             <ClosePaneButton
               removeGridComponent={removeGridComponent}
@@ -170,7 +209,7 @@ export function TitleInfo(props) {
         aria-busy={!isReady}
         role="main"
       >
-        { !isReady && <LoadingIndicator /> }
+        { !isReady ? <LoadingIndicator /> : null }
         {children}
       </div>
     </>