Data Catalog enhancement with floating filter sidebar #918

sandrahoang686 · 2024-04-12T20:13:09Z

Related Ticket: #915

Description of Changes

This pull request implements the new Data Catalog View with the filters sidebar

Notes & Questions About Changes

Sidebar is not sticky, wasn't able to get to implementing, should we create a ticket for this as a fast follow @j08lue ?
Some modularization and breakout was done on the card components but not much to the Data Catalog feature so the refactor ticket still needs to stay in progress

Validation / Testing

Shoulds:

Selecting multiple of the same taxonomy group should execute OR logic
Selecting across taxonomy groups should execute AND logic
Tags should persist when page refreshes
Tags should add/remove correctly when updating filters
Clicking on the data catalog card and then click on the pills in the info view should take you back to the data catalog filters page with the correct filters checked and you should be able to add/remove filters from there

Should Nots:

These changes should not affect the /exploration?datasets=%5B%5D view
These changes should not affect other any other card styles

netlify · 2024-04-12T20:13:25Z

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	`278125c`
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/662a2395a286180008493350
😎 Deploy Preview	https://deploy-preview-918--veda-ui.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.

sandrahoang686 · 2024-04-18T02:10:08Z

@faustoperez @j08lue this is still WIP but I could use an early user flow review of the new filters menu (cards are still actively being worked on and there are some quirks I still need to figure with the filters). A few questions and things to note which I wanted to flag right now.

In the current view, a user can only select one value per each taxonomy filter. With this new view, that changes, a user can select multiple values per taxonomy filter. This is tricky to figure out with how we have the routing url params set up because right now the routing params works with only selecting a single value per each taxonomy group. But i'm guessing expected behavior is that we want mutually exclusive results vs non mutually exclusive results? is this correct?
Should the filter menu's default behavior be opened or closed?
When adding and removing tags, this causes the menus to move up and down, is this okay?

faustoperez · 2024-04-18T08:30:40Z

Great progress @sandrahoang686 ! 🙌

But i'm guessing expected behavior is that we want mutually exclusive results vs non mutually exclusive results? is this correct?

Not sure I'm following but the expected behavior is that multiple parameters can be selected at the same time.

Should the filter menu's default behavior be opened or closed?

I think it should be closed by default.

When adding and removing tags, this causes the menus to move up and down, is this okay?

We could put the filter tags at the top of the dataset results column to avoid this.

I have other comments about spacing, hover states, paddings, etc., please let me know when the work is finished to review those 👍 .

Thanks!

sandrahoang686 · 2024-04-18T13:17:59Z

Checkin 4/18 Update:
@faustoperez @j08lue

Remove count and move tags above results
The results from the filters should be non-mutually exclusive (OR not and) @faustoperez to confirm

j08lue · 2024-04-18T13:42:17Z

The results from the filters should be non-mutually exclusive (OR not AND)

I would say additive within earth filter, exclusive between them, i.e. source=(NASA OR NOAA) AND gas=CO2.

j08lue · 2024-04-22T08:22:29Z

I know the AND/OR logic really added complexity wrt routing... Hope it will not be too much headache to resolve it.

A quick note - an important feature was that the filter sidebar should be fixed, so it is visible as you scroll down longer lists of datasets. Just wanted to be sure that you are aware of this detail, @sandrahoang686, so it does not come up only at the very end. 🙏

…g...

…anges

…my group name

app/scripts/components/common/card/styles.tsx

hanbyul-here

I can do more review but that might not be what this change needs at this point.
Two blockers I see from this PR are 1. https://github.com/NASA-IMPACT/veda-ui/pull/918/files#r1578769216 2. https://github.com/NASA-IMPACT/veda-ui/pull/918/files#diff-d569f507e8f543c166ce6a250b3c64a0b1b997d8d59ee996e0d390d3af4636bdR288 (See the review comment) If you have bandwidth, check this change in GHG context to see if there is anything you didn't intend is happening there.

There are improvements we can bring regarding styles, I left comments about hard-coded values. I can see that the page will benefit from subtle animations since there are many moving pieces on the page. These can be followed up while people are testing the main functionality, so once two blockers are cleared, feel free to merge it.

hanbyul-here · 2024-04-25T02:37:08Z

app/scripts/components/common/form/checkable-filter/index.tsx

+
+const FilterMenu = styled.div`
+  border: 2px solid ${themeVal('color.base-200')};
+  border-radius: 4px;


Does this need to be this hard-coded number? Other elements of Card is using (themeVal('shape.rounded'), 2) for its border-radius value and it might increase the consistency of the style if we stick with using themeVal value.

hanbyul-here · 2024-04-25T02:38:23Z

app/scripts/components/common/form/checkable-filter/index.tsx

+const FilterMenu = styled.div`
+  border: 2px solid ${themeVal('color.base-200')};
+  border-radius: 4px;
+  padding: 12px;


Same with padding and margins. Across the application, glsp or variableGlsp are used for spacing.

hanbyul-here · 2024-04-25T03:19:11Z

app/scripts/components/data-catalog/index.tsx

+      />
+
+      <FeaturedDatasets />
+      <BrowseSection>


This section leaves no margin on top, makes the general style not complete. (It is not obvious on UI because featured-list has margin at the bottom.)

hanbyul-here · 2024-04-25T03:21:23Z

app/scripts/components/data-catalog/index.tsx

-                                  {topics.map((t) => (
+                            />
+                            <VerticalDivider variation='light' />
+                            {/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */}


(Not introduced by this PR but) might be time to just get rid of this and close this issue

hanbyul-here · 2024-04-25T03:24:23Z

app/scripts/components/data-catalog/filters-control.tsx

+
+const ControlsWrapper = styled.div<{ width?: string; }>`
+  min-width: 20rem;
+  width: ${props => props.width ?? '3rem'};


Am I reading right that width is smaller than min-width? then dos this style do anything?

j08lue · 2024-04-25T07:14:27Z

If you have bandwidth, check this change in GHG context to see if there is anything you didn't intend is happening there.

Good call, @hanbyul-here. I created a GHG Center feature preview here:

[DO NOT MERGE] Data catalog preview US-GHG-Center/veda-config-ghg#340

hanbyul-here · 2024-04-25T08:50:30Z

One more thing for follow up. Footer action is not sticking to the bottom.

j08lue

The EMIT dataset is missing in the GHG Center preview of this feature. I have a suspicion that this is related to the disableExplore: true status of this dataset.

US-GHG-Center/veda-config-ghg#340 (comment)

We need to make sure all datasets are shown in the main catalog.

j08lue · 2024-04-25T09:18:30Z

From my limited understanding, it seems like the catalog uses allDatasetsWithEnhancedLayers for the datasets,

veda-ui/app/scripts/components/exploration/data-utils.ts

Lines 48 to 59 in 4c98710

    
           export const allDatasetsWithEnhancedLayers: DatasetDataWithEnhancedLayers[]  = allDatasets.map(currentDataset => { 
        
             return { 
        
               ...currentDataset, 
        
               layers: currentDataset.layers.map(l => ({ 
        
                 ...l, 
        
                 parentDataset: { 
        
                   id: currentDataset.id, 
        
                   name: currentDataset.name 
        
                 } 
        
               })) 
        
             }; 
        
           });

which is an extended version of allDatasets and that filters out those with disableExplore: true:

veda-ui/app/scripts/components/exploration/data-utils.ts

Lines 40 to 42 in 4c98710

    
           export const allDatasets = Object.values(veda_datasets) 
        
             .map((d) => d!.data) 
        
             .filter((d) => !d.disableExplore);

For the main catalog, we should not apply that filter.

j08lue

All datasets now show up in the main catalog and it looks nice both in our mock and the GHG Center preview. Good to go!

## 🎉 Features - Zoom in AOI, TOI when analysis is run in #906 - Add custom javascript injection #846 - ADR for V2 Refactor: #875 - Open all external links in a new tab in #870 - Include dataset id to filter layers in #910 - Some datasets can only be analyzed with layers from the same source in #913 - Create minimal partial data layer scaffold starting off with Data Catalog for VEDA2 Refactor in #893 - Add analysis preset in #921 ## 🚀 Improvements - Chart style improvement in #903 - Data Catalog enhancement with floating filter sidebar in #918 - Sum as statistics option in #925 - ## 🐛 Fixes - Sort featured stories based on publication date in descending order in #907 - Replace latency with temporalResolution in layer info in #898 - Add a workaround for Safari scroll problem in #909 - Handle empty result in #922

sandrahoang686 added 20 commits April 24, 2024 13:50

Create new filters file

7a50528

Start building out form component

976c28e

Progress on filters

572d88e

Add tags and more polish on filters

abaabb8

Update search and tags logic and add optimization hooks

4b4d7d8

Organize cards logic to start modularizing...

bb77a5d

partially update some routing logic...

e61da95

Update cards naming and add new card type

ac8d097

Fix more cards types... and add taxonomy tags to cards

ca927cb

Moved tags and got to a place where globally selected tags are workin…

d3f47fb

…g...

successfully moved tags up

b60058b

Add pills, change default behavior of filters

80a1f6f

global filters working again

1afb407

AND, OR operators work for multiple taxonomy selections

56ca482

fix useCallback sideEffects, issue with clearing route fixed?

652c95b

Move prepareDatasets to useEffect to update datasets to display on ch…

88c2b37

…anges

Fix issue where some options were not displaying with space in taxono…

64a1b6d

…my group name

Tidy up Actions.TAXONOMY and include multiselect action

dd6735c

Make new view the main index file

c013ca2

Fix conflicts

44bc781

sandrahoang686 force-pushed the feature/data-catalog-floating-filter branch from 42c9731 to 44bc781 Compare April 24, 2024 18:24

sandrahoang686 added 3 commits April 24, 2024 15:57

Fix issue of routing from dataset info page and organize cards better

3ab4444

Remove some comments and update some styles

f4c3e87

More cleaning and add more memoization

97d324f

sandrahoang686 requested review from hanbyul-here, j08lue and faustoperez April 24, 2024 21:08

sandrahoang686 marked this pull request as ready for review April 24, 2024 21:09

hanbyul-here reviewed Apr 25, 2024

View reviewed changes

app/scripts/components/common/card/styles.tsx Show resolved Hide resolved

Bring card styles back to card file to support instances

4fade61

hanbyul-here reviewed Apr 25, 2024

View reviewed changes

j08lue mentioned this pull request Apr 25, 2024

[DO NOT MERGE] Data catalog preview US-GHG-Center/veda-config-ghg#340

Closed

hanbyul-here added 2 commits April 25, 2024 17:31

Give proper spacing

c3e08d3

Revert the cardlist style back

19f56f7

j08lue requested changes Apr 25, 2024

View reviewed changes

Separate alldatasets from allexploredataset

278125c

j08lue approved these changes Apr 25, 2024

View reviewed changes

hanbyul-here merged commit 8c54113 into main Apr 25, 2024
8 checks passed

hanbyul-here deleted the feature/data-catalog-floating-filter branch April 25, 2024 10:32

j08lue mentioned this pull request Apr 25, 2024

[Data Catalog] Follow up on missing details #926

Closed

1 task

hanbyul-here mentioned this pull request May 1, 2024

Bump up the version to 4.3 #931

Merged

sandrahoang686 mentioned this pull request May 6, 2024

Floating Data Catalog Filters Sidebar Follow-up and starting some cleaning and modularizing #930

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Data Catalog enhancement with floating filter sidebar #918

Data Catalog enhancement with floating filter sidebar #918

sandrahoang686 commented Apr 12, 2024 •

edited

Loading

netlify bot commented Apr 12, 2024 •

edited

Loading

sandrahoang686 commented Apr 18, 2024 •

edited

Loading

faustoperez commented Apr 18, 2024

sandrahoang686 commented Apr 18, 2024

j08lue commented Apr 18, 2024

j08lue commented Apr 22, 2024

hanbyul-here left a comment •

edited

Loading

hanbyul-here Apr 25, 2024

hanbyul-here Apr 25, 2024

hanbyul-here Apr 25, 2024

hanbyul-here Apr 25, 2024

hanbyul-here Apr 25, 2024

j08lue commented Apr 25, 2024

hanbyul-here commented Apr 25, 2024 •

edited

Loading

j08lue left a comment

j08lue commented Apr 25, 2024 •

edited

Loading

j08lue left a comment

Data Catalog enhancement with floating filter sidebar #918

Data Catalog enhancement with floating filter sidebar #918

Conversation

sandrahoang686 commented Apr 12, 2024 • edited Loading

Description of Changes

Notes & Questions About Changes

Validation / Testing

netlify bot commented Apr 12, 2024 • edited Loading

✅ Deploy Preview for veda-ui ready!

sandrahoang686 commented Apr 18, 2024 • edited Loading

faustoperez commented Apr 18, 2024

sandrahoang686 commented Apr 18, 2024

j08lue commented Apr 18, 2024

j08lue commented Apr 22, 2024

hanbyul-here left a comment • edited Loading

Choose a reason for hiding this comment

hanbyul-here Apr 25, 2024

Choose a reason for hiding this comment

hanbyul-here Apr 25, 2024

Choose a reason for hiding this comment

hanbyul-here Apr 25, 2024

Choose a reason for hiding this comment

hanbyul-here Apr 25, 2024

Choose a reason for hiding this comment

hanbyul-here Apr 25, 2024

Choose a reason for hiding this comment

j08lue commented Apr 25, 2024

hanbyul-here commented Apr 25, 2024 • edited Loading

j08lue left a comment

Choose a reason for hiding this comment

j08lue commented Apr 25, 2024 • edited Loading

j08lue left a comment

Choose a reason for hiding this comment

sandrahoang686 commented Apr 12, 2024 •

edited

Loading

netlify bot commented Apr 12, 2024 •

edited

Loading

sandrahoang686 commented Apr 18, 2024 •

edited

Loading

hanbyul-here left a comment •

edited

Loading

hanbyul-here commented Apr 25, 2024 •

edited

Loading

j08lue commented Apr 25, 2024 •

edited

Loading