UI redo dec 24 #439

NateLanza · 2025-01-07T21:29:21Z

Does this PR close any open issues?

Closes #427
Closes #422
Closes #421
Closes #403

Give a longer description of what this PR addresses and why it's needed

Makes a large number of changes to the Upset UI:

Moves load data into the meatball menu
Moves data table to hamburger, includes link to it in the accessibility statement
Makes “Settings” sidebar title same style as right sidebars
Makes settings collapsible via hamburger icon
Changes hamburger in header to gear and re-orders contents
Corrects font size for alt text sidebar
Hides 2nd agg until 1st agg is selected
Makes sure each section title in the settings menu is an h2 with proper weight & size
Brings back logo removed for CHI in top left; changes it to the VDL flask
- Re-adds flask icon in footer
Uses emdash between Upset and Vis.. in title
Improves vertical centering of attribute col titles
Right-aligns toggles in settings sidebar
Makes sidebar expand button match close button, on the same size

Provide pictures/videos of the behavior before and after these changes (optional)

(not included as the changes are comprehensively covered above and probably won't fit in a gif)

Have you added or updated relevant tests?

Yes
No changes are needed

…overlap

…hidden sets

…ting

…t, and re-add logo to footer

netlify · 2025-01-07T21:29:37Z

✅ Deploy Preview for upset2 ready!

Name	Link
🔨 Latest commit	`0f090aa`
🔍 Latest deploy log	https://app.netlify.com/sites/upset2/deploys/6781b1d6776b8c0008bd9faa
😎 Deploy Preview	https://deploy-preview-439--upset2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…ments

JakeWags

Some minor changes, overall looks great.

In general and in the future, I would suggest pushing the lint fixes in a separate PR that has no or little new content added. With the linting (for /app) in here, it became very time consuming to differentiate new code/changes that weren't only linting fixes.

e2e-tests/elementView.spec.ts

packages/app/.eslintrc.js

packages/app/src/utils/dataTableLink.tsx

packages/app/src/index.css

packages/upset/src/atoms/dimensionsAtom.ts

packages/upset/src/components/Header/AttributeButton.tsx

packages/upset/src/components/ProvenanceVis.tsx

JakeWags · 2025-01-10T06:07:20Z

packages/upset/src/components/Root.tsx

+  // Sets the footer height atom if provided as an argument
+  const setFooterHeight = useSetRecoilState(footerHeightAtom);
+  // Footer height needs to be doubled to work right... idk why that is!
+  useEffect(() => { if (footerHeight) setFooterHeight(2 * footerHeight); }, [footerHeight]);


If you were to mult by 1 and simply double the variable value, would it work? Curious to see what could be causing this type of behavior

Wdym by this? How is multiplying by 1 and doubling any different from multiplying by 2?

It's not any different, I am just curious if there is some strange order of operations that necessitates the footerHeight being doubled.

packages/upset/src/components/SettingsSidebar.tsx

packages/upset/src/components/custom/theme/heading.tsx

NateLanza · 2025-01-10T21:17:39Z

In general and in the future, I would suggest pushing the lint fixes in a separate PR that has no or little new content added. With the linting (for /app) in here, it became very time consuming to differentiate new code/changes that weren't only linting fixes.

Absolutely, I did not process that that'd be an issue. Will do in the future.

Nate Lanza added 30 commits December 14, 2024 14:39

ESLint Footer, Header, and Root in App

5073c01

ESLint Body

ffc28cb

Remove useless useEffect

0b4fd4c

Unify sidebar into 1 element with shadow; fix title appearance

729d1cb

Add footerHeight param to Upset component & prevent settings sidebar …

7fc6918

…overlap

Create generic sidebar component

3b0d747

Apply generic sidebar to AltTextSidebar

e731640

Pass tab index for close button through

0131e84

Bugfix for empty div remaining after closing sidebar

f90aa97

Use generic sidebar for Element Sidebar

c9f1ffc

Add multiselect in settings for visible sets

c056a53

Add settings control for visible atts

b869aee

Bugfixes: Attributes multiselect label & order of attributes in plot

c646102

Remove attribute dropdown from header

6dfd952

Abstract toggle switches in the settings sidebar

3f58de4

UI (toggles) for general settings in sidebar

0ec4ce8

Add config fields for intersection size lables, set size labels, and …

ec2d6ae

…hidden sets

Ensure initializeProvenanceTracking setter converts config before set…

35762ee

…ting

Add config fields & selectors for general plot settings

ecba999

Hide hidden sets & intersection size labels according to config settings

50e16eb

Matrix & set header JSDoc

7cc775c

Size labels for visible sets; responsive to global setting

8477d9d

Bugfixes for set size bar: size black/white gap and label padding

cf1fe83

Move "Load Data" into the meatball menu

07bbc86

ESLint App.tsx

6f62a63

Strict type for data & move dispatchState to utils

935eb65

ESLint AccessibilityStatement.tsx

a195a80

Abstract link to data table, add data table to accessibility statemen…

588e540

…t, and re-add logo to footer

ESLint datatable.tsx

4ba509a

Standardize heading styles for the upset package

5c47334

NateLanza added 10 commits December 22, 2024 14:32

Change hamburger menu icon in header to gear; re-rder elements

2b9d380

Change alttext font size to match rest of UI

219e675

Hide 2nd agg if 1st agg is none

252f1bd

Increase font size & weight for settings sidebar section labels

42c7672

Bump font size and weight a lil more for settings sidebar section labels

63b9d11

Update title: emdash, flask logo, and min width at which to show

c165a69

Re-add 1px spacing between set size bars

1dce955

Correct vertical centering of column titles

46e54ea

Right-align settings sidebar toggles

625448e

Reposition & resize the expand sidebar button

ad17b39

Absolute position of sidebar buttons so they don't displace other ele…

959a825

…ments

NateLanza self-assigned this Jan 8, 2025

NateLanza added 7 commits January 7, 2025 17:34

Bugfix: Sidebar aria-label

ffa2d45

Bugfix: z-index for sidebar and drawer

a723346

Fix attribute dropdown tests for PR 439

cf19169

Fix datatable test for PR 439

064918b

Bugfix: disinclude Degree and Deviation from plottable attributes

c93cf45

Fix element view test for PR 439

a5e2095

eslint provenance.spec.ts

1d171a5

NateLanza marked this pull request as ready for review January 8, 2025 01:14

NateLanza requested review from JakeWags and JackWilb January 8, 2025 01:14

Fix Settings header and user icon padding

f2c3ce2

JakeWags requested changes Jan 10, 2025

View reviewed changes

NateLanza added 2 commits January 10, 2025 14:31

Use Sidebar component for provenance vis

0f7d2f2

Address Jake's review for PR 439

fa24ff9

NateLanza requested a review from JakeWags January 10, 2025 21:35

Rename dataTableLink.tsx to DataTableLink.tsx

0f090aa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI redo dec 24 #439

UI redo dec 24 #439

NateLanza commented Jan 7, 2025 •

edited

Loading

netlify bot commented Jan 7, 2025 •

edited

Loading

JakeWags left a comment

JakeWags Jan 10, 2025

NateLanza Jan 10, 2025

JakeWags Jan 10, 2025

NateLanza commented Jan 10, 2025

UI redo dec 24 #439

Are you sure you want to change the base?

UI redo dec 24 #439

Conversation

NateLanza commented Jan 7, 2025 • edited Loading

Does this PR close any open issues?

Give a longer description of what this PR addresses and why it's needed

Provide pictures/videos of the behavior before and after these changes (optional)

Have you added or updated relevant tests?

netlify bot commented Jan 7, 2025 • edited Loading

✅ Deploy Preview for upset2 ready!

JakeWags left a comment

Choose a reason for hiding this comment

JakeWags Jan 10, 2025

Choose a reason for hiding this comment

NateLanza Jan 10, 2025

Choose a reason for hiding this comment

JakeWags Jan 10, 2025

Choose a reason for hiding this comment

NateLanza commented Jan 10, 2025

NateLanza commented Jan 7, 2025 •

edited

Loading

netlify bot commented Jan 7, 2025 •

edited

Loading