@vitessce/vega 2.0.3-beta.0 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vega",
-  "version": "2.0.3-beta.0",
+  "version": "2.0.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,9 +8,10 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@material-ui/core": "~4.12.3",
@@ -28,8 +29,7 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../ --dir ."
   }
 }

package/src/VegaPlot.js

@@ -0,0 +1,62 @@
+import React, { Suspense, useMemo } from 'react';
+import { Handler } from 'vega-tooltip';
+import ReactVega from './ReactVega';
+
+// 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'));
+
+export const DATASET_NAME = 'table';
+
+function isVega(spec) {
+  return spec.$schema === 'https://vega.github.io/schema/vega/v5.json';
+}
+
+/**
+ * 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,
+    signalListeners,
+  } = props;
+
+  const spec = useMemo(() => ({
+    ...partialSpec,
+    data: (isVega(partialSpec)
+      ? [
+        { name: DATASET_NAME },
+        ...partialSpec.data,
+      ]
+      : { name: DATASET_NAME }
+    ),
+  }), [partialSpec]);
+
+  const vegaComponent = useMemo(() => (
+    <ReactVega
+      spec={spec}
+      data={{
+        [DATASET_NAME]: data,
+      }}
+      signalListeners={signalListeners}
+      tooltip={new Handler().call}
+      renderer="canvas"
+      scaleFactor={3}
+    />
+  ), [spec, data, signalListeners]);
+
+  return (
+    spec && data && data.length > 0 ? (
+      <Suspense fallback={<div>Loading...</div>}>
+        {vegaComponent}
+      </Suspense>
+    ) : null
+  );
+}

package/src/index.js

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

package/src/utils.js

@@ -0,0 +1,29 @@
+/**
+ * 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,
+  },
+};

package/dist/VegaPlot.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, useMemo } from 'react';
-import { Handler } from 'vega-tooltip';
-import ReactVega from './ReactVega';
-// 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'));
-export const DATASET_NAME = 'table';
-function isVega(spec) {
-    return spec.$schema === 'https://vega.github.io/schema/vega/v5.json';
-}
-/**
- * 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, signalListeners, } = props;
-    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: new Handler().call, renderer: "canvas", scaleFactor: 3 })), [spec, data, signalListeners]);
-    return (spec && data && data.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: vegaComponent })) : null);
-}

package/dist/utils.js

@@ -1,29 +0,0 @@
-/**
- * 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,
-    },
-};