Merge pull request #361 from visdesignlab/react-component

React component

.github/workflows/publish_npm.yml

@@ -0,0 +1,25 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [released]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Copy README
+        run: cp README.md packages/upset/README.md
+      - name: Extract tag name
+        id: get_tag
+        run: echo "TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+      - name: Change directory and publish
+        run: cd packages/upset && npm publish --tag ${{ steps.get_tag.outputs.TAG }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

e2e-tests/provenance.spec.ts

@@ -39,8 +39,8 @@ test('Selection History', async ({ page }) => {
   await page.getByLabel('Open additional options menu').click();
   await page.getByLabel('Open history tree sidebar').click();
 
-  const schoolIntersection = page.locator('.css-1kek4un-Y > g:nth-child(3) > rect').first();
-  const duffFanIntersection = page.locator('g:nth-child(7) > .css-1kek4un-Y > g:nth-child(3) > rect').first();
+  const schoolIntersection = page.locator('#Subset_School > g:nth-child(3) > rect');
+  const duffFanIntersection = page.locator('[id="Subset_Duff_Fan\\~\\&\\~Male"] > g:nth-child(3) > rect');
 
   // Testing history for a subset selection & deselection
   await page.locator('g > circle').first().click();
@@ -58,16 +58,14 @@ test('Selection History', async ({ page }) => {
   // Check that selections are maintained after de-aggregation
   await schoolIntersection.click();
   await page.getByRole('radio', { name: 'None' }).check();
-  await page.locator('.css-zf6412').click();
+  await schoolIntersection.click();
   await expect(page.getByText('Deselect intersection').nth(2)).toBeVisible();
 
   // Check that selections can be reverted & start a new history tree branch
   await page.locator('g:nth-child(10) > circle').click();
-  await page.locator('.css-zf6412').click();
-  await await duffFanIntersection.click();
-  await expect(page.getByText('Deselect intersection')).toBeVisible();
-  await expect(page.getByText('Select intersection "School')).toBeVisible();
-
+  await schoolIntersection.click();
+  await duffFanIntersection.click();
+  await expect(page.getByLabel('History Sidebar').getByText('Select intersection "School"')).toBeVisible();
   // Check that deselection triggered by element view unbookmarking is reflected in history tree.
   // Also tests that the bookmarking & unbookmarking is trracked
   await page.getByLabel('Open element view sidebar').click();
@@ -77,9 +75,9 @@ test('Selection History', async ({ page }) => {
   await page.getByLabel('Open history tree sidebar').click();
 
   await expect(page.getByText('Unbookmark Duff Fan & Male')).toBeVisible();
-  await expect(page.getByText('Deselect intersection').nth(1)).toBeVisible();
+  await expect(page.getByText('Deselect intersection')).toBeVisible();
   await expect(page.getByText('Bookmark Duff Fan & Male', { exact: true })).toBeVisible();
-  await expect(page.getByText('Select intersection "School')).toBeVisible();
+  await expect(page.getByLabel('History Sidebar').getByText('Select intersection "School"')).toBeVisible();
 });
 
 /**

package.json

@@ -38,13 +38,13 @@
     "singleQuote": true,
     "trailingComma": "all"
   },
-  "packageManager": "[email protected].17",
+  "packageManager": "[email protected].19",
   "dependencies": {
+    "@playwright/test": "^1.15.0",
     "@vitejs/plugin-react": "^4.0.4",
     "eslint-config-react-app": "^7.0.1",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.5.1",
-    "vite-tsconfig-paths": "^4.2.0",
-    "@playwright/test": "^1.15.0"
+    "vite-tsconfig-paths": "^4.2.0"
   }
 }

packages/app/src/components/Body.tsx

@@ -15,12 +15,11 @@ import { loadingAtom } from '../atoms/loadingAtom';
 import { Backdrop, CircularProgress } from '@mui/material';
 
 type Props = {
-  yOffset: number;
   data: any;
   config?: UpsetConfig;
 };
 
-export const Body = ({ yOffset, data, config }: Props) => {
+export const Body = ({ data, config }: Props) => {
   const { workspace, table, sessionId } = useRecoilValue(queryParamAtom);
   const provObject = useContext(ProvenanceContext);
   const encodedData = useRecoilValue(encodedDataAtom);
@@ -106,14 +105,14 @@ export const Body = ({ yOffset, data, config }: Props) => {
           </Backdrop>
           <Upset
             data={data}
-            loadAttributes={3}
-            yOffset={yOffset === -1 ? 0 : yOffset}
             extProvenance={provObject}
             config={config}
             provVis={provVis}
             elementSidebar={elementSidebar}
             altTextSidebar={altTextSidebar}
             generateAltText={generateAltText}
+            visualizeUpsetAttributes
+            allowAttributeRemoval
           />
         </div>
       }

packages/app/src/components/Home.tsx

@@ -1,4 +1,3 @@
-import { css } from "@emotion/css"
 import { Box, Card, CardActionArea, CardContent, CardMedia, Link, Typography } from "@mui/material"
 
 export const Home = () => {

packages/app/src/components/Root.tsx

@@ -79,7 +79,7 @@ export const Root = ({provenance, actions, data, config}: Props) => {
                     <Header data={data}/>
                 </Box>
                 {data === null && <Home />}
-                <Body yOffset={headerHeight} data={data} config={config}/>
+                <Body data={data} config={config}/>
                 <Footer />
             </div>
         </ProvenanceContext.Provider>

packages/core/package.json

@@ -45,7 +45,10 @@
     "typescript": "^4.5.4"
   },
   "dependencies": {
-    "d3": "^7.3.0",
+    "d3-array": "^3.2.4",
+    "d3-selection": "^3.0.0",
+    "d3-dsv": "^3.0.1",
+    "d3-drag": "^3.0.0",
     "hyperid": "^3.0.0"
   }
 }

packages/core/src/index.ts

@@ -1,15 +1,3 @@
-import * as d3 from 'd3';
-
-import { process } from './process';
-
-export async function test() {
-  const data = await d3.dsv(
-    ';',
-    'https://raw.githubusercontent.com/VCG/upset/master/data/movies/movies.csv',
-  );
-  return process(data, meta as any);
-}
-
 export * from './process';
 export * from './types';
 export * from './aggregate';

packages/core/src/process.ts

@@ -1,10 +1,11 @@
+import { DSVRowArray } from 'd3-dsv';
+
 import {
-  DSVRowArray, max, mean, median, min, quantile,
-} from 'd3';
+ max, mean, median, min, quantile,
+} from 'd3-array';
 
 import {
   AttributeList,
-  BaseIntersection,
   ColumnDefs,
   ColumnName,
   CoreUpsetData,

packages/upset/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {}, // Available only when reactDocgen is set to 'react-docgen-typescript'
+    skipCompiler: true,
+  },
+};
+
+export default config;