visdesignlab · JackWilb · Feb 12, 2025 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -6,14 +6,13 @@ import { dataSelector, encodedDataAtom } from './atoms/dataAtom';
 import { Root } from './components/Root';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DataTable } from './components/DataTable';
-import { convertConfig, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
+import { convertConfig, deepCopy, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
 import { configAtom } from './atoms/configAtoms';
 import { queryParamAtom } from './atoms/queryParamAtom';
 import { getMultinetSession } from './api/session';
 import { CircularProgress } from '@mui/material';
 import { ProvenanceGraph } from '@trrack/core/graph/graph-slice';
 
-/** @jsxImportSource @emotion/react */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 const defaultVisibleSets = 6;
@@ -76,7 +75,7 @@ function App() {
       );
 
       if (sessionState && sessionState !== 'not found') {
-        provenance.importObject(structuredClone(sessionState));
+        provenance.importObject(deepCopy(sessionState));
       }
 
       // Make sure the config atom stays up-to-date with the provenance

diff --git a/packages/app/src/components/Body.tsx b/packages/app/src/components/Body.tsx
@@ -1,5 +1,5 @@
 import { AltText, Upset, getAltTextConfig } from '@visdesignlab/upset2-react';
-import { UpsetConfig } from '@visdesignlab/upset2-core';
+import { deepCopy, UpsetConfig } from '@visdesignlab/upset2-core';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { encodedDataAtom } from '../atoms/dataAtom';
 import { doesHaveSavedQueryParam, queryParamAtom, saveQueryParam } from '../atoms/queryParamAtom';
@@ -81,7 +81,7 @@ export const Body = ({ data, config }: Props) => {
   async function getAltText(): Promise<AltText> {
     const state = provObject.provenance.getState();
     // Rows must be cloned to avoid a recoil error triggered far down in this call chain when a function writes rows
-    const config = getAltTextConfig(state, data, structuredClone(rows));
+    const config = getAltTextConfig(state, data, deepCopy(rows));
 
     if (config.firstAggregateBy !== "None") {
       throw new Error("Alt text generation is not yet supported for aggregated plots. To generate an alt text, set aggregation to 'None' in the left sidebar.");

diff --git a/packages/app/src/utils/oneHotEncoding.ts b/packages/app/src/utils/oneHotEncoding.ts
@@ -1,8 +1,8 @@
-import { CoreUpsetData, process } from "@visdesignlab/upset2-core";
+import { CoreUpsetData, deepCopy, process } from "@visdesignlab/upset2-core";
 
 export const oneHotEncode = (encodeList: string[], data: CoreUpsetData, empty?: boolean) => {
     const newColNames: string[] = []
-    const encodedData: CoreUpsetData = structuredClone(data);
+    const encodedData: CoreUpsetData = deepCopy(data);
 
     // close the error window
     if (empty) {

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -24,7 +24,7 @@
       "pre-commit": "eslint src"
     }
   },
-  "author": "Kiran Gadhave ([email protected]), Jake Wagoner",
+  "author": "Kiran Gadhave ([email protected]), Jake Wagoner, Nate Lanza",
   "size-limit": [
     {
       "path": "dist/packagescore.cjs.production.min.js",

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -2,7 +2,7 @@ import { isNumericalBookmark, isElementBookmark } from './typecheck';
 import { ElementSelection, Item, ElementQueryType } from './types';
 
 /**
- * DEPRECATED: Currently serves only as an alias for structuredClone; use that instead.
+ * Version safe deep copy using structured cloning.
  * Create a deep copy (with all fields recursively copied) of an object using structured cloning;
  * if structured cloning fails, falls back to JSON serialization.
  * @param obj the object to copy

diff --git a/packages/upset/package.json b/packages/upset/package.json
@@ -38,7 +38,9 @@
   },
   "peerDependencies": {
     "react": "^18.0.2",
-    "react-dom": "^18.0.2"
+    "react-dom": "^18.0.2",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.13.0"
   },
   "husky": {
     "hooks": {

diff --git a/packages/upset/src/components/AttributeDialog.tsx b/packages/upset/src/components/AttributeDialog.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
 import {

diff --git a/packages/upset/src/components/Columns/DeviationBar.tsx b/packages/upset/src/components/Columns/DeviationBar.tsx
@@ -5,7 +5,6 @@ import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { deviationScaleAtom } from '../../atoms/scaleAtoms';
 import translate from '../../utils/transform';
 
-/** @jsxImportSource @emotion/react */
 type Props = {
   deviation: number;
 };

diff --git a/packages/upset/src/components/ElementView/BookmarkChips.tsx b/packages/upset/src/components/ElementView/BookmarkChips.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import {
-  Bookmark, BookmarkedIntersection, flattenedOnlyRows, isBookmarkedIntersection,
+  Bookmark, BookmarkedIntersection, deepCopy, flattenedOnlyRows, isBookmarkedIntersection,
   isElementSelection,
 } from '@visdesignlab/upset2-core';
 import {
@@ -142,13 +142,13 @@ export const BookmarkChips = () => {
         aria-label={`Selected elements ${currentSelection.label}`}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
-            actions.addBookmark(structuredClone(currentSelection));
+            actions.addBookmark(deepCopy(currentSelection));
           }
         }}
         onClick={() => actions.setElementSelection(null)}
         label={`${currentSelection.label}`}
         onDelete={() => {
-          actions.addBookmark(structuredClone(currentSelection));
+          actions.addBookmark(deepCopy(currentSelection));
         }}
         deleteIcon={<StarBorderIcon />}
       />

diff --git a/packages/upset/src/components/ElementView/ElementSidebar.tsx b/packages/upset/src/components/ElementView/ElementSidebar.tsx
@@ -78,7 +78,6 @@ function downloadElementsAsCSV(items: Item[], columns: string[], name: string) {
   anchor.remove();
 }
 
-/** @jsxImportSource @emotion/react */
 /**
  * Sidebar component for the Element View
  * @param open Whether the sidebar is open

diff --git a/packages/upset/src/components/ElementView/ElementVisualization.tsx b/packages/upset/src/components/ElementView/ElementVisualization.tsx
@@ -6,7 +6,7 @@ import {
 import { SignalListener, VegaLite } from 'react-vega';
 import { useRecoilValue } from 'recoil';
 
-import { numericalQueryToBookmark, numericalQueriesEqual, isNumericalQuery } from '@visdesignlab/upset2-core';
+import { numericalQueryToBookmark, numericalQueriesEqual, isNumericalQuery, deepCopy } from '@visdesignlab/upset2-core';
 import { Alert, Button } from '@mui/material';
 import { bookmarkSelector, currentIntersectionSelector, elementColorSelector } from '../../atoms/config/currentIntersectionAtom';
 import { histogramSelector, scatterplotsSelector } from '../../atoms/config/plotAtoms';
@@ -45,7 +45,7 @@ export const ElementVisualization = () => {
     [scatterplots, histograms, selectColor, numericalQuery],
   );
   const data = useMemo(() => ({
-    elements: Object.values(structuredClone(items)),
+    elements: Object.values(deepCopy(items)),
   }), [items]);
 
   /**

diff --git a/packages/upset/src/components/ForegroundRects.tsx b/packages/upset/src/components/ForegroundRects.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { visibleSetSelector } from '../atoms/config/visibleSetsAtoms';

diff --git a/packages/upset/src/components/Header/AttributeButton.tsx b/packages/upset/src/components/Header/AttributeButton.tsx
@@ -13,7 +13,6 @@ import { ContextMenuItem } from '../../types';
 import { allowAttributeRemovalAtom } from '../../atoms/config/allowAttributeRemovalAtom';
 import { attributePlotsSelector } from '../../atoms/config/plotAtoms';
 
-/** @jsxImportSource @emotion/react */
 type Props = {
   /**
    * Text to display on the attribute button

diff --git a/packages/upset/src/components/Header/MatrixHeader.tsx b/packages/upset/src/components/Header/MatrixHeader.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { useRecoilValue } from 'recoil';
 
 import { hiddenSetSelector, visibleSetSelector } from '../../atoms/config/visibleSetsAtoms';

diff --git a/packages/upset/src/components/Header/SizeHeader.tsx b/packages/upset/src/components/Header/SizeHeader.tsx
@@ -19,7 +19,6 @@ import { contextMenuAtom } from '../../atoms/contextMenuAtom';
 import { HeaderSortArrow } from '../custom/HeaderSortArrow';
 import { flattenedRowsSelector } from '../../atoms/renderRowsAtom';
 
-/** @jsxImportSource @emotion/react */
 const hide = css`
   opacity: 0;
   transition: opacity 0.5s;

diff --git a/packages/upset/src/components/Rows/AggregateRow.tsx b/packages/upset/src/components/Rows/AggregateRow.tsx
@@ -8,7 +8,6 @@ import SvgIcon from '@mui/material/SvgIcon';
 import { visibleSetSelector } from '../../atoms/config/visibleSetsAtoms';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import {
-  bookmarkSelector,
   currentIntersectionSelector,
 } from '../../atoms/config/currentIntersectionAtom';
 import translate from '../../utils/transform';
@@ -21,7 +20,6 @@ import { ProvenanceContext } from '../Root';
 import { AttributeBars } from '../Columns/Attribute/AttributeBars';
 import { aggregateSelectedCount } from '../../atoms/elementsSelectors';
 
-/** @jsxImportSource @emotion/react */
 /**
  * Props for the AggregateRow component.
  */

diff --git a/packages/upset/src/components/Rows/SubsetRow.tsx b/packages/upset/src/components/Rows/SubsetRow.tsx
@@ -8,7 +8,7 @@ import { visibleSetSelector } from '../../atoms/config/visibleSetsAtoms';
 import { AttributeBars } from '../Columns/Attribute/AttributeBars';
 import { SizeBar } from '../Columns/SizeBar';
 import { Matrix } from '../Columns/Matrix/Matrix';
-import { bookmarkSelector, currentIntersectionSelector } from '../../atoms/config/currentIntersectionAtom';
+import { currentIntersectionSelector } from '../../atoms/config/currentIntersectionAtom';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import {
   highlight, defaultBackground, mousePointer, hoverHighlight,
@@ -30,7 +30,6 @@ export const SubsetRow: FC<Props> = ({ subset }) => {
   const visibleSets = useRecoilValue(visibleSetSelector);
   const currentIntersection = useRecoilValue(currentIntersectionSelector);
   const dimensions = useRecoilValue(dimensionsSelector);
-  const bookmarks = useRecoilValue(bookmarkSelector);
   const selected = useRecoilValue(subsetSelectedCount(subset.id));
 
   // Use trrack action for current intersection

diff --git a/packages/upset/src/components/Sidebar.tsx b/packages/upset/src/components/Sidebar.tsx
@@ -49,7 +49,6 @@ const sidebarHeaderCSS = css`
   font-size: 0.95rem;
 `;
 
-/** @jsxImportSource @emotion/react */
 export const Sidebar = () => {
   const { actions } = useContext(
     ProvenanceContext,

diff --git a/packages/upset/src/components/SvgBase.tsx b/packages/upset/src/components/SvgBase.tsx
@@ -7,7 +7,6 @@ import { dimensionsSelector } from '../atoms/dimensionsAtom';
 import { ProvenanceContext } from './Root';
 import { currentIntersectionSelector } from '../atoms/config/currentIntersectionAtom';
 
-/** @jsxImportSource @emotion/react */
 type SvgBaseSettings = {
   margin: number;
   height: number;

diff --git a/packages/upset/src/components/custom/AxisTickLine.tsx b/packages/upset/src/components/custom/AxisTickLine.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { FC } from 'react';
 import translate from '../../utils/transform';
 
-/** @jsxImportSource @emotion/react */
 const shadow = css`
   textshadow: 0 0 5px white;
 `;

diff --git a/packages/upset/src/components/custom/SetLabel.tsx b/packages/upset/src/components/custom/SetLabel.tsx
@@ -24,8 +24,8 @@ export const SetLabel: FC<Props> = ({ setId, name }) => {
       <rect
         className={setId}
         css={
-          (columnHover.includes(setId) || columnSelect.includes(setId)) &&
-            hoverHighlight
+          (columnHover.includes(setId) || columnSelect.includes(setId)) ?
+            hoverHighlight : undefined
         }
         height={dimensions.set.label.height - gap}
         width={dimensions.set.width - gap / 2}

diff --git a/packages/upset/src/components/custom/SetSizeBar.tsx b/packages/upset/src/components/custom/SetSizeBar.tsx
@@ -44,8 +44,8 @@ export const SetSizeBar: FC<Props> = ({
 
       <rect
         css={
-          (columnHover.includes(setId) || columnSelect.includes(setId)) &&
-            hoverHighlight
+          (columnHover.includes(setId) || columnSelect.includes(setId)) ?
+            hoverHighlight : undefined
         }
         height={dimensions.set.size.height}
         width={dimensions.set.width}

diff --git a/packages/upset/src/components/custom/SvgRectButton.tsx b/packages/upset/src/components/custom/SvgRectButton.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { styled } from '@mui/material';
 import { ComponentProps, FC } from 'react';
 

diff --git a/packages/upset/src/utils/styles.ts b/packages/upset/src/utils/styles.ts
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 
-/** @jsxImportSource @emotion/react */
 export const highlight = css`
   fill: #fed9a6;
   stroke: #feca82;

diff --git a/packages/upset/tsconfig.json b/packages/upset/tsconfig.json
@@ -1,7 +1,9 @@
 {
-  "include": ["src", "types"],
+  "include": ["src", "types", "vite.config.ts"],
+  "exclude": ["node_modules"],
   "compilerOptions": {
-    "module": "esnext",
+    "module": "ESNext",
+    "target": "ESNext",
     "types": ["@emotion/react/types/css-prop"],
     "lib": ["dom", "esnext"],
     "importHelpers": true,
@@ -15,11 +17,13 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "moduleResolution": "node",
-    "jsx": "preserve",
     "jsxImportSource": "@emotion/react",
+    "jsx": "preserve",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true
+    "noEmit": true,
+    "isolatedModules": true,
+    "composite": true,
   }
 }
diff --git a/packages/upset/vite.config.js b/packages/upset/vite.config.js
@@ -24,11 +24,13 @@ export default defineConfig({
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {
     sourcemap: true,
-    emptyOutDir: false,
+    emptyOutDir: true,
+    outDir: './dist/',
     lib: {
       // Could also be a dictionary or array of multiple entry points.
       entry: 'src/index.tsx',
       fileName: 'index',
+      name: 'Upset',
 
       // Change this to the formats you want to support.
       // Don't forgot to update your package.json as well.