NextJS consumer test (#1538)

* Create zod schema for 1.0.16 * Move to separate package * Revert main package.json changes * Use builder functions * wip: previous versions * Upgrade functions * Initial tests * VitS as controlled component * Upgrade in <Vitessce/> * WIP: plugins registered via props (instead of window) * Update schemas * Joint file type schemas and via new plugin mechanism * Refactor plugin classes * Cleanup * Update * More cleanup * Cleanup register functions * Remove plugins file, use default coordination values from plugin objects * Comment * Use superRefine to check for deprecated coordination types * Revert * Fix tests * Extra imports * Try env.d.ts * Update * Update plugin examples * Linting for obsSets view * Comment * Allow ts in vite bundling config * Fix e2e tests * Update * Fix import * Allow empty props * Update * Remove ajv * Update * Update deps * Lint * Fix tests * Implement plugin classes with typescript * Add config uid property * use .length * Fix docs * Update plugin docs * Add config schema versioning docs * Add useCallback calls to obsSetsManager * Remove unnecessary fromEntries * Implement getSourceAndLoader function * Remove extra import * Eslint comment * Demo * Update dev-config-versioning.md * Update docusaurus.config.js * Lint * Make json schemas * Tsconfig * Lockfile * Update deploy script and readme * Simplify pnpm command * Update pnpm lock * Respond to PR feedback * Fix type issues, update docs * Refactor base plugins * Update * Pnpm install * Types in package.json * Fix tsconfig project references * Pnpm lock * Add dev-docs * Working types and linting * pnpm lock * Update * Fix test * Lint * Pnpm lock * React import * React import * More react imports * Update package.json exports in sub-packages, add new test for dynamic importmap * Add comment * Comment * Dev-docs * Add comment * Use dynamic-importmap * Try compressed-size-action * Update * Node options * env * Clean cmd * Use .js * Comments * Revert webpack plugin * Update cypress e2e tests * Add/move dev-docs * Update design-guidelines.md * Fix meta-updater * Revert config * Update design-guidelines.md * Update README.md * Update design-guidelines.md * Update design-guidelines.md * Update design-guidelines.md * Update rollup.config.js * Revert unrelated change * Revert unrelated github action change * WIP: clean up lodash, mui, uuid imports * More import fixes * De-duplicate imports * Dev-docs about js imports * Use publint * Fix typo * isEqual * Fix tests * Revert changed ObsSetsManager * Dev-docs * Dev-docs linked from main README * Demo * NextJS consumer test * NextJS consumer test * Changelog * README * Use .js extensions for imports to so that source is ESM (#1519) * Use .js * Comments * Revert webpack plugin * Update cypress e2e tests * Add/move dev-docs * Update design-guidelines.md * Fix meta-updater * Revert config * Update design-guidelines.md * Update README.md * Update design-guidelines.md * Update design-guidelines.md * Update design-guidelines.md * Update rollup.config.js * Revert unrelated change * WIP: clean up lodash, mui, uuid imports * More import fixes * De-duplicate imports * Dev-docs about js imports * Use publint * isEqual * Fix tests * Dev-docs * Dev-docs linked from main README * Demo * Feedback * Use same terminology in docs as code * Fix merge * Revert workspace change * Linting * Update Vis.js
vitessce · May 31, 2023 · 4f5ef0e · 4f5ef0e
1 parent 34296f3
commit 4f5ef0e
Show file tree

Hide file tree

Showing 10 changed files with 877 additions and 779 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Added developer troubleshooting instructions to README.
 - Add `useFullResolutionImage` to `Spatial` to allow for loading only full resolution image from pyramid.
 - Implemented ability to select an area on the Expression Histogram. On select, a new obs set selection is created. The new selection contains the ids of all obs that belong to the selected bars.
+- Add integration test for consumer site built with NextJS.
 - Implemented ability to show two columns in the feature-list view when each feature has a second identifer associated.
 - Add `CITATION.cff`
 - Added a button to recenter and rescale data to default for Scatterplot and Spatial views. 

diff --git a/consumer/.gitignore b/consumer/.gitignore
@@ -1,4 +1,11 @@
 package.json
 package-lock.json
 *.tgz
-dist/
+
+# Vite site
+dist/
+
+# NextJS site
+out/
+build/
+.next/
diff --git a/consumer/README.md b/consumer/README.md
@@ -11,4 +11,19 @@ pnpm run bundle
 pnpm run start-html
 ```
 
-Open http://localhost:3003/consumer/dist/index.html
+### Vite consumer site
+
+Related directories/files:
+- `src/`
+- `vite.config.js`
+
+Open http://localhost:3003/consumer/dist/index.html
+
+### NextJS consumer site
+
+Related directories/files:
+- `components/`
+- `pages/`
+- `next.config.js`
+
+Open http://localhost:3003/consumer/out/index.html
diff --git a/consumer/components/Vis.js b/consumer/components/Vis.js
@@ -0,0 +1,33 @@
+import dynamic from 'next/dynamic';
+
+const Vitessce = dynamic(() => import('./VitessceWrapper'), {
+  loading: () => <p>Loading...</p>,
+  ssr: false,
+});
+
+const eng2019 = {
+  name: 'Eng et al., Nature 2019',
+  version: '1.0.16',
+  description: '',
+  datasets: [],
+  initStrategy: 'auto',
+  coordinationSpace: { },
+  layout: [
+    {
+      component: 'description',
+      props: {
+        description: 'Transcriptome-scale super-resolved imaging in tissues by RNA seqFISH',
+      },
+      x: 9,
+      y: 0,
+      w: 3,
+      h: 2,
+    },
+  ],
+};
+
+export default function Vis() {
+  return (
+    <Vitessce config={eng2019} theme="light" height={500} />
+  );
+}
diff --git a/consumer/components/VitessceWrapper.js b/consumer/components/VitessceWrapper.js
@@ -0,0 +1 @@
+export { Vitessce as default } from 'vitessce';
diff --git a/consumer/next.config.js b/consumer/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  /* config options here */
+  basePath: '/consumer/out',
+  output: 'export',
+};
diff --git a/consumer/pages/index.js b/consumer/pages/index.js
@@ -0,0 +1,15 @@
+import Head from 'next/head';
+import Vis from '../components/Vis.js';
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <title>Create Next App</title>
+      </Head>
+      <main>
+        <Vis />
+      </main>
+    </div>
+  );
+}