Compare #5529

na9da · 2021-06-08T23:28:37Z

What this PR does

Implements new compare workflow.

Other changes

Adds ignoreSplitterWhenPicking option to MapInteractionMode. This is needed so that when user picks a filter location on the left or right and only one side has visible imagery, the interaction should still resolve the location correctly. cbf8317
Adds WorkflowPanel used for implementing workflows outside the workbench. https://github.com/TerriaJS/terriajs/blob/compare/lib/Styled/WorkflowPanel.tsx
Activates/deactivates terria timeline stack when the Timeline.jsx component mounts or unmounts.
Adds an index parameter to Workbench.add() method specifying the index where the item should be added -

terriajs/lib/Models/Workbench.ts

Line 171 in 4f925bc

index: number = 0

Description

Implement the basic workflow based on the new designs.
Feature gate the workflow so that the old workflow is used by default and the new workflow is shown only when a feature flag is turned on
Disable location filter when interacting with the splitter or other Compare UI elements.
Just found a bug where the location filter does not get set the first time.
Use #useExperimentalCompareWorkflow hash parameter to enable this feature.
Write tests
Date picker popup should drop shadow to create some contrast when using lighter base maps.

Testing

Open this CI link.
Play with the workflow and try to break things

Checklist

There are unit tests to verify my changes are correct or unit tests aren't applicable (if so, write quick reason why unit tests don't exist)
I've updated CHANGES.md with what I changed.

UI.

This prevents the notification from being added to the DOM when not needed which resulted in the page scrolling and showing a white space at the bottom.

na9da · 2021-06-09T05:15:17Z

lib/Models/TimelineStack.ts

@@ -74,7 +76,7 @@ export default class TimelineStack {
    });
  }

-  destroy() {
+  deactivate() {
    if (this._disposeClockAutorun) {


TimelineStack has a reaction that keeps the time of workbench items in sync with the timeline clock. Previously this reaction was created inside the constructor, so it kept running even when the Timeline.jsx component is unmounted/hidden. As a result when the user sets a date for an item, the reaction will override it with the current clock time. I have moved the reaction to a an activate method which gets called in the componentDidMount method of Timeline.jsx and created a deactivate method that gets called in unmount hook. So now, if the Timeline.jsx is not shown, the user can set dates on item without it being reset by this reaction.

na9da · 2021-06-09T05:18:34Z

lib/Models/Workbench.ts

+  public async add(
+    item: BaseModel | BaseModel[],
+    index: number = 0
+  ): Promise<void> {


Added index parameter to specify the position in the workbench where we want to insert the item.

na9da · 2021-06-09T05:19:09Z

lib/Models/Workbench.ts

      return;
    }

-    this.insertItem(item);
-


Moved this call to later, because if the item is a reference, we need to load it first.

na9da · 2021-06-09T05:20:02Z

lib/ReactViews/BottomDock/BottomDock.jsx

@@ -77,4 +78,4 @@ const BottomDock = observer(
  })
 );

-module.exports = measureElement(BottomDock, false);
+module.exports = withControlledVisibility(measureElement(BottomDock, false));


So that we can show/hide the BottomDock

na9da · 2021-06-09T05:23:10Z

lib/ReactViews/BottomDock/Timeline/DateTimePicker.tsx

@@ -16,9 +16,9 @@ import {
  ObjectifiedYears


Changes to make the DateTimePicker more customizable... Ideally, when we have more time, we should rewrite this component.

… compare workflow (not when restoring workflow from share).

zoran995

Hi @na9da I have just a small suggestion regarding the checkbox component

zoran995 · 2021-10-18T16:22:52Z

lib/Styled/Checkbox/Elements/CheckboxIcon.tsx

-  top: 0.125em;
-  align-self: flex-start;
-  position: relative;


this is added with an intention to force a checkbox aligned with a top row with multi-row label.

I tried to avoid this in feedback component

zoran995 · 2021-10-18T16:24:15Z

lib/ReactViews/Compare/ItemList.tsx

+            <Checkbox
+              isChecked={item.show}
+              onChange={ev => onChangeSelection(item, ev.target.checked)}
+              label={<SelectorText medium>{item.name}</SelectorText>}
+            />


Font size should be set on the top checkbox element and text should inherit it that way we get text and checkbox icon to have the same size and they are aligned vertically.

There are some changes to how the checkbox work in #5826 which enables us to easier work with text sizing.

just created a #5919 with only checkbox changes from #5826

zoran995 · 2021-11-04T07:47:45Z

@na9da We completely remove the existing compare tool from the navigation menu? I am not a fan of doing that, it will be really hard to communicate that to our users. Is there a chance to leave it but make it hidden by default, at first I understood that both options will be available and that this will be marked as experimental?

AnaBelgun · 2021-11-04T08:01:18Z

hi @zoran995 the changes are following testing we've done with users which were very confused by the current workflow. Understandably, this is a major and we'd like to test it again before it's merged into main. We'll definitely keep you in the loop. and we'll talk about options.

zoran995 · 2021-11-04T09:45:04Z

I am afraid that it will confuse user where is option. Some of things that might be useful in new workflow :

Leave compare button to at least open new workflow (it will be much easier for user to find it and transition)
collapse option for left right dataset (big legends issue)
reorder of datasets

Also we lose option to put more dataset to one side and use opacity (ie street and addresses for two time periods)

p.s. I know that this is still in development but better to mention it in earlier

sidenote from above, closing and opening compare again cause something like this (compare is at 50% but the dataset is visible as it was in last compare)

na9da · 2021-11-04T23:17:26Z

@zoran995 thanks for pointing out other use cases. This PR is still a WIP and I hope we will be able to address all the concerns. I'll add back the experimental flag if we merge it anytime soon.

na9da added 25 commits May 31, 2021 11:50

Add compare workflow.

cfef002

Merge branch 'next' into compare

310040b

Fix import of createGuid.

0ef32ae

Hide map dataset count & bottom dock on mount.

94aad69

Add left & right date pickers.

65abd73

DateTimePicker customizations required for the compare workflow.

1c20ee5

Add location date filter.

44a7c2f

Extract doesImageryBelongToCatalogItem.

b849064

Stop rendering stray "0" in DOM.

a5e665b

Remove unused imports.

bc31990

Fix map button styles.

b3b6632

Cancel mouse pick when interacting with other elements.

f8ea537

Add location picking status updates.

04d2094

Activate/deactivate timeline stack when mounting/unmounting the timeline

0b0d1e0

UI.

Show legends for left/right items.

902d08d

Change compare icons in workflow panel.

4a43fb9

Style the datepicker more closely to the design.

1665b80

Make workflow panel scrollable.

e50319c

Use workflowPanelWidth instead of workbenchWidth.

d71d766

Add the clone item after the parent item.

1c4a3d5

Fix bug that shows the drag-n-drop notification when it is not in use.

e4988f2

This prevents the notification from being added to the DOM when not needed which resulted in the page scrolling and showing a white space at the bottom.

Remove old splitter controls from the workbench.

b2f7aa7

Show compare mode when splitter is turned on.

3bf6f83

Import style helper.

97d52cf

Remove stray attribute.

cf8f196

na9da commented Jun 9, 2021

View reviewed changes

na9da added 3 commits October 15, 2021 12:53

Merge branch 'main' into compare

5e46676

Show workbench controls for compare items.

c8aeb23

Disable items in both panels only when the user directly triggers the…

b5d56c4

… compare workflow (not when restoring workflow from share).

zoran995 requested changes Oct 18, 2021

View reviewed changes

na9da added 5 commits November 3, 2021 14:04

Re-implemented context items.

3dcb14e

Merge branch 'main' into compare

3818db1

More compare workflow changes.

155418c

Restore leftSmall and rightSmall icons.

355eeb8

Fix broken specs.

9149ed4

na9da added 15 commits November 8, 2021 10:37

Added menu option to send all context items to front or back.

17fe50a

Highlight panel menu selection.

ba1a06b

Fix workflow/side panel animations.

820635f

Unset left/right panel item IDs if we cannot resolve them to an item.

c95cdbe

Fix compare and explorer modal interaction.

3d1e55a

Improve styling.

5786630

Wrap item list checkbox text.

56f7f1f

Add placeholder text for entire map panel.

91dab24

Fixing a few bugs.

8a39561

Merge branch 'main' into compare

15e0136

Fix timeline rendering.

652e216

Added comment for temp fix to timeline readjustment.

85405aa

Merge branch 'fix-super-get' into compare

434b3bd

Merge branch 'main' into compare

13c8261

Fix lint errors.

5dbbe31

nf-s mentioned this pull request Feb 22, 2022

User styling #6115

Closed

4 tasks

nf-s mentioned this pull request Oct 26, 2022

Compare after split #6187

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compare #5529

Compare #5529

na9da commented Jun 8, 2021 •

edited

Loading

na9da Jun 9, 2021 •

edited

Loading

na9da Jun 9, 2021

na9da Jun 9, 2021

na9da Jun 9, 2021

na9da Jun 9, 2021 •

edited

Loading

zoran995 left a comment

zoran995 Oct 18, 2021

zoran995 Oct 18, 2021

zoran995 Oct 18, 2021

zoran995 Oct 18, 2021

zoran995 Oct 18, 2021

zoran995 commented Nov 4, 2021

AnaBelgun commented Nov 4, 2021

zoran995 commented Nov 4, 2021 •

edited

Loading

na9da commented Nov 4, 2021

Compare #5529

Are you sure you want to change the base?

Compare #5529

Conversation

na9da commented Jun 8, 2021 • edited Loading

What this PR does

Other changes

Description

Testing

Checklist

na9da Jun 9, 2021 • edited Loading

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

na9da Jun 9, 2021 • edited Loading

Choose a reason for hiding this comment

zoran995 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

zoran995 commented Nov 4, 2021

AnaBelgun commented Nov 4, 2021

zoran995 commented Nov 4, 2021 • edited Loading

na9da commented Nov 4, 2021

na9da commented Jun 8, 2021 •

edited

Loading

na9da Jun 9, 2021 •

edited

Loading

na9da Jun 9, 2021 •

edited

Loading

zoran995 commented Nov 4, 2021 •

edited

Loading