@vitessce/vega 3.5.12 → 3.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"VegaPlot.d.ts","sourceRoot":"","sources":["../src/VegaPlot.js"],"names":[],"mappings":"AA2CA;;;;;;GAMG;AACH,gCALW,MAAM,sBAoFhB"}
+{"version":3,"file":"VegaPlot.d.ts","sourceRoot":"","sources":["../src/VegaPlot.js"],"names":[],"mappings":"AA0CA;;;;;;GAMG;AACH,gCALW,MAAM,sBAsFhB"}

package/dist-tsc/VegaPlot.js

@@ -1,13 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Suspense, useMemo } from 'react';
 import { Handler } from 'vega-tooltip';
 import * as vegaImport from 'vega';
-import clsx from 'clsx';
 import { useTooltipStyles } from '@vitessce/tooltip';
 import { getInterpolateFunction } from '@vitessce/legend';
 import ReactVega from './ReactVega.js';
 import { DATASET_NAME } from './utils.js';
-import { useStyles } from './styles.js';
+import { VegaGlobalStyles } from './styles.js';
 // Register additional colormaps using vega.scheme().
 // Reference: https://vega.github.io/vega/docs/schemes/
 vegaImport.scheme('jet', getInterpolateFunction('jet'));
@@ -42,8 +41,7 @@ function renderTooltipContents(tooltipText) {
 export function VegaPlot(props) {
     const { spec: partialSpec, data, getTooltipText, signalListeners, renderer = 'svg', onNewView, } = props;
     // eslint-disable-next-line no-unused-vars
-    const classes = useStyles();
-    const tooltipClasses = useTooltipStyles();
+    const { classes: tooltipClasses } = useTooltipStyles();
     const tooltipHandler = useMemo(() => {
         if (typeof getTooltipText === 'function') {
             const tooltipConfig = {
@@ -52,7 +50,7 @@ export function VegaPlot(props) {
                 offsetY: 10,
                 // Use table element to match packages/tooltip/TooltipContent implementation.
                 formatTooltip: tooltipText => `
-          <div class="${clsx(classes.tooltipContainer, tooltipClasses.tooltipContent)}">
+          <div class="${tooltipClasses.tooltipContent}">
             ${renderTooltipContents(tooltipText)}
           </div>
         `,
@@ -71,7 +69,7 @@ export function VegaPlot(props) {
             return handlerInstance.call;
         }
         return false;
-    }, [getTooltipText, classes.tooltipContainer, tooltipClasses.tooltipContent]);
+    }, [getTooltipText, tooltipClasses.tooltipContent]);
     const spec = useMemo(() => ({
         ...partialSpec,
         data: (isVega(partialSpec)
@@ -81,8 +79,8 @@ export function VegaPlot(props) {
             ]
             : { name: DATASET_NAME }),
     }), [partialSpec]);
-    const vegaComponent = useMemo(() => (_jsx(ReactVega, { spec: spec, data: {
-            [DATASET_NAME]: data,
-        }, signalListeners: signalListeners, tooltip: tooltipHandler, renderer: renderer, scaleFactor: 3, onNewView: onNewView }, JSON.stringify({ width: spec.width, height: spec.height }))), [spec, data, signalListeners, tooltipHandler, renderer, onNewView]);
+    const vegaComponent = useMemo(() => (_jsxs(_Fragment, { children: [_jsx(VegaGlobalStyles, {}), _jsx(ReactVega, { spec: spec, data: {
+                    [DATASET_NAME]: data,
+                }, signalListeners: signalListeners, tooltip: tooltipHandler, renderer: renderer, scaleFactor: 3, onNewView: onNewView }, JSON.stringify({ width: spec.width, height: spec.height }))] })), [spec, data, signalListeners, tooltipHandler, renderer, onNewView]);
     return (spec && data && data.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: vegaComponent })) : null);
 }

package/dist-tsc/styles.d.ts

@@ -1,2 +1,2 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"@global">;
+export function VegaGlobalStyles(): import(".pnpm/@types+react@19.1.6/node_modules/@types/react").JSX.Element;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA,+GAgBI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.js"],"names":[],"mappings":"AAEA,8GAsBC"}

package/dist-tsc/styles.js

@@ -1,18 +1,20 @@
-import { makeStyles } from '@material-ui/core';
-export const useStyles = makeStyles(theme => ({
-    '@global': {
-        '#vg-tooltip-element.vg-tooltip.custom-theme': {
-            boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
-            padding: '0px',
-            backgroundColor: theme.palette.gridLayoutBackground,
-            color: theme.palette.secondaryForeground,
-            border: 'none',
-            opacity: 0.9,
-            fontSize: '12px',
-            borderRadius: '4px',
-            '& > div': {
-                backgroundColor: 'transparent',
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GlobalStyles, useTheme } from '@vitessce/styles';
+export function VegaGlobalStyles() {
+    const { theme } = useTheme();
+    return (_jsx(GlobalStyles, { styles: {
+            '#vg-tooltip-element.vg-tooltip.custom-theme': {
+                boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
+                padding: '0px',
+                backgroundColor: theme.palette.gridLayoutBackground,
+                color: theme.palette.secondaryForeground,
+                border: 'none',
+                opacity: 0.9,
+                fontSize: '12px',
+                borderRadius: '4px',
+                '& > div': {
+                    backgroundColor: 'transparent',
+                },
             },
-        },
-    },
-}));
+        } }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vega",
-  "version": "3.5.12",
+  "version": "3.6.1",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -16,22 +16,22 @@
     "dist-tsc"
   ],
   "dependencies": {
-    "@material-ui/core": "~4.12.3",
     "clsx": "^1.1.1",
     "react-vega": "^7.4.4",
     "vega": "^5.21.0",
     "vega-lite": "^5.1.1",
     "vega-tooltip": "^0.27.0",
-    "@vitessce/tooltip": "3.5.12",
-    "@vitessce/legend": "3.5.12"
+    "@vitessce/styles": "3.6.1",
+    "@vitessce/tooltip": "3.6.1",
+    "@vitessce/legend": "3.6.1"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.32.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",

package/src/VegaPlot.js

@@ -1,12 +1,11 @@
 import React, { Suspense, useMemo } from 'react';
 import { Handler } from 'vega-tooltip';
 import * as vegaImport from 'vega';
-import clsx from 'clsx';
 import { useTooltipStyles } from '@vitessce/tooltip';
 import { getInterpolateFunction } from '@vitessce/legend';
 import ReactVega from './ReactVega.js';
 import { DATASET_NAME } from './utils.js';
-import { useStyles } from './styles.js';
+import { VegaGlobalStyles } from './styles.js';
 
 // Register additional colormaps using vega.scheme().
 // Reference: https://vega.github.io/vega/docs/schemes/
@@ -59,8 +58,7 @@ export function VegaPlot(props) {
   } = props;
 
   // eslint-disable-next-line no-unused-vars
-  const classes = useStyles();
-  const tooltipClasses = useTooltipStyles();
+  const { classes: tooltipClasses } = useTooltipStyles();
 
   const tooltipHandler = useMemo(() => {
     if (typeof getTooltipText === 'function') {
@@ -70,7 +68,7 @@ export function VegaPlot(props) {
         offsetY: 10,
         // Use table element to match packages/tooltip/TooltipContent implementation.
         formatTooltip: tooltipText => `
-          <div class="${clsx(classes.tooltipContainer, tooltipClasses.tooltipContent)}">
+          <div class="${tooltipClasses.tooltipContent}">
             ${renderTooltipContents(tooltipText)}
           </div>
         `,
@@ -89,7 +87,7 @@ export function VegaPlot(props) {
       return handlerInstance.call;
     }
     return false;
-  }, [getTooltipText, classes.tooltipContainer, tooltipClasses.tooltipContent]);
+  }, [getTooltipText, tooltipClasses.tooltipContent]);
 
   const spec = useMemo(() => ({
     ...partialSpec,
@@ -103,21 +101,24 @@ export function VegaPlot(props) {
   }), [partialSpec]);
 
   const vegaComponent = useMemo(() => (
-    <ReactVega
-      spec={spec}
-      data={{
-        [DATASET_NAME]: data,
-      }}
-      signalListeners={signalListeners}
-      tooltip={tooltipHandler}
-      renderer={renderer}
-      scaleFactor={3}
-      // We need to force a re-render when the spec
-      // is the same except for changed width/height
-      // (to support responsive plots).
-      key={JSON.stringify({ width: spec.width, height: spec.height })}
-      onNewView={onNewView}
-    />
+    <>
+      <VegaGlobalStyles />
+      <ReactVega
+        spec={spec}
+        data={{
+          [DATASET_NAME]: data,
+        }}
+        signalListeners={signalListeners}
+        tooltip={tooltipHandler}
+        renderer={renderer}
+        scaleFactor={3}
+        // We need to force a re-render when the spec
+        // is the same except for changed width/height
+        // (to support responsive plots).
+        key={JSON.stringify({ width: spec.width, height: spec.height })}
+        onNewView={onNewView}
+      />
+    </>
   ), [spec, data, signalListeners, tooltipHandler, renderer, onNewView]);
 
   return (

package/src/styles.js

@@ -1,19 +1,25 @@
-import { makeStyles } from '@material-ui/core';
+import { GlobalStyles, useTheme } from '@vitessce/styles';
 
-export const useStyles = makeStyles(theme => ({
-  '@global': {
-    '#vg-tooltip-element.vg-tooltip.custom-theme': {
-      boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
-      padding: '0px',
-      backgroundColor: theme.palette.gridLayoutBackground,
-      color: theme.palette.secondaryForeground,
-      border: 'none',
-      opacity: 0.9,
-      fontSize: '12px',
-      borderRadius: '4px',
-      '& > div': {
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-}));
+export function VegaGlobalStyles() {
+  const { theme } = useTheme();
+
+  return (
+    <GlobalStyles
+      styles={{
+        '#vg-tooltip-element.vg-tooltip.custom-theme': {
+          boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
+          padding: '0px',
+          backgroundColor: theme.palette.gridLayoutBackground,
+          color: theme.palette.secondaryForeground,
+          border: 'none',
+          opacity: 0.9,
+          fontSize: '12px',
+          borderRadius: '4px',
+          '& > div': {
+            backgroundColor: 'transparent',
+          },
+        },
+      }}
+    />
+  );
+}