Feature: tweak search behaviour

[fanny]

This pr closes #301

The strategy used here was: Get the first index where elementID is larger than the selected element and reorder the search results for these elements so that the range with the largest is at the beginning of the matrix and the range with the smallest in the end.

[fanny]

I'm sorry for these many commits, I got a little lost on how I could fix an error.

[bvaughn]

No worries. This looks nice. I'll try to find the time to test it soonish.

[bvaughn]

This is a nice UX tweak 😄 Thanks for contributing!

[bvaughn]

Hm, I think we might want to preserve this behavior since it would be less of a jump in some cases.

1. Go to the demo page
2. Search for "ModernContext" and hit enter twice to select the third result
3. Type an additional "." (so you're now searching for "ModernContext.")

Before this change, the selected index would go from 3 to 2 (the nearest result given the updated text):

After this change, the cursor will jump back to index 0 (the furthest result).

To be fair, this is a minor thing- but I think it's slightly nicer if we preserve the original behavior for this case. I think we can do that with just a minor tweak.

diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js
index 5af9398..17b1a5c 100644
--- a/src/devtools/views/Components/TreeContext.js
+++ b/src/devtools/views/Components/TreeContext.js
@@ -277,6 +277,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
     selectedElementIndex,
   } = state;
 
+  const prevSearchIndex = searchIndex;
   const prevSearchText = searchText;
   const numPrevSearchResults = searchResults.length;
 
@@ -380,10 +381,20 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
             recursivelySearchTree(store, rootID, regExp, searchResults);
           });
           if (searchResults.length > 0) {
-            if (selectedElementID !== null) {
-              searchIndex = getNearestResult(searchResults, selectedElementID);
+            if (prevSearchIndex === null) {
+              if (selectedElementID !== null) {
+                searchIndex = getNearestResult(
+                  searchResults,
+                  selectedElementID
+                );
+              } else {
+                searchIndex = 0;
+              }
             } else {
-              searchIndex = 0;
+              searchIndex = Math.min(
+                ((prevSearchIndex: any): number),
+                searchResults.length - 1
+              );
             }
           }
         }

Since I'm already in the code I'll just go ahead and make this tweak. If you know of a good reason why we shouldn't do this though, let me know?

[bvaughn]

Squash merged via 3a3187f

GitHub isn't picking up on the merge, so I'm going to manually close this PR. Thanks again for contributing!

[bvaughn]

I think the way I merged messed up attributing the fix to you, so I force-pushed master and I'm going to merge through the GitHub UI 😄 I'll just apply my tweak after it's merged.

[bvaughn]

Whoops! I overlooked something 😁

We shouldn't be comparing IDs here, but indices. These won't necessarily correlate. I'll make a follow up fix!

[bvaughn]

Ok, index change made. Let me know if you see anything funky~