Add pinning to chemiscope to enable comparisons about chemiscope

[rosecers]

Wow phone did not upload image. Would this work as far as the layout?

[Luthaf]

1st round: click-enabled list of structure/environment id's to revisit

The hard part here is finding how and where to display the data, accounting for the possible improvement in part 2

2nd round: movable click-enabled static pngs of previously visited structures/environments (see proxy)

I don't know if there is a Browser API for screenshot, that would be the easiest way to generate the images. If not, the alternative would be to use JSmol "save to image" feature.

[ceriottm]

this is actually a super-nice idea. not easy to realize, but I have a proposal to make a simple version of it. basically from the structure panel you can click a button that would save to png, and make a modal window displaying that structure. even simpler, just open a window containing a JSMOL panel open on that structure - that was how we did it for ISV. then you need to make that window always-on-top, but it's OK to compare a couple of structures.

[Luthaf]

So there are multiple different functionalities here, we'll have to pick what we want

1. an history of all recently viewed figures (how I first understood this issue), which we would want to display as some sort of list
2. display multiple structures user-selected structure, not necessarily the most recently opened. There could be some kind of "pin this structure" button to pin the currently opened one. These could be displayed as
   a. interactive viewers (i.e. separate instances of JSmol widgets)
   b. static PNG/screenshots of the JSmol viewer

---

make a modal window displaying that structure. even simpler, just open a window containing a JSMOL panel open on that structure - that was how we did it for ISV. then you need to make that window always-on-top,

On the technical side, for solution 2. the "windows" should not be actual browsers windows, and not even modal (since modal steal the focus from the main window). They could easily be draggable div, with a z-index such that they stay on top.

Looking at @rosecers sketch, there are also links between the point in the map and the structure view. These links would be harder to deal with, especially in the context of zoom/rotation (in 3D mode) of the map. We would need to update them every time the user changes the map; and every time a "pinned structure viewer" is dragged around.

[ceriottm]

personally I think that having more than a couple of these at any given time would be unmanageable on most screens. creating one of these figures in practice require careful arrangement of the structures, zooming in on the main details, usually plotting with a transparent background to make the pieces fit.
most useful feature IMO would be a "pin" button in the structure panel that opens a movable DIV with a JSMOL showing the selected structure, and highlighting the associated point in the scatter plot. then one can select other structures in the main panel, and do a comparison. this also allow rotating the "pinned" structure. IDK if this is clear

[Luthaf]

So going with feature 2.a. above then 😃 What should we do with the viewer settings of the new JSmol? Start with the same values as the "main" JSmol, and allow separate customization; or use the same settings (supercell, atom names, etc.) for all pinned JSmol viewers? I think the former makes more sense.

[ceriottm]

I think the easiest and cleanest would be to use the same viewer in the "pinned" structures, meaning there will be the "customize" button. a subtlety is how we indicate in the scatter plot that we have pinned structures. my ideal (but IDK if it is realizable) would be to have "highlighted" points in the plot, each with a different color, and the background in the "popup" jsmol matches that color. When you close the "popup", the highlighting goes away.

…

On Fri, 24 Apr 2020 at 10:24, Guillaume Fraux ***@***.***> wrote: So going with feature 2.a. above then 😃 What should we do with the viewer settings of the new JSmol? Start with the same values as the "main" JSmol, and allow separate customization; or use the same settings (supercell, atom names, etc.) for all pinned JSmol viewers? I think the former makes more sense. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIREZ77RPKNCMPHJCCEHMTROFECNANCNFSM4MMRMWCA> .

[Luthaf]

I think the easiest and cleanest would be to use the same viewer in the "pinned" structures, meaning there will be the "customize" button.

Just to be clear, you mean using the same code, i.e. JSmolWidget directly, and thus allowing user customizations, right?

a subtlety is how we indicate in the scatter plot that we have pinned structures. my ideal (but IDK if it is realizable) would be to have "highlighted" points in the plot, each with a different color, and the background in the "popup" jsmol matches that color. When you close the "popup", the highlighting goes away.

I like the highlighting idea, implementing it might be slightly painful since it will require a lot of bookeeping (ensuring the right color is used to highlight even as the user changes the property used to color points, the points scale, etc.). But it seems like an easy way to link between the map and the pinned structures. We should also think on how this would interact with #4, which is also about highlighting.

[ceriottm]

Just to be clear, you mean using the same code, i.e. JSmolWidget directly, and thus allowing user customizations, right?

yes, would seem to me the most parsimonious and consistent solution. IDK if a floating

or a separate window is the best practical way to show it.

a subtlety is how we indicate in the scatter plot that we have pinned structures. my ideal (but IDK if it is realizable) would be to have "highlighted" points in the plot, each with a different color, and the background in the "popup" jsmol matches that color. When you close the "popup", the highlighting goes away.

I like the highlighting idea, implementing it might be slightly painful since it will require a lot of bookeeping (ensuring the right color is used to highlight even as the user changes the property used to color points, the points scale, etc.). But it seems like an easy way to link between the map and the pinned structures. We should also think on how this would interact with #4, which is also about highlighting.

One way could be to show the highlighted points as duplicates of the "real" points. This would take care immediately of the z-index, and probably simplify bookkeeping. The color could be assigned randomly, or we could have a predefined sequence of contrasting colors.

[Luthaf]

I like the duplicated points idea, a way to have them on top without creating a separate plotly trace (with the same performances considerations as #4 (comment)); would be to add additional data at the end of the x/y/x/color/size arrays.

[rosecers]

I'm implemented a rough version of this idea into the fork feat/pinning with the following capabilities:

• create a grid of widgets on the structure section of the layout
• Add/remove widgets from the grid
• Designate an active widget which is mapped to by map on the left and info bar. This active widget is signified by a size change in the widget window.

There are still some underlying issues to resolve, including updating the info bar and map upon selection of a new widget. Future capabilities can include showing multiple points mapped to multiple widgets on the map.

Would appreciate any thoughts on aesthetic and such.

[Luthaf]

I deployed your prototype at https://chemiscope.org/pinning-beta/, if @ceriottm wants to play with it without building everything locally.

Would appreciate any thoughts on aesthetic and such.

I see a large black border around the visualizers, is that intended? I also guess that the increase/decrease # of structure buttons are placeholders?

Other than that, I think that @ceriottm idea of using coloured backgrounds (or borders) to link to the points in the map is nice. Could also be a small coloured dot somewhere in the viewer.

[ceriottm]

UI idea: have a colored dot in the viewer with a black cross on it, that acts also as a "close" button and as an indicator of the "active" viewer.

[rosecers]

Would `close` be `de-activate` or `remove widget`?

…

On May 4, 2020, at 11:26 AM, Michele Ceriotti ***@***.***> wrote: UI idea: have a colored dot in the viewer with a black cross on it, that acts also as a "close" button and as an indicator of the "active" viewer. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALKVP3R4GJBLNJNOZHGCA4DRP2C37ANCNFSM4MMRMWCA>.

[ceriottm]

I envisage something like this

makes sense?

[ceriottm]

Would close be de-activate or remove widget?

I'd say remove widget.

[Luthaf]

I envisage something like this

The main issue I can see is collision with the cell parameters displayed by JSmol, which are also on the top left corner. Maybe there is a way to move them around/hide them/grey them out.

[rosecers]

I in general like the look. When you say “structure” below the panel, do you mean the info bar? I’ve avoided making multiple info bar instances, because it’s monumentally easier to just have the info bar track the active widget.

…

On May 4, 2020, at 12:01 PM, Guillaume Fraux ***@***.***> wrote: I envisage something like this The main issue I can see is collision with the cell parameters displayed by JSmol, which are also on the top left corner. Maybe there is a way to move them around/hide them/grey them out. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALKVP3VNJRHRRK5FNRI4QH3RP2G6ZANCNFSM4MMRMWCA>.

[ceriottm]

I envisage something like this

The main issue I can see is collision with the cell parameters displayed by JSmol, which are also on the top left corner. Maybe there is a way to move them around/hide them/grey them out.

It could also be on the bottom right, or close to the settings button.

[rosecers]

What about this?

…

On Mon, May 4, 2020, 12:19 Michele Ceriotti ***@***.***> wrote: I envisage something like this The main issue I can see is collision with the cell parameters displayed by JSmol, which are also on the top left corner. Maybe there is a way to move them around/hide them/grey them out. It could also be on the bottom right, or close to the settings button. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALKVP3QIQFK22ARGWLOY6FLRP2JBHANCNFSM4MMRMWCA> .

[ceriottm]

I in general like the look. When you say “structure” below the panel, do you mean the info bar? I’ve avoided making multiple info bar instances, because it’s monumentally easier to just have the info bar track the active widget.
…
On May 4, 2020, at 12:01 PM, Guillaume Fraux @.***> wrote: I envisage something like this The main issue I can see is collision with the cell parameters displayed by JSmol, which are also on the top left corner. Maybe there is a way to move them around/hide them/grey them out. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALKVP3VNJRHRRK5FNRI4QH3RP2G6ZANCNFSM4MMRMWCA.

yeah sorry unclear mock-up. the "structure" should stay global. an idea would be to also have a "pin" and "close" button there, and a circle with the matched color as a reminder of what is the active structure

[ceriottm]

Wow phone did not upload image. Would this work as far as the layout?

The pin should only appear on the "active" panel, but otherwise yes that would be perfect - and the layout of the buttons would mimic that of the plotly buttons on the map side, which is a plus

[Luthaf]

I've updated the beta (now at http://luthaf.fr/chemiscope/beta/pinning/) with the latest version of the code, it seems to be working fine for me.

One thing I would try to change is how pinned points colors are selected, I got three very similar grey in a row 😃.

[ceriottm]

Reeeeeally nice! I agree that the colors need a set of more contrasting values. I would cap to 9 (or max 12) "windows", so that it's easy to have a hard-coded list of mutually contrasting colors. Also I don't like particularly the black border, I think it's unnecessary and a bit ugly. More importantly, I am not 100% sure of the UI concept. How about having "global" "add" and "remove" buttons, associated with the "structure" panel? Would it be much more painful to implement? IMO it would be less cluttered, more similar to the interface for the map, and it will be clearer which structure is "active". Mock-up: [image: image.png] one could also add buttons to move the selection, but perhaps that is unnecessary.

…

On Fri, 29 May 2020 at 12:39, Guillaume Fraux ***@***.***> wrote: I've updated the beta (now at http://luthaf.fr/chemiscope/beta/pinning/) with the latest version of the code, it seems to be working fine for me. One thing I would try to change is how pinned points colors are selected, I got three very similar grey in a row 😃. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIREZ5WSE4WDBV4SMQBLWTRT6GHXANCNFSM4MMRMWCA> .

[ceriottm]

Now, given that Rose mentions that this would be a massive pain, only things I would change short-term are aestetic:
(1) change the "+" to a "duplicate current panel" button
(2) make the "colored dot" of non-selected structures smaller, and become large upon mouseover to hint at clickability
(3) make sure the whole area around icons is clickable, not only the black "+" or "x" area. I think this should be easy by using a png/svg for the icon, which would also give us the possibility of choosing something that has the same look&feel of the plotly commands buttons
(4) limit the number of panels to 9 or 12
(5) make sure that colors are contrasting
(6) add tooltips to the buttons.

[ceriottm]

Also, BUG: selected points are not highlighted in the 3D map On Fri, 29 May 2020 at 17:47, Michele Ceriotti <[email protected]> wrote:

…

Reeeeeally nice! I agree that the colors need a set of more contrasting values. I would cap to 9 (or max 12) "windows", so that it's easy to have a hard-coded list of mutually contrasting colors. Also I don't like particularly the black border, I think it's unnecessary and a bit ugly. More importantly, I am not 100% sure of the UI concept. How about having "global" "add" and "remove" buttons, associated with the "structure" panel? Would it be much more painful to implement? IMO it would be less cluttered, more similar to the interface for the map, and it will be clearer which structure is "active". Mock-up: [image: image.png] one could also add buttons to move the selection, but perhaps that is unnecessary. On Fri, 29 May 2020 at 12:39, Guillaume Fraux ***@***.***> wrote: > I've updated the beta (now at http://luthaf.fr/chemiscope/beta/pinning/) > with the latest version of the code, it seems to be working fine for me. > > One thing I would try to change is how pinned points colors are selected, > I got three very similar grey in a row 😃. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#16 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAIREZ5WSE4WDBV4SMQBLWTRT6GHXANCNFSM4MMRMWCA> > . >

[Luthaf]

Implemented in #25!