Add components for WC DataVis and DataVis NITRO by tvenable-mie · Pull Request #136 · mieweb/ui

tvenable-mie · 2026-03-12T19:06:48Z

Add new UI tags for WC DataVis and DataVis NITRO.

DataVis NITRO is a React + Tailwind + mieweb/ui frontend for DataVis ACE (acquisition + computation engine).
WC DataVis is a collection of interactive data exploration and visualization interfaces for DataVis ACE.

I created Storybook tags for NITRO like <DataVisNitroSource> and <DataVisNitroGrid>.
The WC DataVis tags are the same as layouts like <WCDVSOURCE> and <WCDVGRID>.

Copilot

Pull request overview

Adds React wrapper components and Storybook examples for integrating the legacy wcdatavis grid and the newer datavis (DataVis NITRO) React grid into this UI library, including required dependency and Storybook configuration updates.

Changes:

Introduce WCDataVis wrappers (WCDVSOURCE/WCDVGRID) and DataVisNITRO wrappers (DataVisNitroSource/DataVisNitroGrid) with Storybook stories.
Add wcdatavis/datavis (git) dependencies plus supporting assets (Font Awesome) and TypeScript module declarations for wcdatavis.
Update Storybook config and add sample JSON data for demos.

Reviewed changes

Copilot reviewed 12 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/types/wcdatavis.d.ts	Adds minimal TS declarations for `wcdatavis` ESM entrypoints used by wrappers.
src/index.ts	Exposes the new DataVis components from the package root exports.
src/components/WCDataVis/WCDataVis.tsx	Implements React context + wrapper components around `wcdatavis` Source/View/Grid.
src/components/WCDataVis/WCDataVis.stories.tsx	Adds Storybook demos for `wcdatavis` wrapper usage.
src/components/WCDataVis/setup.ts	Sets global `window.jQuery`/`$` required by `wcdatavis` plugins.
src/components/WCDataVis/index.ts	Public re-export surface for WCDataVis (currently mismatched vs implementation).
src/components/DataVisNITRO/DataVisNITRO.tsx	Implements `datavis` (NITRO) wrapper grid using `DataGrid`/`TableRenderer` over a `wcdatavis` view.
src/components/DataVisNITRO/index.ts	Public re-export surface for DataVis NITRO components/types.
src/components/DataVisNITRO/DataVisNITRO.stories.tsx	Adds Storybook demos for DataVis NITRO wrapper usage.
.storybook/public/sample-data.json	Adds sample dataset consumed by the new stories.
.storybook/preview-head.html	Adds Font Awesome CSS inclusion for `wcdatavis` icons (currently via `/node_modules`).
.storybook/main.ts	Tweaks Vite/esbuild JSX settings for Storybook.
package.json	Adds `datavis`, `wcdatavis`, and `font-awesome` dependencies.
pnpm-lock.yaml	Locks new dependencies and transitive deps for pnpm.
package-lock.json	Updates npm lockfile to reflect the dependency graph as well.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-12T19:10:49Z

src/components/WCDataVis/index.ts

+export { DataVisSource, DataVisGrid, SourceContext } from './WCDataVis';
+export type { DataVisSourceProps, DataVisGridProps } from './WCDataVis';


WCDataVis/index.ts re-exports identifiers that are not exported by WCDataVis.tsx (it exports WCDVSOURCE/WCDVGRID, not DataVisSource/DataVisGrid, and the corresponding *Props types don’t exist). This will cause a compile error and makes the package’s public exports incorrect. Please align the index re-exports with the actual component/type names (or rename the components/types to match, consistently across the folder and src/index.ts exports).

Suggested change

export { DataVisSource, DataVisGrid, SourceContext } from './WCDataVis';

export type { DataVisSourceProps, DataVisGridProps } from './WCDataVis';

export { WCDVSOURCE, WCDVGRID, SourceContext } from './WCDataVis';

Copilot · 2026-03-12T19:10:50Z

.storybook/preview-head.html

+<!-- Font Awesome 4 — required by wcdatavis grid icons -->
+<link
+  rel="stylesheet"
+  href="/node_modules/font-awesome/css/font-awesome.min.css"


Linking to "/node_modules/font-awesome/..." from preview-head.html will work in some dev setups but typically breaks in static Storybook builds (there is no node_modules folder in the built output, and staticDirs doesn’t expose it). Prefer importing the Font Awesome CSS via JS (e.g., in .storybook/preview.ts or the relevant component) or copying the needed CSS/font assets into a staticDir so build-storybook output includes them.

Suggested change

href="/node_modules/font-awesome/css/font-awesome.min.css"

href="/font-awesome/css/font-awesome.min.css"

Copilot · 2026-03-12T19:10:50Z

src/components/WCDataVis/WCDataVis.tsx

+  if (
+    viewRef.current === null ||
+    viewRef.current._dvType !== type ||
+    viewRef.current._dvUrl !== url
+  ) {
+    const source = props.type === 'http'
+      ? new Source({ type, url: props.url })
+      : new Source({ type });
+    viewRef.current = Object.assign(new ComputedView(source), { _dvType: type, _dvUrl: url });
+  }


WCDVSOURCE creates new Source/ComputedView instances during render when props change. Instantiating side-effectful objects during render can misbehave under React StrictMode (double-invoked renders) and makes rendering impure. Consider moving this initialization into a useMemo/useEffect (keyed by type/url) and only storing the instance in state/ref once created, so construction happens outside the render phase.

Copilot · 2026-03-12T19:10:51Z

src/components/DataVisNITRO/DataVisNITRO.tsx

+  if (
+    viewRef.current === null ||
+    viewRef.current._dvType !== type ||
+    viewRef.current._dvUrl !== url
+  ) {
+    const source = props.type === 'http'
+      ? new Source({ type, url: props.url })
+      : new Source({ type });
+
+    viewRef.current = Object.assign(
+      new ComputedView(source) as unknown as ViewInstance,
+      { _dvType: type, _dvUrl: url },
+    );
+  }


DataVisNitroSource constructs Source/ComputedView during render when props change. If those constructors perform side effects (fetching, subscriptions, global state), doing this in render can cause duplicate work and unexpected behavior under React StrictMode. Consider moving instance creation into useMemo/useEffect keyed by type/url and updating the context value from there, keeping render pure.

cloudflare-workers-and-pages · 2026-03-18T19:49:25Z

Deploying ui with Cloudflare Pages

Latest commit:	`aa40c4a`
Status:	✅ Deploy successful!
Preview URL:	https://5094162e.ui-6d0.pages.dev
Branch Preview URL:	https://feature-datavis2.ui-6d0.pages.dev

View logs

Copilot

Pull request overview

Copilot reviewed 12 out of 16 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/index.ts

 export * from './components/CookieConsent';
 export * from './components/CSVColumnMapper';
 export * from './components/DashboardWidget';
+export * from './components/DataVisNITRO';


package.json

    "@swc/helpers": "^0.5.19",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "datavis": "https://github.com/mieweb/datavis.git#dee867f08c4edfee873033ffae7b9cd6d5ad5ae0",
+    "font-awesome": "^4.7.0",
    "google-libphonenumber": "^3.2.44",
    "lucide-react": "^0.562.0",
    "luxon": "^3.7.2",
-    "tailwind-merge": "^2.6.1"
+    "tailwind-merge": "^2.6.1",
+    "wcdatavis": "https://github.com/mieweb/wcdatavis.git#fa0f081f7d4d2eb7525633bbfed8e833d7f26f52"
  },


.storybook/public/sample-data.json

+  "typeInfo": [
+    { "field": "id", "type": "number" },
+    { "field": "name", "type": "string" },
+    { "field": "email", "type": "string" },
+    { "field": "department", "type": "string" },
+    { "field": "status", "type": "string" },
+    { "field": "start_date", "type": "string" }
+  ],


src/components/DataVisNITRO/DataVisNITRO.tsx

+          viewData={viewState.data}
+          columns={resolvedColumns}
+          features={(effectiveTableDef?.features as TableFeatures | undefined) ?? features}
+          totalRows={viewState.totalRowCount || viewState.rowCount}


Copilot

Pull request overview

Copilot reviewed 12 out of 16 changed files in this pull request and generated 8 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

src/index.ts

+export * from './components/DataVisNITRO';
 export * from './components/DateInput';
 export * from './components/DateRangePicker';
 export * from './components/DocumentScanner';


src/index.ts

 export * from './components/Toast';
 export * from './components/Tooltip';
 export * from './components/VisuallyHidden';
+export * from './components/WCDataVis';


package.json

    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "datavis": "https://github.com/mieweb/datavis.git#60f3233e516b318d28ff03478e1c4f2eb4fcc718",
+    "font-awesome": "^4.7.0",
    "google-libphonenumber": "^3.2.44",
    "lucide-react": "^0.562.0",
    "luxon": "^3.7.2",
-    "tailwind-merge": "^2.6.1"
+    "tailwind-merge": "^2.6.1",
+    "wcdatavis": "https://github.com/mieweb/wcdatavis.git#fa0f081f7d4d2eb7525633bbfed8e833d7f26f52"


.storybook/preview-head.html

+<!-- Font Awesome 4 — required by wcdatavis grid icons -->
+<link
+  rel="stylesheet"
+  href="/node_modules/font-awesome/css/font-awesome.min.css"


src/components/DataVisNITRO/DataVisNITRO.tsx

+  return Object.fromEntries(
+    Object.entries(typeInfo).filter(([, value]) => isObject(value)),
+  ) as DataVisTypeInfoMap;


src/components/WCDataVis/WCDataVis.tsx

+export type WCDVSOURCE_props =
+  | HttpWCDVSOURCE_props
+  | LocalWCDVSOURCE_props
+  | FileWCDVSOURCE_props;


src/components/WCDataVis/WCDataVis.tsx

+
+// — WCDVGRID —
+
+export interface WCDVGRID_props {


src/components/DataVisNITRO/DataVisNITRO.tsx

+  if (
+    viewRef.current === null ||
+    viewRef.current._dvType !== type ||
+    viewRef.current._dvUrl !== url
+  ) {
+    const source = props.type === 'http'
+      ? new Source({ type, url: props.url })
+      : new Source({ type });
+
+    viewRef.current = Object.assign(
+      new ComputedView(source) as unknown as ViewInstance,
+      { _dvType: type, _dvUrl: url },
+    );
+  }


Bump DataVis & DataVis NITRO versions, fix type issues.

Copilot

Pull request overview

Copilot reviewed 12 out of 16 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-23T13:55:47Z

src/components/DataVisNITRO/DataVisNITRO.tsx

+  return Object.fromEntries(
+    Object.entries(typeInfo).filter(([, value]) => isObject(value)),
+  ) as DataVisTypeInfoMap;
+}


normalizeTypeInfo() doesn’t handle the typeInfo array shape used by the Storybook sample-data (and commonly returned by APIs). Object.entries() on an array produces numeric keys ("0", "1", …), so later lookups like typeInfo[field] won’t find metadata for fields like id/name, and auto-derived columns won’t get correct headers/types. Consider detecting Array.isArray(typeInfo) and converting it into a map keyed by the entry’s field property before returning.

Copilot · 2026-03-23T13:55:47Z

src/components/WCDataVis/setup.ts

+type JQueryGlobals = typeof globalThis & {
+  jQuery?: typeof jQuery;
+  $?: typeof jQuery;
+};
+
+const globalJQuery = globalThis as JQueryGlobals;
+
+if (typeof window !== 'undefined') {
+  window.jQuery = jQuery;
+  window.$ = jQuery;
+}
+globalJQuery.jQuery = jQuery;
+globalJQuery.$ = jQuery;


This module mutates globalThis unconditionally on import (globalJQuery.$/jQuery = ...). If WCDataVis is exported from the package root, this side-effect can run in SSR/Node contexts just by importing @mieweb/ui, potentially causing global namespace pollution across requests. Consider only setting globals in a browser guard (or lazily when the component mounts), and avoid exporting this component from the root entry if it must rely on global mutation.

Suggested change

type JQueryGlobals = typeof globalThis & {

jQuery?: typeof jQuery;

$?: typeof jQuery;

};

const globalJQuery = globalThis as JQueryGlobals;

if (typeof window !== 'undefined') {

window.jQuery = jQuery;

window.$ = jQuery;

}

globalJQuery.jQuery = jQuery;

globalJQuery.$ = jQuery;

type JQueryWindow = Window & {

jQuery?: typeof jQuery;

$?: typeof jQuery;

};

if (typeof window !== 'undefined') {

const globalJQuery = window as JQueryWindow;

globalJQuery.jQuery = jQuery;

globalJQuery.$ = jQuery;

}

Copilot · 2026-03-23T13:55:48Z

src/components/WCDataVis/WCDataVis.tsx

+// setup.ts must be first — it sets window.jQuery before plugins load
+import './setup';
+import { Source, ComputedView, Grid } from 'wcdatavis/index.js';
+
+import 'wcdatavis/wcdatavis.css';


WCDataVis has top-level side effects (./setup mutates globals and wcdatavis/wcdatavis.css is a side-effect import). When re-exported from src/index.ts, these will execute for all consumers importing the package root (including SSR builds) even if they never render the component. Consider moving these imports behind a lazy/dynamic import or into an effect, and/or exporting WCDataVis via a separate entry point similar to ag-grid.

Copilot · 2026-03-23T13:55:48Z

src/index.ts

 export * from './components/CookieConsent';
 export * from './components/CSVColumnMapper';
 export * from './components/DashboardWidget';
+export * from './components/DataVisNITRO';


Exporting DataVisNITRO from the root entry point forces all consumers of @mieweb/ui to resolve/bundle the (potentially heavy) datavis dependency even if they don’t use it. This conflicts with the existing pattern documented above for AG Grid (separate entrypoint to avoid forcing heavy deps). Consider moving this to a dedicated entry (e.g. src/datavis-nitro.ts) and exporting it via package.json exports, rather than export * from src/index.ts.

Suggested change

export * from './components/DataVisNITRO';

// DataVisNITRO is exported via a separate entry point (e.g. @mieweb/ui/datavis-nitro)

// to avoid forcing its heavy datavis dependency on all consumers.

Copilot · 2026-03-23T13:55:48Z

src/index.ts

 export * from './components/Toast';
 export * from './components/Tooltip';
 export * from './components/VisuallyHidden';
+export * from './components/WCDataVis';


Exporting WCDataVis from the root entry point forces consumers to load wcdatavis (and its jQuery/global side-effects via WCDataVis/setup.ts) on any import of @mieweb/ui. Given the established pattern of isolating heavy/optional deps (see AG Grid comment at top of this file), this should likely be a separate entry point so SSR and lightweight consumers aren’t impacted.

Suggested change

export * from './components/WCDataVis';

// WCDataVis is exported via a separate entry point: @mieweb/ui/wc-data-vis

// This avoids forcing wcdatavis and its jQuery/global side-effects on all consumers.

tvenable-mie added 2 commits March 12, 2026 15:00

Creating a component for WC DataVis using layout tag names.

4090bd8

Creating a component for DataVis NITRO.

bcf48f1

Copilot AI review requested due to automatic review settings March 12, 2026 19:06

Copilot started reviewing on behalf of tvenable-mie March 12, 2026 19:07 View session

tvenable-mie marked this pull request as draft March 12, 2026 19:08

Copilot AI reviewed Mar 12, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 18, 2026 20:27

Copilot AI reviewed Mar 18, 2026

View reviewed changes

tvenable-mie force-pushed the feature/datavis2 branch from bb7fccc to c4b1668 Compare March 18, 2026 20:41

Copilot AI review requested due to automatic review settings March 18, 2026 20:58

tvenable-mie force-pushed the feature/datavis2 branch from c4b1668 to b42a27c Compare March 18, 2026 20:58

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Try switching the repos to public so CI can get them.

3eb265e

Bump DataVis & DataVis NITRO versions, fix type issues.

tvenable-mie force-pushed the feature/datavis2 branch from b42a27c to 3eb265e Compare March 18, 2026 21:04

tvenable-mie marked this pull request as ready for review March 23, 2026 13:51

Copilot AI review requested due to automatic review settings March 23, 2026 13:51

Copilot started reviewing on behalf of tvenable-mie March 23, 2026 13:52 View session

Copilot AI reviewed Mar 23, 2026

View reviewed changes

Move DataVis NITRO along.

aa40c4a

tvenable-mie requested a review from garrity-miepub March 24, 2026 21:16

		export { DataVisSource, DataVisGrid, SourceContext } from './WCDataVis';
		export type { DataVisSourceProps, DataVisGridProps } from './WCDataVis';

	export { DataVisSource, DataVisGrid, SourceContext } from './WCDataVis';
	export type { DataVisSourceProps, DataVisGridProps } from './WCDataVis';
	export { WCDVSOURCE, WCDVGRID, SourceContext } from './WCDataVis';

	href="/node_modules/font-awesome/css/font-awesome.min.css"
	href="/font-awesome/css/font-awesome.min.css"

	export * from './components/DataVisNITRO';
	// DataVisNITRO is exported via a separate entry point (e.g. @mieweb/ui/datavis-nitro)
	// to avoid forcing its heavy datavis dependency on all consumers.

	export * from './components/WCDataVis';
	// WCDataVis is exported via a separate entry point: @mieweb/ui/wc-data-vis
	// This avoids forcing wcdatavis and its jQuery/global side-effects on all consumers.

Conversation

tvenable-mie commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tvenable-mie commented Mar 12, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 18, 2026 •

edited

Loading