Exploration page (E&A merge) #598

danielfdsilva · 2023-08-02T10:57:33Z

Is PR is serving as a base for the development on the new Exploration and Analysis page. Branching in/out of this.

During development, the new page is accessible at /exploration.

The sandbox code is still present but will be removed eventually. Disregard during reviews.

To Do

TBD

[E & A] - Navigation helpers / wizard to assist the user #519

netlify · 2023-08-02T10:57:39Z

✅ Deploy Preview for veda-ui ready!

Name	Link
🔨 Latest commit	`eb37147`
🔍 Latest deploy log	https://app.netlify.com/sites/veda-ui/deploys/6576e91539fe4a0008bfa7e9
😎 Deploy Preview	https://deploy-preview-598--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.

nerik

This is really impressive work 👏

There are a few technical things that we may want to discuss further, otherwise I have some feedback on useability:

Disable text selection when dragging datasets (on datasets names, etc);
Users should be able to change L and R markers at the same time by dragging the inner partM
TBH I'm not 100% sure what L, R and P markers do. And I think it could be useful for the letters to be explained, I mean I guess that L and R means Right and Left, but of what ? Could we use icons to aid understanding of this?
The timeline whole area should be draggable (maybe it's already the case but I didn't find how);
The whole timeline is zoomable, which is pretty awesome. However I found out about this by reading the code and performing an horizontal pinch on my trackpad with the Alt key pressed. I think we could use some improved discoverability of the feature;
When selecting an L/R range that is displayed outside the current timeline viewport, it should automatically move the timeline viewport there;
Should the date range picker automatically open by default on the start date of the timeline viewport, rather than today?;

nerik · 2023-08-03T12:01:27Z

app/scripts/components/exploration/index.tsx

+    width: 5rem;
+    margin: 0 auto -1.25rem auto;
+    padding: 0.25rem 0;
+    z-index: 5000;


Could be the subject of another PR, but I'd very much like for this project to have a set of z indices defined by the theme that we could stick to.

Actually there's a list defined in the theme. We just haven't been using it. 😢

veda-ui/app/scripts/styles/theme.ts

Lines 9 to 19 in 1ced268

zIndices: {

hide: -1,

docked: 10,

sticky: 900,

dropdown: 1000,

overlay: 1300,

modal: 1400,

popover: 1500,

skipLink: 1600,

toast: 1700,

tooltip: 1800

nerik · 2023-08-03T12:05:36Z

app/scripts/components/exploration/timeline.tsx

@@ -0,0 +1,472 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';


This file is getting on the larger side. Maybe consider starting with extracting away Controls and DatasetList?

Yup. Still need to split some of the files

nerik · 2023-08-03T12:16:01Z

app/scripts/components/exploration/atoms.ts

+});
+// Width of the whole timeline item. Set via a size observer and then used to
+// compute the different element sizes.
+export const timelineWidthAtom = atom<number | undefined>(undefined);


I think I could use a high-level explanation as to why this is part of the app state. Isn't that defined solely by the available witdh of the timeline viewport?

There are several elements that need to know the width (specially the svg components), so I thought of storing the size in an atom and access it via a hook instead of having to pass width to every single component (this is something I still have to refactor) - Thoughts on the approach?

nerik · 2023-08-03T12:30:32Z

app/scripts/components/exploration/timeline.tsx

+export default Timeline;
+
+function DatasetList(props: any) {
+  const { datasets, ...rest } = props;


I would recommend against passing down datasets, and directly use the atom value instead:

Suggested change

const { datasets, ...rest } = props;

const datasets = useAtomValue(timelineDatasetsAtom);

IMHO it only makes sense to pass down a prop containing data when the component renders an element of an array, ie <Rabbit rabbitData={rabbits[i]} />

nerik · 2023-08-03T12:31:35Z

app/scripts/components/exploration/timeline.tsx

+function DatasetList(props: any) {
+  const { datasets, ...rest } = props;
+
+  const [orderedDatasets, setOrderDatasets] = useState(datasets);


Instead of duplicating datasets and create potential syncing issues, why not altering the order of datasets on the atom directly?

nerik · 2023-08-03T12:37:05Z

app/scripts/components/exploration/timeline-head.tsx

+  );
+}
+
+export function TimelineHeadR(props: Omit<TimelineHeadProps, 'children'>) {


You could wrap TimelineHeadP/L/R into a single component passing down the letter and the path object.

There are several properties that are changing, not only the path (transform, text position, etc)

nerik · 2023-08-03T12:42:09Z

app/scripts/components/exploration/atoms.ts

+} from './constants';
+
+// Datasets to show on the timeline and their settings
+export const timelineDatasetsAtom = atom<TimelineDataset[]>([]);


Have you tried playing with atomWithHash ?

danielfdsilva · 2023-08-03T14:25:27Z

Thank you for the great feedback items. There are a lot of accessibility improvements to be done to the timeline, and this is a great starting list. Some things will have to addressed via help information (like the zoom with option|alt).

The timeline whole area should be draggable (maybe it's already the case but I didn't find how);

You only need to click and drag (once zoomed in, if you're viewing everything there's no dragging). Does this not work? 🤔

Includes opacity and dataset remove button

Closes #741

hanbyul-here · 2023-12-05T16:19:56Z

🤚 Have you considered integrating Jotai Devtool? https://jotai.org/docs/tools/devtools. Is there any specific reason you are not using it?

danielfdsilva · 2023-12-06T10:56:27Z

@hanbyul-here Honestly I hadn't even seen them. 😅 Maybe could have been helpful.
Can we get a final review here to merge?

cc @j08lue

Closes #770 - [x] Reduce steps to two - [x] Remove separate analysis tour - [x] Add visual cues / images to the steps - [ ] Offer a way for the user to invoke the tour again later?

j08lue

Ghost time series value tooltip

After I "Exit Analysis", the time series values tooltip still seems to be active, even though the time series is not shown anymore in the bottom drawer. Steps to reproduce:

Add a layer
Run analysis - take note of where on the bottom drawer there are values
Exit analysis
Hover over bottom drawer over an area where there were time series values
Issue: value tooltip is shown even though no time series is visible

danielfdsilva · 2023-12-06T13:59:57Z

@j08lue That was a cute one 😅. Fixed

j08lue

Datasets vs layers

Sorry - late find: We need to replace "dataset" with "layer" in the layer selection modal for now, please, until we introduce a new concept for datasets as layer groups.

danielfdsilva · 2023-12-06T14:59:45Z

@j08lue Addressed

j08lue

All of my review comments (based on visual review) addressed! We are now asking for key stakeholder reviews on the preview deployment.

hanbyul-here · 2023-12-06T19:42:00Z

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

@@ -90,6 +89,7 @@ const prepareDatasets = (
        d.name.toLowerCase().includes(searchLower) ||


Shouldn't there be d.id.toLowerCase().includes(searchLower) considering id is used to forward the user from the data overview page to this modal ?

Great catch @hanbyul-here! Funnily enough this was working well, but it was a coincidence. Fixed!

hanbyul-here

Check the comment https://github.com/NASA-IMPACT/veda-ui/pull/598/files#r1417895571

hanbyul-here · 2023-12-07T17:18:30Z

app/scripts/main.tsx

@@ -56,6 +58,8 @@ const composingComponents = [
  LayoutRootContextProvider
 ];

+const useNewExploration = !!process.env.FEATURE_NEW_EXPLORATION;


One more suggestion to use an explicit value for this environment variable, but other than that I think this should be good to go!

Added a simple function to be used in cases like this checkEnvFlag(process.env.VAR_NAME)

hanbyul-here

🙇 Thanks for working on this big feature. !

faustoperez · 2023-12-12T08:44:14Z

Thank you, Daniel! 🙌

nerik suggested changes Aug 3, 2023

View reviewed changes

danielfdsilva force-pushed the feature/exploration branch from 1bc7351 to a0e284b Compare August 3, 2023 16:07

danielfdsilva mentioned this pull request Aug 8, 2023

Implement exploration page with timeline #580

Closed

This was referenced Aug 15, 2023

Implement line chart support in the dataset track #605

Closed

Timeline Dataset options #607

Closed

Allow for exploration of multiple datasets on same explore page #616

Closed

danielfdsilva force-pushed the feature/exploration branch from 0d3d652 to e1eef89 Compare August 18, 2023 13:25

danielfdsilva added 21 commits August 25, 2023 11:14

Add experiment with timeline

4f01df9

Style dataset list items and timeline heads

d5f1e48

Add datepickers

15b6aaa

Add custom date axis

32e87b5

Add right space to timeline

1e6ae69

Add scale factors

4739561

Create exploration page with timeline

aa277dc

Fix timeline rescale glitch

7d8c093

Handle dataset loading and error

f4b93db

Improve extent calculation

bbcc349

Fix scale calculation and dragging select

64d0c61

Add empty state when there's no loaded datasets

9c465f2

Set initial dates upon dataset selection

b404050

Add analysis chart

8ff19b3

Add metrics and expand controls

420f3d1

Add dataset options menu

8335cdf

Includes opacity and dataset remove button

Add floating-ui library

7fb12d7

Add dataset hover interaction based on mouse position

eebf5e6

Add dataset analysis types and mock data

05d259f

Highlight interaction data point on chart

b7c0a90

Add a popover to the analysis chart with hovered information

d42ba98

Update analysis messages (#772)

3f82cbf

Closes #741

j08lue and others added 4 commits December 6, 2023 10:53

Focus tour on two features

e3b12d1

Change texts to be less imperative

8d09b8e

Remove analysis specific tour

cabed1f

Add images to analysis tour

0b4da04

danielfdsilva added 2 commits December 6, 2023 10:59

Merge remote-tracking branch 'origin/main' into feature/exploration

8e7c36c

Simplify feature tour (#771)

b09bfe6

Closes #770 - [x] Reduce steps to two - [x] Remove separate analysis tour - [x] Add visual cues / images to the steps - [ ] Offer a way for the user to invoke the tour again later?

j08lue requested changes Dec 6, 2023

View reviewed changes

danielfdsilva added 2 commits December 6, 2023 13:59

Fix popover being displayed after exiting analysis

7f6f5fc

Handle aoi drawing before datasets load

7944416

danielfdsilva requested a review from j08lue December 6, 2023 14:00

j08lue requested changes Dec 6, 2023

View reviewed changes

Replace dataset with data layers

e7e62e9

danielfdsilva requested a review from j08lue December 6, 2023 14:59

j08lue approved these changes Dec 6, 2023

View reviewed changes

hanbyul-here reviewed Dec 6, 2023

View reviewed changes

hanbyul-here requested changes Dec 6, 2023

View reviewed changes

Add check for dataset id

4fbc97c

danielfdsilva requested a review from hanbyul-here December 7, 2023 14:21

hanbyul-here reviewed Dec 7, 2023

View reviewed changes

Add env flag check function

eb37147

danielfdsilva requested a review from hanbyul-here December 11, 2023 10:49

hanbyul-here approved these changes Dec 11, 2023

View reviewed changes

danielfdsilva merged commit 404043e into main Dec 11, 2023
8 checks passed

danielfdsilva deleted the feature/exploration branch December 11, 2023 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exploration page (E&A merge) #598

Exploration page (E&A merge) #598

danielfdsilva commented Aug 2, 2023 •

edited by j08lue

Loading

netlify bot commented Aug 2, 2023 •

edited

Loading

nerik left a comment

nerik Aug 3, 2023

danielfdsilva Aug 3, 2023

nerik Aug 3, 2023

danielfdsilva Aug 3, 2023

nerik Aug 3, 2023

danielfdsilva Aug 3, 2023

nerik Aug 3, 2023

nerik Aug 3, 2023

nerik Aug 3, 2023

danielfdsilva Aug 3, 2023

nerik Aug 3, 2023

danielfdsilva commented Aug 3, 2023

hanbyul-here commented Dec 5, 2023

danielfdsilva commented Dec 6, 2023

j08lue left a comment

danielfdsilva commented Dec 6, 2023

j08lue left a comment

danielfdsilva commented Dec 6, 2023

j08lue left a comment •

edited

Loading

hanbyul-here Dec 6, 2023 •

edited

Loading

danielfdsilva Dec 7, 2023

hanbyul-here left a comment

hanbyul-here Dec 7, 2023

danielfdsilva Dec 11, 2023

hanbyul-here left a comment

faustoperez commented Dec 12, 2023

	zIndices: {
	hide: -1,
	docked: 10,
	sticky: 900,
	dropdown: 1000,
	overlay: 1300,
	modal: 1400,
	popover: 1500,
	skipLink: 1600,
	toast: 1700,
	tooltip: 1800

		@@ -0,0 +1,472 @@
		import React, { useEffect, useMemo, useRef, useState } from 'react';

	const { datasets, ...rest } = props;
	const datasets = useAtomValue(timelineDatasetsAtom);

		@@ -90,6 +89,7 @@ const prepareDatasets = (
		d.name.toLowerCase().includes(searchLower) \|\|

Exploration page (E&A merge) #598

Exploration page (E&A merge) #598

Conversation

danielfdsilva commented Aug 2, 2023 • edited by j08lue Loading

To Do

TBD

netlify bot commented Aug 2, 2023 • edited Loading

✅ Deploy Preview for veda-ui ready!

nerik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielfdsilva commented Aug 3, 2023

hanbyul-here commented Dec 5, 2023

danielfdsilva commented Dec 6, 2023

j08lue left a comment

Choose a reason for hiding this comment

Ghost time series value tooltip

danielfdsilva commented Dec 6, 2023

j08lue left a comment

Choose a reason for hiding this comment

Datasets vs layers

danielfdsilva commented Dec 6, 2023

j08lue left a comment • edited Loading

Choose a reason for hiding this comment

hanbyul-here Dec 6, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hanbyul-here left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hanbyul-here left a comment

Choose a reason for hiding this comment

faustoperez commented Dec 12, 2023

danielfdsilva commented Aug 2, 2023 •

edited by j08lue

Loading

netlify bot commented Aug 2, 2023 •

edited

Loading

j08lue left a comment •

edited

Loading

hanbyul-here Dec 6, 2023 •

edited

Loading