Responsive grid & UI/UX changes

[themoenen]

Refactored improvements

• Responsive interactive grid
  • Instead of specifying how many columns, you just specify a desired image size. The width is used to set a mininum cell width
  • The responsive CSS assumes results to be a multiple of 12, and will elegantly snap to 1/2/3/4/6/12 columns
  • By default, 24 results are returned. The documentation suggests sticking to multiples of 12.
  • The variable 'n_items_per_page' is now added as a parameter, replacing 'n_cols' for the interactive template
  • When 'n_items_per_page' is set to a different number, the grid will just display a gap at the end of the page
• The interactive grid got some UI/UX upgrades:
  • The mols2grid-id is now always displayed right next to the checkbox in the corner
  • The entire cell is now clickable (making it a lot easier to select cells)
  • Implemented basic intuitive keyboard navigation: ENTER/ESC for selecting/unselecting, arrows for navigation
  • Added new parameter 'pad' for controlling the padding of each cell
  • When parameter 'gap' is set to 0, a negative margin ensures you don't get double borders in between cells (looks a lot cleaner)
  • Data parameter changes:
    • Displayed data paremeters can now be copied by clicking them
    • Data paremeters are now by default broken into multiple lines in the static grid, and only truncated in the interactive grid
  • A new parameter 'truncate' lets the user override the default truncating behavior
  • When truncate is set to false, longer values will distort the grid, causing a less structured layout but still with all data visible
• Interactive navigation components (pagination, sort, search, select menu)
  • Removed bootstrap CSS & rebuilt components as native elements with minimal, name-spaced CSS.
  • Improved and more intuitive way of sorting.
  • Changes the text/smarts dropdown to a visual toggle.
  • Replaced the "checkbox" menu icon to a more standard triple dot menu.
  • All components are now fully responsive up until around ~415px wide (smaller usage is probably unlikely).
• Iframe usage
  • The grid is now rendered without an iframe by default, unless the code is run inside Jupyter.
  • A new parameter 'use_iframe' has been added to override the default behavior.
  • Parameters 'width' and 'height' have been renamed to 'iframe_width' and 'iframe_height' to more clear
• The pages/table templates and corresponsing function have been renamed to interactive/static for clarity.
• Static grid changes
  • Instead of specifying a grid width, the user can now just specify the cell width ('width[0]') + 'n_cols'.
  • This way there's optimal overlap with how the interactive grid works.
• The tooltip has been made less intrusive: Interactive template:
  • Tooltip hover zone is now limited to a small (i) icon in the corner, so it is not interfering with regular browsing
  • Clicking the (i) icon also toggles the tooltip and indicates if it's on or off (easier to find where a sticky tooltip is coming from)
  • Tooltip is now controlled by js (See initToolTip in grid_interaction.js)
  • Parameter 'tooltip_trigger' has been removed Static template:
  • Parameter 'tooltip_trigger' default value has been set to 'focus'
  • Table cells are now focusable, so you can either click inside/outside a cell to activate/deactivate, or use TAB key to cycle through the grid

Small improvements

• We're now automaticlaly adding 'img' to the subset without throwing an error (Previous behavior: throw error and tell user to add it)
• Also the mols2grid-id is now always displayed no matter what
• When you download CSV or SMILES without any cells selected, it now will download data for all cells instead of an empty document
• We now default to a smaller font size (12px) so the experience out of the box is a bit more practical
• The mols SVG images are now transparent, resulting in a nicer hover state
• Added default values to all docstring parameters
• Organized the parameters into categories, and removed some description inconsistencies

Bug fixes

• Parameter 'gap' in static template didn't work
• I no longer resize the iframe if a custom iframe_height is set by the display function
  • Previous behavior: parameter was overwritten by the style tag, hence useless
  • I also removed the default height="200" because it didn't serve any purpose
• Removed the 'cell_width' parameter as it was being overwritten and not documented
• Removed from the custom_css parameter instructions 'Only available for the "interactive" template' because it's not.

[cbouy]

I've just pushed some changes to fix the issue with the selection not working (as well as Python callbacks and filtering). Basically, without a call to display(widget), the widget that controls the interaction between JavaScript and Python is never properly initialized and so all these features stop working.

Here are my comments after playing with it a bit, haven't looked too much at the code yet.

Major

• My fault on this one: Bootstrap was also used to generate a modal window for Javascript callbacks and also apply some basic styles to some of them like a layout with 2 columns, see this example. Is there any alternative way of displaying these properly? Right now it just appends it after the grid. The template file that is used is in templates/popup.js, and you can find the python code that generates the built-in callbacks in callbacks.py for reference.

Minor

• Callback button is not centered (happens in both VSCode and Jupyter notebook, see image below). Ideally it'd be a small button (like the i button used for the tooltip) next to the tooltip button. Maybe a "play" button in these lines?

Nitpick

• After changing the sorting field, if I then sort by "index" it displays "Sort: mols2grid-id" instead of "Sort: index".
• Changing the sort field to "selected" displays "Sort: checkbox" instead of "Sort: selected".
• In rare cases, the checkbox and ID slightly overlap with part of the image, possibly hiding an atom or part of it. Would it be worth adding a bit of extra vertical spacing at the top of each cell?
• Only noticeable in dark mode: hovering the mouse over the search bar makes it transparent (see image below), but clicking it makes it "appear" again. Ideally it would be like the over fields (always visible with a light background).

And just keeping notes for myself: it might be worth having a dark_mode parameter to switch the font-color to white, and the default color palette for the molecule rendering to white, so that everything looks good for dark mode users.

[cbouy]

Alright all of the tests should be fixed now (hopefully 🤞)

[cbouy]

Sorry looks like GitHub does not like me doing a git push --force on your branch after rebasing my commits to clean up the git history a bit... I'll reopen

[cbouy]

Mmmh looks like I need to create a new branch since I can't push changes to your branch when the PR has been closed. I guess I'll make a PR to your mols2grid-responsive fork, then once you merge it you'll be able to reopen a new PR here and make changes to it directly. I'm really sorry for the inconvenience 😅