Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix build errors and update to react 18 #377

Merged
merged 3 commits into from
Aug 9, 2024
Merged

Fix build errors and update to react 18 #377

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e26671b
Update react version to 18 + deps
JakeWags Aug 8, 2024
584fd3c
Update react version in readme
JakeWags Aug 8, 2024
329814a
Update operator for plot information logic
JakeWags Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ UpSet 2.0 can be imported as a React component using:
npm install @visdesignlab/upset2-react
```

Note that UpSet 2.0 requires a react version of 16.0 or higher.
Note that UpSet 2.0 requires a react version of 18.0 or higher.

Import the component using `import { Upset } from @visdesignlab/upset2-react` in your react component.

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"eslint-config-react-app": "^7.0.1",
"vite": "^4.4.9",
"vite-plugin-dts": "^3.5.1",
"vite-tsconfig-paths": "^4.2.0"
"vite-tsconfig-paths": "^4.2.0",
"react": "^18.0.2"
}
}
4 changes: 2 additions & 2 deletions packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
"@visdesignlab/upset2-react": "^0.1.0",
"localforage": "^1.10.0",
"multinet": "0.23.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router-dom": "^6.14.1",
"recoil": "^0.6.1",
"typescript": "^4.5.5",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/defaultConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AttributePlotType, UpsetConfig } from './types';
import { UpsetConfig } from './types';

export const DefaultConfig: UpsetConfig = {
// Calls to the alttext API may error if these are not set
Expand Down
23 changes: 13 additions & 10 deletions packages/upset/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
"build-storybook": "storybook build"
},
"peerDependencies": {
"react": ">=16",
"react-dom": "^17.0.2"
"react": "^18.0.2",
"react-dom": "^18.0.2"
},
"husky": {
"hooks": {
Expand All @@ -48,40 +48,43 @@
"devDependencies": {
"@babel/core": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"@chromatic-com/storybook": "^1",
"@chromatic-com/storybook": "^1.6.1",
"@emotion/babel-plugin": "^11.7.2",
"@emotion/babel-preset-css-prop": "^11.2.0",
"@size-limit/preset-small-lib": "^7.0.5",
"@storybook/react-vite": "^8.0.10",
"@storybook/react-vite": "^8.2.8",
"@types/d3": "^7.1.0",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"husky": "^7.0.4",
"react-is": "^17.0.2",
"size-limit": "^7.0.5",
"storybook": "^8.2.8",
"tsdx": "^0.14.1",
"tslib": "^2.3.1",
"typescript": "^4.5.4",
"react": ">=16",
"react-dom": ">=17.0.2",
"storybook": "^8.0.10"
"typescript": "^4.5.4"
},
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.13.0",
"@fontsource/roboto": "^4.5.1",
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.0",
"@mui/system": "^5.11.0",
"@mui/x-data-grid": "^5.17.12",
"@storybook/react": "^8.2.8",
"@storybook/react-vite": "^8.2.8",
"@trrack/core": "^1.3.0-beta.1",
"@trrack/vis-react": "^1.3.0",
"@visdesignlab/upset2-core": "*",
"d3-array": "^3.2.4",
"d3-selection": "^3.0.0",
"d3-dsv": "^3.0.1",
"d3-drag": "^3.0.0",
"d3-dsv": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-selection": "^3.0.0",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-markdown": "^8.0.7",
"react-spring": "^9.4.4",
"react-vega": "^7.4.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/upset/src/atoms/config/plotInformationAtom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { selector } from 'recoil';
import { upsetConfigAtom } from './upsetConfigAtoms';
import { PlotInformation } from '@visdesignlab/upset2-core';
import { upsetConfigAtom } from './upsetConfigAtoms';

export const plotInformationSelector = selector<PlotInformation>({
key: 'meta-data',
Expand Down
98 changes: 51 additions & 47 deletions packages/upset/src/components/custom/PlotInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import {
Typography,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import { plotInformationSelector } from '../../atoms/config/plotInformationAtom';
import { useRecoilValue } from 'recoil';
import { useContext, useState } from 'react';
import { plotInformationSelector } from '../../atoms/config/plotInformationAtom';
import { ProvenanceContext } from '../Root';

/**
Expand All @@ -35,9 +35,9 @@ type Props = {
* Uses up to 5 tab indices, starting from @param tabIndex
* @param Props @see @type Props
*/
export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
export const PlotInformation = ({ onSave, divider, tabIndex }: Props) => {
/**
* Width of the titles for all the fields in %.
* Width of the titles for all the fields in %.
* Field entry boxes will occupy the rest of the space
*/
const fieldTitleWidth = 30;
Expand All @@ -49,12 +49,12 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
margin: '0.25em 0',
minHeight: '4em',
};

const plotInfoTitle = {
fontSize: '1em',
fontWeight: 'inherit',
color: 'GrayText',
width: fieldTitleWidth + '%',
width: `${fieldTitleWidth}%`,
};

const placeholderText = {
Expand All @@ -75,10 +75,10 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
*/
const generatePlotInformationText: () => string = () => {
// return default string if there are no values filled in
if (Object.values(plotInformation).filter((a) => a.length > 0).length === 0) {
if (Object.values(plotInformation).filter((a) => a && a.length > 0).length === 0) {
JakeWags marked this conversation as resolved.
Show resolved Hide resolved
return `This UpSet plot shows ${placeholderText.description}. The sets are ${placeholderText.sets}. The items are ${placeholderText.items}`;
}

let str: string = '';
if (plotInformation.description !== '') {
str += `This UpSet plot shows ${plotInformation.description}. `;
Expand All @@ -89,23 +89,22 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
if (plotInformation.items !== '') {
str += `The items are ${plotInformation.items}.`;
}

return str;
};

/**
* Commits changes to the plot information if the new state is different from the old state.
* If a commit occurs, records a trrack action.
* If a commit occurs, records a trrack action.
*/
const commitEdits = () => {
const commitEdits = () => {
if ( // Need to manually check for changes since the state is an object
plotInformation.caption !== plotInformationState.caption
|| plotInformation.title !== plotInformationState.title
|| plotInformation.description !== plotInformationState.description
|| plotInformation.sets !== plotInformationState.sets
|| plotInformation.items !== plotInformationState.items
)
actions.setPlotInformation(plotInformation);
) actions.setPlotInformation(plotInformation);
if (onSave) onSave();
setEditing(false);
};
Expand All @@ -115,71 +114,76 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
<Box
tabIndex={tabIndex}
onClick={() => setEditing(true)}
sx={{
sx={{
cursor: 'pointer',
border: '2px solid white', // Prevent resize on hover
padding: '.2em',
'&:hover': {
border: '2px inset #ddd',
}
border: '2px inset #ddd',
},
}}
>
<div style={{height: '1.6em'}}>
<div style={{ height: '1.6em' }}>
<Typography variant="h2" fontSize="1.2em" fontWeight="inherit" height="1.4em" padding="0">
{plotInformation.title ?? "[Title]"}
{plotInformation.title ?? '[Title]'}
</Typography>
<Button
aria-label='Edit Plot Information'
style={{float: 'right', position: 'relative', bottom: '40px'}}
<Button
aria-label="Edit Plot Information"
style={{ float: 'right', position: 'relative', bottom: '40px' }}
tabIndex={tabIndex + 1}
>
<Icon style={{overflow: 'visible'}}>
<Icon style={{ overflow: 'visible' }}>
<EditIcon />
</Icon>
</Button>
</div>
{divider}
<Typography>{plotInformation.caption ?? "[Caption]"}</Typography>
<Typography>{plotInformation.caption ?? '[Caption]'}</Typography>
<br />
<Typography>{generatePlotInformationText()}</Typography>
</Box>
) : (
<Box tabIndex={tabIndex}>
<Button
tabIndex={tabIndex + 6}
color="primary"
style={{float: 'right'}}
<Button
tabIndex={tabIndex + 6}
color="primary"
style={{ float: 'right' }}
onClick={commitEdits}
>Save</Button>
>
Save
</Button>
<Box>
<TextField
tabIndex={tabIndex + 1}
fullWidth
variant='standard'
style={{marginBottom: "5px"}}
tabIndex={tabIndex + 1}
fullWidth
variant="standard"
style={{ marginBottom: '5px' }}
value={plotInformation.title}
onChange={(e) => setPlotInformation({ ...plotInformation, title: e.target.value })}
placeholder='Title'
placeholder="Title"
inputProps={{
disableUnderline: true,
style: {
padding: "1px",
height: "1.4em",
fontSize: "1.2em",
fontWeight: "inherit",
border: "none",
}}}/>
<TextField
padding: '1px',
height: '1.4em',
fontSize: '1.2em',
fontWeight: 'inherit',
border: 'none',
},
}}
/>
<TextField
tabIndex={tabIndex + 2}
fullWidth multiline
fullWidth
multiline
inputProps={{
rows: 3,
// We need to override the default overflow prop (hidden), then still deny x scrolling
style: {height: "4em", overflow: "auto", overflowX: "hidden"}
style: { height: '4em', overflow: 'auto', overflowX: 'hidden' },
}}
value={plotInformation.caption}
onChange={(e) => setPlotInformation({ ...plotInformation, caption: e.target.value })}
placeholder='Caption'
placeholder="Caption"
/>
</Box>
<Box>
Expand All @@ -190,7 +194,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
<TextField
tabIndex={tabIndex + 3}
onChange={(e) => setPlotInformation({ ...plotInformation, description: e.target.value })}
sx={{ width: 100 - fieldTitleWidth + '%' }}
sx={{ width: `${100 - fieldTitleWidth}%` }}
multiline
InputLabelProps={{ shrink: true }}
value={plotInformation.description}
Expand All @@ -208,7 +212,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
<TextField
tabIndex={tabIndex + 4}
onChange={(e) => setPlotInformation({ ...plotInformation, sets: e.target.value })}
sx={{ width: 100 - fieldTitleWidth + '%' }}
sx={{ width: `${100 - fieldTitleWidth}%` }}
multiline
InputLabelProps={{ shrink: true }}
value={plotInformation.sets}
Expand All @@ -226,7 +230,7 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
<TextField
tabIndex={tabIndex + 5}
onChange={(e) => setPlotInformation({ ...plotInformation, items: e.target.value })}
sx={{ width: 100 - fieldTitleWidth + '%' }}
sx={{ width: `${100 - fieldTitleWidth}%` }}
multiline
InputLabelProps={{ shrink: true }}
value={plotInformation.items}
Expand All @@ -239,5 +243,5 @@ export const PlotInformation = ({onSave, divider, tabIndex}: Props) => {
<Typography>{generatePlotInformationText()}</Typography>
</Box>
)
)
}
);
};
3 changes: 1 addition & 2 deletions packages/upset/src/provenance/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import {
AggregateBy, Plot, PlotInformation, SortBy, SortByOrder, SortVisibleBy, UpsetConfig, DefaultConfig, Row,
AltText
AggregateBy, Plot, PlotInformation, SortByOrder, SortVisibleBy, UpsetConfig, DefaultConfig, Row, AltText,
} from '@visdesignlab/upset2-core';

import { Registry, initializeTrrack } from '@trrack/core';
Expand Down
Loading