Update deepCopy, hasOwn, emotion, and config files

packages/app/package.json

@@ -19,8 +19,8 @@
     "@types/node": "^16.11.22",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "@visdesignlab/upset2-core": "^0.1.0",
-    "@visdesignlab/upset2-react": "^0.1.0",
+    "@visdesignlab/upset2-core": "^1.0.0-rc2",
+    "@visdesignlab/upset2-react": "^1.0.0-rc2",
     "localforage": "^1.10.0",
     "multinet": "0.23.3",
     "react": "^18.0.2",

packages/app/src/App.tsx

@@ -6,18 +6,14 @@ import {
   UpsetProvenance, UpsetActions, getActions, initializeProvenanceTracking,
 } from '@visdesignlab/upset2-react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { convertConfig, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
-import { CircularProgress } from '@mui/material';
-import { ProvenanceGraph } from '@trrack/core/graph/graph-slice';
 import { dataSelector, encodedDataAtom } from './atoms/dataAtom';
 import { Root } from './components/Root';
 import { DataTable } from './components/DataTable';
+import { convertConfig, deepCopy, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
 import { configAtom } from './atoms/configAtoms';
 import { queryParamAtom } from './atoms/queryParamAtom';
 import { getMultinetSession } from './api/session';
 
-/** @jsxImportSource @emotion/react */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 const defaultVisibleSets = 6;
@@ -80,7 +76,7 @@ function App() {
       );
 
       if (sessionState && sessionState !== 'not found') {
-        prov.importObject(structuredClone(sessionState));
+        prov.importObject(deepCopy(sessionState));
       }
 
       // Make sure the config atom stays up-to-date with the provenance

packages/app/src/components/Body.tsx

@@ -1,5 +1,5 @@
 import { AltText, Upset, getAltTextConfig } from '@visdesignlab/upset2-react';
-import { CoreUpsetData, UpsetConfig } from '@visdesignlab/upset2-core';
+import { CoreUpsetData, deepCopy, UpsetConfig } from '@visdesignlab/upset2-core';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import {
   useCallback, useContext, useEffect, useState,
@@ -83,7 +83,7 @@ export const Body = ({ data, config }: Props) => {
   const getAltText: () => Promise<AltText> = useCallback(async () => {
     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 ATConfig = getAltTextConfig(state, data, structuredClone(rows));
+    const ATConfig = getAltTextConfig(state, data, deepCopy(rows));
 
     if (ATConfig.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.");

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) {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visdesignlab/upset2-core",
-  "version": "0.1.0",
+  "version": "1.0.0-rc2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -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",

packages/core/src/utils.ts

@@ -4,7 +4,7 @@ import {
 } 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

packages/upset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visdesignlab/upset2-react",
-  "version": "0.1.0",
+  "version": "1.0.0-rc2",
   "license": "MIT",
   "author": "Kiran Gadhave, Jake Wagoner, Nate Lanza",
   "description": "React component for UpSet2 visualization",
@@ -16,7 +16,7 @@
   "homepage": "https://upset.multinet.app/",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "module": "dist/index.mjs",
+  "module": "dist/upset2-react.esm.js",
   "files": [
     "dist",
     "src"
@@ -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": {
@@ -77,7 +79,7 @@
     "@storybook/react-vite": "^8.2.8",
     "@trrack/core": "^1.3.0-beta.1",
     "@trrack/vis-react": "^1.3.0",
-    "@visdesignlab/upset2-core": "*",
+    "@visdesignlab/upset2-core": "^1.0.0-rc2",
     "d3-array": "^3.2.4",
     "d3-drag": "^3.0.0",
     "d3-dsv": "^3.0.1",

packages/upset/src/atoms/elementsSelectors.ts

@@ -216,7 +216,7 @@ export const aggregateSelectedCount = selectorFamily<number, Aggregate>({
   get: (agg: Aggregate) => ({ get }) => {
     let total = 0;
     Object.entries(agg.items.values as { [id: string]: BaseIntersection | Aggregate }).forEach(([id, value]) => {
-      total += Object.hasOwn(value, 'aggregateBy')
+      total += Object.prototype.hasOwnProperty.call(value, 'aggregateBy')
         ? get(aggregateSelectedCount(value as Aggregate))
         : get(subsetSelectedCount(id));
     });

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;
 };

packages/upset/src/components/ElementView/BookmarkChips.tsx

@@ -6,7 +6,7 @@ import { useContext, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import {
-  Bookmark, BookmarkedIntersection, flattenedOnlyRows, isBookmarkedIntersection,
+  Bookmark, BookmarkedIntersection, deepCopy, flattenedOnlyRows, isBookmarkedIntersection,
   isElementSelection,
 } from '@visdesignlab/upset2-core';
 import {
@@ -149,13 +149,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 />}
       />

packages/upset/src/components/ElementView/ElementSidebar.tsx

@@ -66,7 +66,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

packages/upset/src/components/ElementView/ElementVisualization.tsx

@@ -7,7 +7,7 @@ import { VegaLite, View } from 'react-vega';
 import { useRecoilValue } from 'recoil';
 
 import {
-  numericalQueryToBookmark, numericalQueriesEqual, isNumericalQuery, Plot,
+  numericalQueryToBookmark, numericalQueriesEqual, isNumericalQuery, deepCopy, Plot,
   NumericalQuery,
 } from '@visdesignlab/upset2-core';
 import {
@@ -74,7 +74,7 @@ export const ElementVisualization = () => {
   const views = useRef<{view: View, plot: Plot}[]>([]);
   const currentClick = useRef<Plot |null>(null);
   const data = useMemo(() => ({
-    elements: Object.values(structuredClone(items)),
+    elements: Object.values(deepCopy(items)),
   }), [items]);
   const plots = useMemo(() => (scatterplots as Plot[]).concat(histograms), [scatterplots, histograms]);
   const specs = useMemo(() => plots.map((plot) => (

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';

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

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';

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;

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.
  */

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

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;

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;
 `;

packages/upset/src/components/custom/SetLabel.tsx

@@ -27,8 +27,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}

packages/upset/src/components/custom/SetSizeBar.tsx

@@ -51,8 +51,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}

packages/upset/src/components/custom/SvgRectButton.tsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { styled } from '@mui/material';
 import { ComponentProps, FC } from 'react';
 

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;

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,
   }
 }

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.