@vitessce/vega 2.0.3 → 3.0.1

package/dist-tsc/ReactVega.d.ts

@@ -0,0 +1,2 @@
+export { Vega as default } from "react-vega";
+//# sourceMappingURL=ReactVega.d.ts.map

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

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

package/dist-tsc/ReactVega.js

@@ -0,0 +1,2 @@
+// See https://reactjs.org/docs/code-splitting.html#named-exports
+export { Vega as default } from 'react-vega';

package/dist-tsc/VegaPlot.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A wrapper around the react-vega Vega component.
+ * @param {object} props
+ * @param {object} spec A vega or vega-lite spec.
+ * @param {object[]} data The plot data as an array of objects.
+ * @param {object} signalListeners Vega signal listeners. Optional.
+ */
+export function VegaPlot(props: object): JSX.Element | null;
+//# sourceMappingURL=VegaPlot.d.ts.map

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

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

package/dist-tsc/VegaPlot.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Suspense, useMemo } from 'react';
+import { Handler } from 'vega-tooltip';
+import clsx from 'clsx';
+import { useTooltipStyles } from '@vitessce/tooltip';
+import ReactVega from './ReactVega.js';
+import { DATASET_NAME } from './utils.js';
+import { useStyles } from './styles.js';
+// TODO: React.lazy is not working with Vitessce in the portal-ui.
+// For now, we can work around this by not using React.lazy,
+// but for performance benefits that come with lazy-loading
+// we should eventually try to resolve this issue.
+// const ReactVega = React.lazy(() => import('./ReactVega'));
+function isVega(spec) {
+    return spec.$schema === 'https://vega.github.io/schema/vega/v5.json';
+}
+function renderTooltipContents(tooltipText) {
+    const tableRows = Object.entries(tooltipText)
+        .map(([key, value]) => (`<tr key=${key}>
+        <th>${key}</th>
+        <td>${value}</td>
+      </tr>`))
+        .join('');
+    return (`<table>
+      <tbody>
+        ${tableRows}
+      </tbody>
+    </table>`);
+}
+/**
+ * A wrapper around the react-vega Vega component.
+ * @param {object} props
+ * @param {object} spec A vega or vega-lite spec.
+ * @param {object[]} data The plot data as an array of objects.
+ * @param {object} signalListeners Vega signal listeners. Optional.
+ */
+export function VegaPlot(props) {
+    const { spec: partialSpec, data, getTooltipText, signalListeners, } = props;
+    // eslint-disable-next-line no-unused-vars
+    const classes = useStyles();
+    const tooltipClasses = useTooltipStyles();
+    const tooltipHandler = useMemo(() => {
+        if (typeof getTooltipText === 'function') {
+            const tooltipConfig = {
+                theme: 'custom',
+                offsetX: 10,
+                offsetY: 10,
+                // Use table element to match packages/tooltip/TooltipContent implementation.
+                formatTooltip: tooltipText => `
+          <div class="${clsx(classes.tooltipContainer, tooltipClasses.tooltipContent)}">
+            ${renderTooltipContents(tooltipText)}
+          </div>
+        `,
+            };
+            const handlerInstance = new Handler(tooltipConfig);
+            const originalCall = handlerInstance.call;
+            handlerInstance.call = (handler, event, item, value) => {
+                if (item && item.datum && value) {
+                    const tooltipText = getTooltipText(item);
+                    originalCall.call(this, handler, event, item, tooltipText);
+                }
+                else {
+                    originalCall.call(this, handler, event, item, value);
+                }
+            };
+            return handlerInstance.call;
+        }
+        return false;
+    }, [getTooltipText, classes.tooltipContainer, tooltipClasses.tooltipContent]);
+    const spec = useMemo(() => ({
+        ...partialSpec,
+        data: (isVega(partialSpec)
+            ? [
+                { name: DATASET_NAME },
+                ...partialSpec.data,
+            ]
+            : { name: DATASET_NAME }),
+    }), [partialSpec]);
+    const vegaComponent = useMemo(() => (_jsx(ReactVega, { spec: spec, data: {
+            [DATASET_NAME]: data,
+        }, signalListeners: signalListeners, tooltip: tooltipHandler, renderer: "canvas", scaleFactor: 3 })), [spec, data, signalListeners, tooltipHandler]);
+    return (spec && data && data.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: vegaComponent })) : null);
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,3 @@
+export { VegaPlot } from "./VegaPlot.js";
+export { VEGA_THEMES, DATASET_NAME } from "./utils.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -1,2 +1,2 @@
-export { VegaPlot, DATASET_NAME } from './VegaPlot';
-export { VEGA_THEMES } from './utils';
+export { VegaPlot } from './VegaPlot.js';
+export { VEGA_THEMES, DATASET_NAME } from './utils.js';

package/dist-tsc/styles.d.ts

@@ -0,0 +1,2 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"@global">;
+//# sourceMappingURL=styles.d.ts.map

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

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

package/dist-tsc/styles.js

@@ -0,0 +1,18 @@
+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',
+            },
+        },
+    },
+}));

package/dist-tsc/utils.d.ts

@@ -0,0 +1,27 @@
+export namespace VEGA_THEMES {
+    namespace dark {
+        const background: null;
+        namespace title {
+            const color: string;
+        }
+        const style: {
+            'guide-label': {
+                fill: string;
+            };
+            'guide-title': {
+                fill: string;
+            };
+        };
+        namespace axis {
+            const domainColor: string;
+            const gridColor: string;
+            const tickColor: string;
+        }
+    }
+    namespace light {
+        const background_1: null;
+        export { background_1 as background };
+    }
+}
+export const DATASET_NAME: "table";
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,mCAAoC"}

package/dist-tsc/utils.js

@@ -0,0 +1,30 @@
+/**
+ * Vega-Lite themes that can be passed to the `config` property
+ * of the vega-lite spec.
+ */
+export const VEGA_THEMES = {
+    dark: {
+        // The vega-themes dark theme.
+        // Reference: https://github.com/vega/vega-themes/blob/master/src/theme-dark.ts
+        background: null,
+        title: { color: '#fff' },
+        style: {
+            'guide-label': {
+                fill: '#fff',
+            },
+            'guide-title': {
+                fill: '#fff',
+            },
+        },
+        axis: {
+            domainColor: '#fff',
+            gridColor: '#888',
+            tickColor: '#fff',
+        },
+    },
+    light: {
+        // The default vega theme.
+        background: null,
+    },
+};
+export const DATASET_NAME = 'table';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vega",
-  "version": "2.0.3",
+  "version": "3.0.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,28 +8,39 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "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"
+    "vega-tooltip": "^0.27.0",
+    "@vitessce/tooltip": "3.0.1"
   },
   "devDependencies": {
     "react": "^18.0.0",
-    "vite": "^3.0.0",
-    "vitest": "^0.23.4"
+    "vite": "^4.3.0",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
-    "test": "pnpm exec vitest --run -r ../../ --dir ."
+    "test": "pnpm exec vitest --run"
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/VegaPlot.js

@@ -1,6 +1,11 @@
 import React, { Suspense, useMemo } from 'react';
 import { Handler } from 'vega-tooltip';
-import ReactVega from './ReactVega';
+import clsx from 'clsx';
+import { useTooltipStyles } from '@vitessce/tooltip';
+import ReactVega from './ReactVega.js';
+import { DATASET_NAME } from './utils.js';
+import { useStyles } from './styles.js';
+
 
 // TODO: React.lazy is not working with Vitessce in the portal-ui.
 // For now, we can work around this by not using React.lazy,
@@ -8,12 +13,29 @@ import ReactVega from './ReactVega';
 // we should eventually try to resolve this issue.
 // const ReactVega = React.lazy(() => import('./ReactVega'));
 
-export const DATASET_NAME = 'table';
-
 function isVega(spec) {
   return spec.$schema === 'https://vega.github.io/schema/vega/v5.json';
 }
 
+function renderTooltipContents(tooltipText) {
+  const tableRows = Object.entries(tooltipText)
+    .map(([key, value]) => (
+      `<tr key=${key}>
+        <th>${key}</th>
+        <td>${value}</td>
+      </tr>`
+    ))
+    .join('');
+
+  return (
+    `<table>
+      <tbody>
+        ${tableRows}
+      </tbody>
+    </table>`
+  );
+}
+
 /**
  * A wrapper around the react-vega Vega component.
  * @param {object} props
@@ -25,9 +47,43 @@ export function VegaPlot(props) {
   const {
     spec: partialSpec,
     data,
+    getTooltipText,
     signalListeners,
   } = props;
 
+  // eslint-disable-next-line no-unused-vars
+  const classes = useStyles();
+  const tooltipClasses = useTooltipStyles();
+
+  const tooltipHandler = useMemo(() => {
+    if (typeof getTooltipText === 'function') {
+      const tooltipConfig = {
+        theme: 'custom',
+        offsetX: 10,
+        offsetY: 10,
+        // Use table element to match packages/tooltip/TooltipContent implementation.
+        formatTooltip: tooltipText => `
+          <div class="${clsx(classes.tooltipContainer, tooltipClasses.tooltipContent)}">
+            ${renderTooltipContents(tooltipText)}
+          </div>
+        `,
+      };
+
+      const handlerInstance = new Handler(tooltipConfig);
+      const originalCall = handlerInstance.call;
+      handlerInstance.call = (handler, event, item, value) => {
+        if (item && item.datum && value) {
+          const tooltipText = getTooltipText(item);
+          originalCall.call(this, handler, event, item, tooltipText);
+        } else {
+          originalCall.call(this, handler, event, item, value);
+        }
+      };
+      return handlerInstance.call;
+    }
+    return false;
+  }, [getTooltipText, classes.tooltipContainer, tooltipClasses.tooltipContent]);
+
   const spec = useMemo(() => ({
     ...partialSpec,
     data: (isVega(partialSpec)
@@ -46,11 +102,11 @@ export function VegaPlot(props) {
         [DATASET_NAME]: data,
       }}
       signalListeners={signalListeners}
-      tooltip={new Handler().call}
+      tooltip={tooltipHandler}
       renderer="canvas"
       scaleFactor={3}
     />
-  ), [spec, data, signalListeners]);
+  ), [spec, data, signalListeners, tooltipHandler]);
 
   return (
     spec && data && data.length > 0 ? (

package/src/index.js

@@ -1,2 +1,2 @@
-export { VegaPlot, DATASET_NAME } from './VegaPlot';
-export { VEGA_THEMES } from './utils';
+export { VegaPlot } from './VegaPlot.js';
+export { VEGA_THEMES, DATASET_NAME } from './utils.js';

package/src/styles.js

@@ -0,0 +1,19 @@
+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',
+      },
+    },
+  },
+}));

package/src/utils.js

@@ -27,3 +27,5 @@ export const VEGA_THEMES = {
     background: null,
   },
 };
+
+export const DATASET_NAME = 'table';