Enhance tree search functionallity #3878

MichaelBuessemeyer · 2019-03-11T11:14:43Z

This PR changes the search functionality in the trees tab view. It changes the search to a browser-like search where you can cycle through the found results via buttons or via pressing enter. The searched options are the name of the trees and the tree groups and the search should be case insensitive.

URL of deployed dev instance (used for testing):

https://enhancetreesearchfunctionallity.webknossos.xyz

Steps to test:

open a skeleton or hybrid tracing
create some trees and groups
use the search button or the shortcut shift + ctrl + f to open the search popover
opening the popover should automatically focus the search input of the popover
enter some keywords to search for
if there is no result, hitting enter and using the buttons should not select a new tree or group as active and the text should be colored red
when having multiple results, pressing enter or one of the buttons on the right side should cycle through the possible results without closing the search popover
the popover can be closed with pressing escape, clicking somewhere else (not on the popover) or using the close button on the right side of the popover
reopening the popover should keep the previously entered search sequence and index of "active search result" so that the user can continue to cycle through the results

Issues:

fixes Enhance search functionality (group names, counter, jumping) #3826 Tree search is case sensitive #3708

Updated changelog
~~[ ] Updated migration guide if applicable~~
~~[ ] Updated documentation if applicable~~
~~[ ] Adapted wk-connect if datastore API changes~~
~~[ ] Needs datastore update after deployment~~
Ready for review

…ance-tree-search-functionallity

MichaelBuessemeyer · 2019-03-12T10:53:44Z

frontend/javascripts/oxalis/view/right-menu/trees_tab_view.js

@@ -337,21 +346,37 @@ class TreesTabView extends React.PureComponent<Props, State> {
    }
  };

-  getAllSubtreeIdsOfGroup = (groupId: number): Array<number> => {


I just found out that this method is never used so I removed it

MichaelBuessemeyer · 2019-03-12T10:56:41Z

@daniel-wer This PR is ready for your review 🙂

daniel-wer

Awesome, this already feels like a big improvement and the code looks good too!

Some observations, things to do:

Investigate performance in tracings with many trees (1000+).
Ideally the shortcut would be disabled if the tree tab is not visible. Do you have an idea how to accomplish that?
Should the search results be in the "correct" order (same as in the tree tab)? I'm thinking yes, after testing this, but it may be hard to accomplish.

frontend/javascripts/oxalis/view/right-menu/trees_tab_view.js

frontend/javascripts/oxalis/view/right-menu/advanced_search_popover.js

#3900) * add domVisibilityObserver to conditionally render tree search shortcut * add feature check

daniel-wer · 2019-03-20T12:39:51Z

frontend/javascripts/oxalis/view/right-menu/advanced_search_popover.js

+    const { data, searchKey, provideShortcut, children } = this.props;
+    const { searchQuery, isVisible } = this.state;
+    let { currentPosition } = this.state;
+    currentPosition = currentPosition == null ? -1 : currentPosition;


If trees are deleted while a searchQuery is entered, the currentPosition can become larger than numberOfAvailableOptions

I think a modulo would be needed for the currentPosition here.

daniel-wer · 2019-03-20T12:43:53Z

frontend/javascripts/oxalis/view/right-menu/advanced_search_popover.js

+    const { searchQuery, isVisible } = this.state;
+    let { currentPosition } = this.state;
+    currentPosition = currentPosition == null ? -1 : currentPosition;
+    this.availableOptions = this.getAvailableOptionsFrom(data, searchQuery, searchKey);


A react render method should be pure and should not have side effects. Easy to fix as the memoization allows us to simply call this.getAvailableOptionsFrom everywhere we need the availableOptions, so we don't need the instance variable :)

daniel-wer · 2019-03-20T13:22:11Z

I fixed those last two comments (and some very minor stuff) by myself, hope that's alright :)

daniel-wer · 2019-03-20T14:58:18Z

@MichaelBuessemeyer I just pushed a commit implementing the sorting of the groups and trees for the advanced search popover. I think the solution is not too complex and works nicely, please have a look and tell me what you think :)

MichaelBuessemeyer · 2019-03-21T11:12:17Z

I fixed those last two comments (and some very minor stuff) by myself, hope that's alright :)

Thanks for doing that @daniel-wer 👍

I think a modulo would be needed for the currentPosition here.

I check this version and it works alright. But the behavior is kinda weird:
e.g.: You have 10 available trees and the currentPosition is also the 10th tree. Removing the 10th tree will cause the currentPosition to be the first tree. But I think it would make more sense if it would be the last currently available option (here the 9th tree). I achieved this by using Math.min: currentPosition = Math.min(currentPosition, numberOfAvailableOptions - 1);.

Please check this change for bugs :)

MichaelBuessemeyer · 2019-03-21T12:32:44Z

@MichaelBuessemeyer I just pushed a commit implementing the sorting of the groups and trees for the advanced search popover. I think the solution is not too complex and works nicely, please have a look and tell me what you think :)

Looks and works awesome! 👍

…bleminds/webknossos into enhance-tree-search-functionallity

daniel-wer

I just did a last test, worked perfectly :)

Really good work on this PR! Ready to merge imo 👍

…ture-highlight * 'master' of github.com:scalableminds/webknossos: Hide unreported datasets (#3883) Update puppeteer and refresh screenshots (#3914) only show team names of own organization (#3928) Enable merger mode in skeleton and hybrid tracings (#3619) allow uploading nml for public dataset of different orga (#3929) Always make wheel listeners not passive to allow preventDefault (#3939) Enhance tree search functionallity (#3878) add webknossos-connect to setup (#3913) Update README.md (#3923) Add shortcut to maximize golden layout panes (#3927) Perform bucket picking in web workers and other performance optimizations (#3902) remove alt text for abstract brain loading image (#3930) updated documentation front page (#3917)

MichaelBuessemeyer added 4 commits March 8, 2019 22:00

added advanced search popover that works like browser search

9bef2b6

removed unnessecary import

323cac1

fixed flow errors

67e40b4

added case insensitive comparison, fixed search starting position

4d78de3

MichaelBuessemeyer added enhancement frontend labels Mar 11, 2019

MichaelBuessemeyer self-assigned this Mar 11, 2019

MichaelBuessemeyer requested a review from daniel-wer March 11, 2019 11:14

MichaelBuessemeyer added 7 commits March 11, 2019 12:29

disabled buttons when there are no mutliple results

e13704c

removed unused method

d34b587

added match information

e84669f

rework information about match

eb5b1d3

added group names to search results and removed close button

0314342

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

6a5d69b

…ance-tree-search-functionallity

fixed flow complains

7f088d7

MichaelBuessemeyer changed the title ~~[WIP] Enhance tree search functionallity~~ Enhance tree search functionallity Mar 12, 2019

MichaelBuessemeyer commented Mar 12, 2019

View reviewed changes

daniel-wer reviewed Mar 13, 2019

View reviewed changes

MichaelBuessemeyer and others added 4 commits March 14, 2019 13:55

applied feedback and added memoization

a94c50d

removed logging from benchmarking

904e1ad

fixed small bugs; fixed flow

369a054

Add DomVisibilityObserver to conditionally render tree search shortcut (

1cb95ca

#3900) * add domVisibilityObserver to conditionally render tree search shortcut * add feature check

daniel-wer reviewed Mar 20, 2019

View reviewed changes

minor fixes, avoid render side effects, use utils modulo function

59f00b4

use sorted groups and trees in search popover

53dcf30

changed behavior of search when trees are deleted

2523ea5

MichaelBuessemeyer and others added 3 commits March 21, 2019 13:33

Merge branch 'master' into enhance-tree-search-functionallity

d7a6fe1

fixed indentation

417e8cc

Merge branch 'enhance-tree-search-functionallity' of github.com:scala…

8499a55

…bleminds/webknossos into enhance-tree-search-functionallity

daniel-wer approved these changes Mar 21, 2019

View reviewed changes

MichaelBuessemeyer and others added 5 commits March 21, 2019 16:08

Update CHANGELOG.md

cb99af2

Merge branch 'master' into enhance-tree-search-functionallity

f378ae7

fix lint

7b3c996

Merge branch 'master' into enhance-tree-search-functionallity

04694ac

Merge branch 'master' into enhance-tree-search-functionallity

69ec5db

MichaelBuessemeyer merged commit 27a8e4f into master Mar 25, 2019

normanrz deleted the enhance-tree-search-functionallity branch August 12, 2019 09:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance tree search functionallity #3878

Enhance tree search functionallity #3878

MichaelBuessemeyer commented Mar 11, 2019 •

edited

Loading

MichaelBuessemeyer Mar 12, 2019

MichaelBuessemeyer commented Mar 12, 2019

daniel-wer left a comment •

edited by MichaelBuessemeyer

Loading

daniel-wer Mar 20, 2019

daniel-wer Mar 20, 2019

daniel-wer commented Mar 20, 2019

daniel-wer commented Mar 20, 2019

MichaelBuessemeyer commented Mar 21, 2019

MichaelBuessemeyer commented Mar 21, 2019

daniel-wer left a comment

Enhance tree search functionallity #3878

Enhance tree search functionallity #3878

Conversation

MichaelBuessemeyer commented Mar 11, 2019 • edited Loading

URL of deployed dev instance (used for testing):

Steps to test:

Issues:

MichaelBuessemeyer Mar 12, 2019

Choose a reason for hiding this comment

MichaelBuessemeyer commented Mar 12, 2019

daniel-wer left a comment • edited by MichaelBuessemeyer Loading

Choose a reason for hiding this comment

daniel-wer Mar 20, 2019

Choose a reason for hiding this comment

daniel-wer Mar 20, 2019

Choose a reason for hiding this comment

daniel-wer commented Mar 20, 2019

daniel-wer commented Mar 20, 2019

MichaelBuessemeyer commented Mar 21, 2019

MichaelBuessemeyer commented Mar 21, 2019

daniel-wer left a comment

Choose a reason for hiding this comment

MichaelBuessemeyer commented Mar 11, 2019 •

edited

Loading

daniel-wer left a comment •

edited by MichaelBuessemeyer

Loading