Searchbox to filter notebook list #1383

zzeekk · 2023-02-19T22:58:35Z

Hello,
I have a implemented a small practical improvement in the frontend to filter the notebook list by a search box. It helps finding notebooks by name in large repositories.
It implements a case-insensitive filter on the path of the entries of the tree view.
It needed some CSS adaptions to make the searchbox in the ui-panel-header adapting its size.
Hope this fits with your idea and coding practices for Polynote, otherwise let me know.
Best, zzeekk

zzeekk · 2023-02-20T07:19:01Z

Frontend-build fails with a strange error:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/util/createHash.js:138:18)
    at BulkUpdateDecorator.update (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/util/createHash.js:44:50)
    at OriginalSource.updateHash (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack-sources/lib/OriginalSource.js:104:8)
    at NormalModule._initBuildHash (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/NormalModule.js:737:17)
    at handleParseResult (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/NormalModule.js:801:10)
    at /home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/NormalModule.js:854:4
    at processResult (/home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/NormalModule.js:625:11)
    at /home/runner/work/polynote/polynote/polynote-frontend/node_modules/webpack/lib/NormalModule.js:676:5
/home/runner/work/polynote/polynote/polynote-frontend/node_modules/loader-runner/lib/LoaderRunner.js:146
		if(isError) throw e;

Can you please retry? I have no permissions for this.

zzeekk · 2023-02-20T20:02:50Z

I guess the error is because i'm missing some permissions on the project, can you please check?

omidmogasemi · 2023-02-27T21:46:29Z

polynote-kernel/src/main/scala/polynote/data/Rope.scala

  /** Creates a rope from a character array. */
  def apply(a: Array[Char]): Rope =
-    if (a == null || a.isEmpty) {
+    if (a == null || a.length == 0) {


Could you explain the reasoning behind this change?

Polynote build fails in my environment on this point. As far as i understood isEmpty needs an implicit conversion, and there is a conflict in the implicit resolution with JDK15+, see also scala/bug#12172 and the proposed simple workaround scala/bug#12172 (comment).

Gotcha - we develop internally with Polynote on JDK 8, which is probably the reason for this issue. Is it possible to try this out local on JDK 8? We'd prefer to not have to change this if possible, but I can also submit the change to your branch if not.

Yes, this works on JDK 8, but JDK 8 is outdated in most of the customer environments i work. In my opinion a Polynote build should also work with current JDKs, but you can compile with compatibility settings for JDK 8, e.g. targetCompatibility 1.8. What do you think?

omidmogasemi · 2023-02-27T21:47:01Z

Hey @zzeekk! Thanks for the PR - definitely a needed feature. Could you include a screenshot of what this looks like now (or perhaps a quick demo video showing the filtering)? I'm not sure why the build is failing - I will look into it in a bit as we haven't seen this error pop up before.

omidmogasemi · 2023-03-11T00:20:52Z

Hey @zzeekk! It looks like Jeremy has fixed the build errors - would you mind merging master into this branch? That should solve the build error.

zzeekk · 2023-03-11T23:22:38Z

@omidmogasemi: Build works, again. Great!
Find attached a small video:
https://user-images.githubusercontent.com/13715754/224515820-43f217fd-e8d6-4c1a-871c-74bbbc38f34a.mp4

omidmogasemi · 2023-03-22T20:56:40Z

Thanks for the demo! It LGTM - thanks for making the search recursive as well down the branches. cc @jeremyrsmith @jonathanindig for thoughts on the UI.

omidmogasemi · 2023-03-22T21:12:47Z

polynote-frontend/style/styles.less

-      top: .1em;
-      bottom: .1em;


Curious for the decision to remove these paddings - this a pretty fragile area of our CSS.

Hi @omidmogasemi, to my knowlegde this part of css is only used in the header of notebook and kernel panel, and that's where we need flexbox layout to scale the search box properly
-> removing absolut positioning from right button and make searchbox using the free space shifts the right button again to the right.
As the buttons are no longer positioned absolute, in my opinion the alignment of the buttons has to just look nice again in end and be stable on different browsers and media queries. Thats what it does, see video below. Please check comment below to re-test on your side again...

omidmogasemi · 2023-03-22T21:13:28Z

polynote-frontend/style/styles.less

    .right-buttons {
-      right: 0;
      text-align: right;
-      padding-right: .25em;


Same here. I think making this display: flex on line 1498 makes sense, but we do lose these area paddings, no?

omidmogasemi · 2023-03-24T01:59:01Z

I see this when I try to run this locally - I believe it might be due to the removed padding issues? I just opened a regular version on my laptop, the screen was not a particularly small size.

zzeekk · 2023-03-28T09:39:56Z

I see this when I try to run this locally - I believe it might be due to the removed padding issues? I just opened a regular version on my laptop, the screen was not a particularly small size.

Hi @omidmogasemi, we had a similar issue when upgrading from 0.4.x to 0.5 on some environments. It turned out to be a caching issue of style sheets of Polynote, means the browser used still old stylesheets together with HTML-code generated by the new code base. Can you retry to refresh Polynote in your browser with Shift-F5? This resolved the problems in our environments.

Attached a small video how resizing looks like in my Chrome browser, but we also tried on Edge and others:
https://user-images.githubusercontent.com/13715754/228195745-f759fae3-b37d-4133-9776-5e004199be11.mp4
Side note: the table header of the notebook list gets a scrollbar when resized to a small size. This is existing behaviour, but could be improved in a separate issue.

implement notebooklist searchbox

6f0b3da

zzeekk added 2 commits February 20, 2023 15:48

cleanup code

da377ad

fix isEmpty not existing on Array

475c6f2

omidmogasemi reviewed Feb 27, 2023

View reviewed changes

omidmogasemi requested a review from jeremyrsmith February 27, 2023 21:47

Merge branch 'polynote:master' into feature/notebooklist-searchbox

02be0a5

zzeekk requested review from omidmogasemi and removed request for jeremyrsmith March 11, 2023 23:23

omidmogasemi reviewed Mar 22, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Searchbox to filter notebook list #1383

Searchbox to filter notebook list #1383

Uh oh!

zzeekk commented Feb 19, 2023

Uh oh!

zzeekk commented Feb 20, 2023

Uh oh!

zzeekk commented Feb 20, 2023

Uh oh!

omidmogasemi Feb 27, 2023

Uh oh!

zzeekk Feb 28, 2023

Uh oh!

omidmogasemi Mar 22, 2023

Uh oh!

zzeekk Mar 28, 2023

Uh oh!

omidmogasemi commented Feb 27, 2023

Uh oh!

omidmogasemi commented Mar 11, 2023

Uh oh!

zzeekk commented Mar 11, 2023 •

edited

Loading

Uh oh!

omidmogasemi commented Mar 22, 2023

Uh oh!

omidmogasemi Mar 22, 2023

Uh oh!

zzeekk Mar 28, 2023

Uh oh!

omidmogasemi Mar 22, 2023

Uh oh!

omidmogasemi commented Mar 24, 2023

Uh oh!

zzeekk commented Mar 28, 2023 •

edited

Loading

Uh oh!

Uh oh!

Searchbox to filter notebook list #1383

Are you sure you want to change the base?

Searchbox to filter notebook list #1383

Uh oh!

Conversation

zzeekk commented Feb 19, 2023

Uh oh!

zzeekk commented Feb 20, 2023

Uh oh!

zzeekk commented Feb 20, 2023

Uh oh!

omidmogasemi Feb 27, 2023

Choose a reason for hiding this comment

Uh oh!

zzeekk Feb 28, 2023

Choose a reason for hiding this comment

Uh oh!

omidmogasemi Mar 22, 2023

Choose a reason for hiding this comment

Uh oh!

zzeekk Mar 28, 2023

Choose a reason for hiding this comment

Uh oh!

omidmogasemi commented Feb 27, 2023

Uh oh!

omidmogasemi commented Mar 11, 2023

Uh oh!

zzeekk commented Mar 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

omidmogasemi commented Mar 22, 2023

Uh oh!

omidmogasemi Mar 22, 2023

Choose a reason for hiding this comment

Uh oh!

zzeekk Mar 28, 2023

Choose a reason for hiding this comment

Uh oh!

omidmogasemi Mar 22, 2023

Choose a reason for hiding this comment

Uh oh!

omidmogasemi commented Mar 24, 2023

Uh oh!

zzeekk commented Mar 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

zzeekk commented Mar 11, 2023 •

edited

Loading

zzeekk commented Mar 28, 2023 •

edited

Loading