@vitessce/vit-s 3.9.1 → 3.9.3

package/dist-tsc/DebugWindow.d.ts

@@ -1,4 +1,4 @@
 export function DebugWindow({ debugErrors }: {
     debugErrors: any;
-}): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=DebugWindow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;8EA8BC"}
+{"version":3,"file":"DebugWindow.d.ts","sourceRoot":"","sources":["../src/DebugWindow.js"],"names":[],"mappings":"AAIA;;gCA8BC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAoEC"}
+{"version":3,"file":"TitleInfo.d.ts","sourceRoot":"","sources":["../src/TitleInfo.js"],"names":[],"mappings":"AAmNA,mDAwEC"}

package/dist-tsc/TitleInfo.js

@@ -102,15 +102,17 @@ export function TitleInfo(props) {
     const { title, info, children, isScroll, isSpatial, removeGridComponent, urls, isReady, options, closeButtonVisible = true, downloadButtonVisible = true, helpText, withPadding = true, errors: errorsProp, } = props;
     const errors = errorsProp?.filter(Boolean);
     const { classes } = useTitleStyles();
+    const hasInfoText = Boolean(info);
     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, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : null, helpText ? (_jsx(HelpButton, { helpText: helpText })) : 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 }), _jsxs("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls", children: [_jsx(PlotOptions, { options: options }), downloadButtonVisible ? (_jsx(DownloadOptions, { urls: urls })) : null, Array.isArray(errors) && errors.length > 0 ? (_jsx(ErrorInfo, { errors: errors })) : 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,
                     [classes.noPaddingCard]: !withPadding,
                     [classes.paddingCard]: withPadding,
-                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] })] })
+                    [classes.cardWithoutInfoText]: !hasInfoText,
+                }), "aria-busy": !isReady, role: "main", children: [!isReady ? _jsx(LoadingIndicator, {}) : null, children] }), hasInfoText ? (_jsx("div", { className: classes.infoText, title: info, role: "note", children: info })) : null] })
     // "pl-2" only matters when the window is very narrow.
     );
 }

package/dist-tsc/Warning.d.ts

@@ -1,2 +1,2 @@
-export function Warning(props: any): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
+export function Warning(props: any): import("react").JSX.Element;
 //# sourceMappingURL=Warning.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,+GAoBC"}
+{"version":3,"file":"Warning.d.ts","sourceRoot":"","sources":["../src/Warning.js"],"names":[],"mappings":"AAIA,iEAoBC"}

package/dist-tsc/shared-mui/container.js

@@ -96,7 +96,7 @@ const gridLayoutStyles = {
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
         bottom: '0',
-        right: '0',
+        right: '10px',
         cursor: 'se-resize',
     },
     '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/dist-tsc/shared-mui/styles.js

@@ -75,6 +75,7 @@ const lightPalette = {
     gridLayoutBackground: '#FFFFFF',
     paperBackground: '#FFFFFF',
     cardBorder: 'rgba(241, 241, 241, 0.125)',
+    cardInfoBorder: '#ccc',
     tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 export const muiTheme = {
@@ -100,6 +101,7 @@ export const muiTheme = {
             gridLayoutBackground: '#333333',
             paperBackground: '#2b2b2b',
             cardBorder: 'rgba(0, 0, 0, 0.125)',
+            cardInfoBorder: '#222222',
             tooltipText: '#FFFFFF',
             ...globalColors,
         },
@@ -109,6 +111,7 @@ export const muiTheme = {
     light: createTheme({
         palette: {
             ...lightPalette,
+            cardInfoBorder: '#F1F1F1',
             ...globalColors,
         },
         ...sharedThemeOptions,
@@ -126,6 +129,6 @@ export const muiTheme = {
             ...globalColors,
         },
         ...sharedThemeOptions,
-        cardBorderSize: '2px',
+        cardBorderSize: '1px',
     }),
 };

package/dist-tsc/title-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyB0B,CAAC;;;kBAMR,eACC;gBAEd,WAAK;eACP,WAEJ;EAuCI"}
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cAyBO,CAAC;;;kBAE+B,eACvC;gBAAyB,WAAU;eAAsB,WACpD;EAyDD"}

package/dist-tsc/title-styles.js

@@ -13,18 +13,23 @@ export const useTitleStyles = makeStyles()(theme => ({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
     },
-    titleInfo: {
+    infoText: {
+        color: theme.palette.primaryForeground,
         width: '100%',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
-        fontSize: '80% !important',
+        fontSize: '60% !important',
         opacity: '.8',
-        padding: '0 4px',
+        padding: '0',
         justifyContent: 'center',
-        lineHeight: '25px !important',
-        flexShrink: '1',
-        textAlign: 'right !important',
+        textAlign: 'center !important',
+        borderTop: '0px',
+        borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     titleButtons: {
         display: 'flex',
@@ -40,15 +45,20 @@ export const useTitleStyles = makeStyles()(theme => ({
         border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
         flex: '1 1 auto',
         minHeight: '1px',
-        marginTop: '8px',
-        marginBottom: '8px',
+        marginTop: '0',
+        marginBottom: '0',
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
         minWidth: '0',
         wordWrap: 'break-word',
         backgroundClip: 'border-box',
-        borderRadius: '4px',
+        borderTopLeftRadius: '4px',
+        borderTopRightRadius: '4px',
+    },
+    cardWithoutInfoText: {
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
     },
     paddingCard: {
         padding: '12px',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.9.1",
+  "version": "3.9.3",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5.80.2",
-    "@zarrita/storage": "0.1.3",
+    "@zarrita/storage": "0.1.4",
     "clsx": "^1.1.1",
     "d3-array": "^2.4.0",
     "fast-deep-equal": "^3.1.3",
@@ -30,18 +30,18 @@
     "react-aria": "^3.28.0",
     "react-error-boundary": "^5.0.0",
     "@placemarkio/flat-drop-files": "^1.0.2",
-    "zarrita": "0.5.4",
-    "@vitessce/styles": "3.9.1",
-    "@vitessce/error": "3.9.1",
-    "@vitessce/abstract": "3.9.1",
-    "@vitessce/constants-internal": "3.9.1",
-    "@vitessce/plugins": "3.9.1",
-    "@vitessce/utils": "3.9.1",
-    "@vitessce/sets-utils": "3.9.1",
-    "@vitessce/schemas": "3.9.1",
-    "@vitessce/config": "3.9.1",
-    "@vitessce/zarr-utils": "3.9.1",
-    "@vitessce/globals": "3.9.1"
+    "zarrita": "0.6.1",
+    "@vitessce/styles": "3.9.3",
+    "@vitessce/abstract": "3.9.3",
+    "@vitessce/plugins": "3.9.3",
+    "@vitessce/error": "3.9.3",
+    "@vitessce/constants-internal": "3.9.3",
+    "@vitessce/schemas": "3.9.3",
+    "@vitessce/utils": "3.9.3",
+    "@vitessce/zarr-utils": "3.9.3",
+    "@vitessce/config": "3.9.3",
+    "@vitessce/globals": "3.9.3",
+    "@vitessce/sets-utils": "3.9.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -50,7 +50,7 @@
     "react-dom": "18.3.1",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "3.9.1"
+    "@vitessce/types": "3.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/TitleInfo.js

@@ -219,6 +219,7 @@ export function TitleInfo(props) {
   const errors = errorsProp?.filter(Boolean);
 
   const { classes } = useTitleStyles();
+  const hasInfoText = Boolean(info);
 
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
@@ -227,9 +228,6 @@ export function TitleInfo(props) {
         <div className={classes.titleLeft} role="heading" aria-level="1">
           {title}
         </div>
-        <div className={classes.titleInfo} title={info} role="note">
-          {info}
-        </div>
         <div className={classes.titleButtons} role="toolbar" aria-label="Plot options and controls">
           <PlotOptions
             options={options}
@@ -266,6 +264,7 @@ export function TitleInfo(props) {
             [classes.noScrollCard]: !isScroll && !isSpatial,
             [classes.noPaddingCard]: !withPadding,
             [classes.paddingCard]: withPadding,
+            [classes.cardWithoutInfoText]: !hasInfoText,
           },
         )}
         aria-busy={!isReady}
@@ -274,6 +273,11 @@ export function TitleInfo(props) {
         { !isReady ? <LoadingIndicator /> : null }
         {children}
       </div>
+      {hasInfoText ? (
+        <div className={classes.infoText} title={info} role="note">
+          {info}
+        </div>
+      ) : null}
     </>
     // "pl-2" only matters when the window is very narrow.
   );

package/src/shared-mui/container.js

@@ -97,7 +97,7 @@ const gridLayoutStyles = {
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
     bottom: '0',
-    right: '0',
+    right: '10px',
     cursor: 'se-resize',
   },
   '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {

package/src/shared-mui/styles.js

@@ -78,6 +78,7 @@ const lightPalette = {
   gridLayoutBackground: '#FFFFFF',
   paperBackground: '#FFFFFF',
   cardBorder: 'rgba(241, 241, 241, 0.125)',
+  cardInfoBorder: '#ccc',
   tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 
@@ -104,6 +105,7 @@ export const muiTheme = {
       gridLayoutBackground: '#333333',
       paperBackground: '#2b2b2b',
       cardBorder: 'rgba(0, 0, 0, 0.125)',
+      cardInfoBorder: '#222222',
       tooltipText: '#FFFFFF',
       ...globalColors,
     },
@@ -113,6 +115,7 @@ export const muiTheme = {
   light: createTheme({
     palette: {
       ...lightPalette,
+      cardInfoBorder: '#F1F1F1',
       ...globalColors,
     },
     ...sharedThemeOptions,
@@ -130,6 +133,6 @@ export const muiTheme = {
       ...globalColors,
     },
     ...sharedThemeOptions,
-    cardBorderSize: '2px',
+    cardBorderSize: '1px',
   }),
 };

package/src/title-styles.js

@@ -14,18 +14,23 @@ export const useTitleStyles = makeStyles()(theme => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
-  titleInfo: {
+  infoText: {
+    color: theme.palette.primaryForeground,
     width: '100%',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
-    fontSize: '80% !important',
+    fontSize: '60% !important',
     opacity: '.8',
-    padding: '0 4px',
+    padding: '0',
     justifyContent: 'center',
-    lineHeight: '25px !important',
-    flexShrink: '1',
-    textAlign: 'right !important',
+    textAlign: 'center !important',
+    borderTop: '0px',
+    borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   titleButtons: {
     display: 'flex',
@@ -41,15 +46,20 @@ export const useTitleStyles = makeStyles()(theme => ({
     border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: '1 1 auto',
     minHeight: '1px',
-    marginTop: '8px',
-    marginBottom: '8px',
+    marginTop: '0',
+    marginBottom: '0',
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     minWidth: '0',
     wordWrap: 'break-word',
     backgroundClip: 'border-box',
-    borderRadius: '4px',
+    borderTopLeftRadius: '4px',
+    borderTopRightRadius: '4px',
+  },
+  cardWithoutInfoText: {
+    borderBottomLeftRadius: '4px',
+    borderBottomRightRadius: '4px',
   },
   paddingCard: {
     padding: '12px',