Refactor Skeletontree tab as Antd <Tree /> component #7819

hotzenklotz · 2024-05-22T14:28:00Z

In an effort to use the same antd <Tree /> tree component for the skeletons, comments, and segments, I refactored the skeleton tab to use this component.

URL of deployed dev instance (used for testing):

https://treetree.webknossos.xyz/

Steps to test:

Do something outside the skeleton view so that it must update (select different tree, node, etc)
Rename skeletons
Drag and drop skeletons
Try context menu stuff
- color changes
- expand/collapse everything
Try really large skeleton
Try single select
Try multi select with CTRL/meta or SHIFT

TODOs:

Issues:

Contributes to WIP Update React to v17 #7765
Fixes Use antd Tree in skeleton view #5872
Fixes Shift select a range in tree tab #5241

(Please delete unneeded items, merge only when none are left open)

Updated changelog
Updated migration guide if applicable
Updated documentation if applicable
Adapted wk-libs python client if relevant API parts change
Removed dev-only changes like prints and application.conf edits
Considered common edge cases
Needs datastore update after deployment

…e-tree

hotzenklotz · 2024-06-04T13:56:48Z

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx

@@ -41,15 +41,15 @@ import { getAdditionalCoordinatesAsString } from "oxalis/model/accessors/flycam_

 const ALSO_DELETE_SEGMENT_FROM_LIST_KEY = "also-delete-segment-from-list";

-export function ColoredDotIconForSegment({ segmentColorHSLA }: { segmentColorHSLA: Vector4 }) {
-  const hslaCss = hslaToCSS(segmentColorHSLA);
+export function ColoredDotIcon({ colorRGBA }: { colorRGBA: Vector4 }) {


We can re-use this component for the skeleton, comments and segments tab. All three data types have RGB properties. So no need to use HSL instead.

MichaelBuessemeyer · 2024-06-05T11:07:26Z

Here is my pre-review testing feedback:

The tree items are too spacy:
This is the current master version which does not line break the tree names and thus is horizontally scrollable but more dense

And this is your version:

I do prefer the dense (master) version
Rearranging trees within a group does no longer work on your branch.
Empty tree groups are opened by default on the master when:

creating a new group and
moving some trees into them.

On your branch one needs to expand the group as step 3.

On the master, the level intend seems to be smaller (due to the missing drag handle). Is it possible to make this a little narrower to make the view more compact?

These are the thing I noticed during testing. So far it looks very good beside this few points 🚀

…e-tree

MichaelBuessemeyer

Please just re-request a review once its time 🙏 :)

…e-tree

…tree-tree

* move skeleton expanded/collapsed group state to store * WIP: expand and collapse all skeleton groups * fix expand/collapse skeleton groups * expand group if tree is dropped * clean up code * lint * address review * address review 2/2 * remove console.log * lint * add small condition for ondrop * persist isExpanded state in backend * make groups default expanded if field is absent in nml (backend only) * make groups default expanded if for written nmls (backend only) * fix backend treegroup update action tests * add isExpanded to frontend nml support * update snapshots * omit object creation in var * omit useless return statement in map * add isExpanded prop to tree groups in backend testing fixtures (dummies) * add test to backend nml test to test properly setting default to expanded * add changelog * WIP: address review * fix bug where drag and drop of empty groups was failing * remove comment --------- Co-authored-by: Michael Büßemeyer <[email protected]> Co-authored-by: Philipp Otto <[email protected]>

philippotto · 2024-08-05T08:19:15Z

Really looking forward to see this merged! I tested this PR for a bit and found some things:

the scroll bar is not visible in dark mode (because the background color of the scroll bar is too dark?). in light mode, it works fine
when selecting a tree, it is always scrolled to be at the top of the view (maybe both points can be solved with scrollTo({..., align: "auto"})?
- when manually selecting an item from the list, this is very annoying, because the tree item was perfectly visible, anyway.
- when selecting a tree/node in the data viewport, this auto-scroll behavior also always enforces the item to be at the top of the view (if the list is long enough). however, when the item was visible anyway, it's not necessary to scroll at all.

won't fix?

if a tree name is very long, you cannot scroll horizontally. apparently, this is a limitation of antd. so probably a won't fix. the full name can be seen via the tooltip or the rename-field.

philippotto · 2024-08-05T08:56:05Z

Hmm, I found another thing:

shift select often doesn't work. could it be that it performs the range by sorting alphabetically? however, the visible sorting might be by creation time. in the screenshot, the blue item was active and I shift-clicked on the gray item. nothing happens in that case

…e-tree

MichaelBuessemeyer · 2024-08-05T16:05:46Z

Please wait until the backend changes of this pr have been reviewed (they haven't been reviewed yet. See: #7939 (comment))

@normanrz Could you take over looking over these changes? There shouldn't be many changes.

normanrz

Backend looks good 👍

philippotto

awesome, works very well 👍

MichaelBuessemeyer

daniel-wer · 2024-08-06T12:24:18Z

package.json

@@ -206,7 +205,6 @@
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-sortable-hoc": "^2.0.0",
-    "react-sortable-tree": "^2.8.0",


The day has finally come 🎉

hotzenklotz added 3 commits May 21, 2024 16:04

refactor tree hierarchy view as functional component

fa7b3fb

WIP refacator as antd <Tree>

79dabe4

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

d8668d1

…e-tree

hotzenklotz self-assigned this May 22, 2024

hotzenklotz added frontend refactoring labels May 22, 2024

hotzenklotz added 2 commits May 23, 2024 15:45

restore checkbox and expaneded keys

a4fa299

restored expand/collapse all behaviors

b688cc3

hotzenklotz mentioned this pull request May 27, 2024

WIP Update React to v17 #7765

Draft

11 tasks

hotzenklotz added 8 commits May 27, 2024 14:00

re-use <DotIcon> components but with rgba values

e8860ef

restore search

57477d9

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

758bc57

…e-tree

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

d35859a

…e-tree

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

b11cc28

…e-tree

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

4813b27

…e-tree

fix drag and drop for single tree

749abee

fix multi select

6c2c2b6

hotzenklotz commented Jun 4, 2024

View reviewed changes

hotzenklotz requested a review from MichaelBuessemeyer June 4, 2024 13:57

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

ff0d691

…e-tree

MichaelBuessemeyer reviewed Jun 6, 2024

View reviewed changes

hotzenklotz added 8 commits June 7, 2024 15:32

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

e7caecb

…e-tree

remove react-sortable-tree library

28f5095

updated styling and text wrap

08c911f

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

f4e97a8

…e-tree

make tree height/width smaller

9f5f53f

collapse sup groups

fa93178

added shift selection to skeleton tree

813e17a

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

c3e52ef

…e-tree

hotzenklotz and others added 11 commits July 5, 2024 17:57

use darker colors for <Tree> components in dark mode

3a080e0

fix multi select drag and drop

a7ca1f3

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

a0c21d6

…e-tree

formatting

4e61877

fix CSS alignment of tree checkboxes

39d8b33

use antd themeing instead of CSS overrides

32a5a57

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

70efb7c

…e-tree

format

faa4ba9

Merge branch 'tree-tree' of github.com:scalableminds/webknossos into …

869a70a

…tree-tree

Merge branch 'master' into tree-tree

5fe4c83

hotzenklotz added 6 commits August 5, 2024 15:54

fix tree sorting

adac3bb

fix off-by-one error in shift select

bb2b54f

override <Tree> scroll handle in dark mode

dd82031

use scrollTo(auto)

8124300

format

39ac256

Merge branch 'master' of github.com:scalableminds/webknossos into tre…

7bec3d5

…e-tree

normanrz reviewed Aug 5, 2024

View reviewed changes

fix typo

fdb6640

philippotto approved these changes Aug 6, 2024

View reviewed changes

Merge branch 'master' into tree-tree

b90ac7f

MichaelBuessemeyer approved these changes Aug 6, 2024

View reviewed changes

Merge branch 'master' into tree-tree

07dce30

hotzenklotz enabled auto-merge (squash) August 6, 2024 11:57

hotzenklotz merged commit 9cc0635 into master Aug 6, 2024
2 checks passed

hotzenklotz deleted the tree-tree branch August 6, 2024 12:16

daniel-wer reviewed Aug 6, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor Skeletontree tab as Antd <Tree /> component #7819

Refactor Skeletontree tab as Antd <Tree /> component #7819

hotzenklotz commented May 22, 2024 •

edited

Loading

hotzenklotz Jun 4, 2024

MichaelBuessemeyer commented Jun 5, 2024 •

edited by hotzenklotz

Loading

MichaelBuessemeyer left a comment

philippotto commented Aug 5, 2024 •

edited

Loading

philippotto commented Aug 5, 2024 •

edited by hotzenklotz

Loading

MichaelBuessemeyer commented Aug 5, 2024

normanrz left a comment

philippotto left a comment

MichaelBuessemeyer left a comment

daniel-wer Aug 6, 2024

Refactor Skeletontree tab as Antd <Tree /> component #7819

Refactor Skeletontree tab as Antd <Tree /> component #7819

Conversation

hotzenklotz commented May 22, 2024 • edited Loading

URL of deployed dev instance (used for testing):

Steps to test:

TODOs:

Issues:

hotzenklotz Jun 4, 2024

Choose a reason for hiding this comment

MichaelBuessemeyer commented Jun 5, 2024 • edited by hotzenklotz Loading

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

philippotto commented Aug 5, 2024 • edited Loading

philippotto commented Aug 5, 2024 • edited by hotzenklotz Loading

MichaelBuessemeyer commented Aug 5, 2024

normanrz left a comment

Choose a reason for hiding this comment

philippotto left a comment

Choose a reason for hiding this comment

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

daniel-wer Aug 6, 2024

Choose a reason for hiding this comment

hotzenklotz commented May 22, 2024 •

edited

Loading

MichaelBuessemeyer commented Jun 5, 2024 •

edited by hotzenklotz

Loading

philippotto commented Aug 5, 2024 •

edited

Loading

philippotto commented Aug 5, 2024 •

edited by hotzenklotz

Loading