Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/pinning #25

Merged
merged 51 commits into from
Jun 12, 2020
Merged

Feature/pinning #25

merged 51 commits into from
Jun 12, 2020

Conversation

rosecers
Copy link
Collaborator

@rosecers rosecers commented May 29, 2020

#16
This is a feature addition of the widget "grid" to the right side of the chemiscope, allowing for viewing of multiple widgets at once. The grid allows for anywhere from 1-12 widgets.

There are three new buttons on each widget instance, an "active" flag, a "duplicate" button, and a "close" button:

  • active - sets the widget as that which will receive any data passing between the map, info, and structure. Should resize upon click. Corresponds/synchronizes to the points highlighted in the left map.
  • duplicate - add a new widget to the grid with the same structure as the given widget and resize the grid.
  • close - close the given widget and resize the grid.

Overview of code changes:

  • overarching change: onselect now takes indexes and a guid, so that the map/info/grid know which guid to operate on/set active. src/index.ts has been adapted for proper communication

  • static/chemiscope.css contains the css objects for all buttons

  • structure/structure.ts (large changes): now contains a grid instance rather than a single widget. Contains all infrastructure for adding/removing widgets, including the

    • new variables:
      • _widgetMap (Map): mapping from guids to widget, color, and current structure
      • _guids (string[], used for indexing): guids of the widgets in the grid
      • _active (string): guid of the active widget
    • and functions:
      • bestArrangement(number): hacky function for determining the best arrangement of the widget grid
      • get active(): returns active guid
      • set active() calls _setActive
      • _setActive(string): sets active guid
      • _resizeGridInc(number): resizes the grid by a given increment
      • _setupCell(cell#, row#, column#): sets up grid cell
      • _setupGrid(): sets up the grid
      • _removeWidget: kills the given widget
    • and changes to existing functions
  • structure/widget.ts (minimal changes): allows for optional passing of a guid for the widget. This allows for keeping the same size graph upon changing the dataset. Not critical, and can be changed if needed later on.

  • map/map.ts (medium changes), including

    • new variables:

      • _active (string): guid of the active widget
      • _markerMap (Map): mapping from guids to color, current structure and marker
      • _guids (string[], used for indexing): guids of the widgets in the grid
    • new functions

      • set active() calls _setActive
      • _setActive(string): sets active guid
      • _removeMarker(guid): kills the given marker
    • and changes to existing functions

      • constructor(), select(), and updateSelectedMarker() take a guid to synchronize with widgets
      • all functions referring to the selected marker either loop through all markers or refer to the active marker, as appropriate

Requested Changes:

  • change the "+" to a "duplicate current panel" button
  • make the "colored dot" of non-selected structures smaller, and become large upon mouseover to hint at clickability <-- done in theory, but smaller dots on widgets are distorted for unknown reason
  • 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
  • limit the number of panels to 9 or 12
  • make sure that colors are contrasting <-- in progress
  • add tooltips to the buttons. <-- in progress
  • Also, BUG: selected points are not highlighted in the 3D map

Outstanding Issues:

  • JSMol throws a width error when resizing the grid, we should set a minimum width in some aspect of the grid, although the options I have tried have not worked
  • Global "Add" button, which is an open discussion

Copy link
Contributor

@Luthaf Luthaf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is a first round of review, I had a look at most files, except structure.ts.

Most of my comment are about naming and bits of code I don't understand, I also have a suggestion for clearer grouping of guid/marker/env id inside the map.

src/index.ts Outdated Show resolved Hide resolved
src/index.ts Outdated Show resolved Hide resolved
src/map/map.ts Outdated Show resolved Hide resolved
src/map/map.ts Outdated Show resolved Hide resolved
src/map/map.ts Outdated Show resolved Hide resolved
src/static/chemiscope.css Outdated Show resolved Hide resolved
src/static/chemiscope.css Outdated Show resolved Hide resolved
src/structure/widget.ts Show resolved Hide resolved
src/utils/index.ts Outdated Show resolved Hide resolved
src/utils/index.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@Luthaf Luthaf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Second round of review, regarding structure.ts only

src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
@ceriottm
Copy link
Contributor

ceriottm commented Jun 4, 2020

Re the color scheme, since it doesn't make sense to have an unlimited number of panels, we can just take one of the default plotly palettes and use it. Those are already designed to be contrasting, and using a dynamically generated palette is really overkill.

src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
src/map/map.ts Outdated Show resolved Hide resolved
@rosecers
Copy link
Collaborator Author

rosecers commented Jun 5, 2020 via email

@Luthaf
Copy link
Contributor

Luthaf commented Jun 8, 2020

A few other things to be done:

  • Remove duplication of GUID list in structure.ts, merge it with the map as in fd2e2a8
  • Get rid of the this._active === '' checks, there should always be an active widget/marker. The checks should be replaced by assertions
  • Get rid of the const foo = Map.get(guid), if (foo === undefined) conditions, either by using assert if guid === this._active or with the first point of this list
  • check that we can select envs in 3D mode (I currently get an error Error: unable to get element with id chsp-selected-3e123c9e-01ed-451d-b296-a6bbcab29599, which I assume is linked to my refactoring)
    • Check that switching back and forth between 2D and 3D works fine

Copy link
Contributor

@Luthaf Luthaf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few more comments, I think we are getting there. Some of the suggestions are fine to leave for future refactoring, I'll create issues for them when merging.

this.info.show(indexes);
this.structure.onselect = (indexes, selectedGUID) => {
this.map.select(indexes, selectedGUID);
if (indexes.structure > 0 && indexes.environment > 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this check needed because you pass -1, -1 to indicate removal of one viewer? If so, I think the code would be clearer by having a separate onremove callback. This can be refactored later.

src/map/map.ts Show resolved Hide resolved
src/map/map.ts Show resolved Hide resolved
src/map/map.ts Outdated
constructor(id: string,
indexer: EnvironmentIndexer,
properties: {[name: string]: Property},
starterGuid: string, /// fix me later
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix me? This should also be documented with @param XXX, especially since it is part of the public interface

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this should at least be made optional, since the map should still be usable without a structure viewer to provide the GUIDs. In this case, we may want to support a map without a "selected" marker

This can be refactored later

src/map/map.ts Outdated Show resolved Hide resolved
src/static/chemiscope.css Outdated Show resolved Hide resolved
'Maroon', 'Olive', 'Silver', 'Lime',
'Navy', 'Fuchsia'];

// to be replaced later
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be removed?

src/map/map.ts Outdated
const oldButton = document.getElementById(`chsp-selected-${this._active}`);
if (oldButton !== null) {
oldButton.classList.toggle('chsp-inactive-structure-marker', true);
oldButton.classList.toggle('chsp-active-structure-marker', false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of toggling classes inside the map code, it might be worth it to extract the 2D marker to its own class, with functions like move, makeActive, makeInactive, remove, etc.

this can be refactored later

src/structure/structure.ts Outdated Show resolved Hide resolved
oldButton.innerHTML = `<span class="tooltiptext">Choose as active.</span>`;
}
this._active = activeGUID;
const newButton = getByID(`chsp-activate-${this._active}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as in the map, the class toggling logic could be extracted to a separate GridCell class, with appropriate functions.

This can be refactored later

@ceriottm
Copy link
Contributor

ceriottm commented Jun 9, 2020

100!

@Luthaf
Copy link
Contributor

Luthaf commented Jun 9, 2020

Remaining TODO items:

  • We are unable to remove a widget from the grid in Safari
  • The Azaphenacenes example fails to load, this is because the Structure constructor tries to load a structure when setting up the grid, when the loading callback is not yet set.

src/structure/structure.ts Outdated Show resolved Hide resolved
src/structure/structure.ts Outdated Show resolved Hide resolved
@Luthaf
Copy link
Contributor

Luthaf commented Jun 10, 2020

The last few changes seem to fix the Safari issue, now there is only the Azaphenacenes one to fix

@Luthaf
Copy link
Contributor

Luthaf commented Jun 11, 2020

The Azaphenacenes/on demand loading issue was not too hard to fix, and I also found & fixed an issue with initial setting placement. I've deployed a new beta at http://luthaf.fr/chemiscope/beta/pinning/, please play with it and try to break it!

Except for bugs found in the beta, this should be good to go!

@rosecers
Copy link
Collaborator Author

rosecers commented Jun 11, 2020

The Azaphenacenes/on demand loading issue was not too hard to fix, and I also found & fixed an issue with initial setting placement. I've deployed a new beta at http://luthaf.fr/chemiscope/beta/pinning/, please play with it and try to break it!

Except for bugs found in the beta, this should be good to go!

Is this error related to those in beta? I got it from switching from Arginine to CSD. (It doesn't occur with switching to any other dataset)
Screen Shot 2020-06-11 at 11 01 48 AM

@Luthaf
Copy link
Contributor

Luthaf commented Jun 11, 2020

Is this error related to those in beta?

By "bug found in beta" I mean bugs that will be found in beta, this is one of them! The error is weird, looks like a malformed input JSON. I have a slightly different error, I'll look into this if no-one beats me!

@Luthaf
Copy link
Contributor

Luthaf commented Jun 11, 2020

New blocker issue:

  • In 3D mode, the map markers are missing

@rosecers
Copy link
Collaborator Author

rosecers commented Jun 11, 2020

New blocker issue:

  • In 3D mode, the map markers are missing

I thought we didn't want them* in 3D?

Assuming the selected markers

@Luthaf
Copy link
Contributor

Luthaf commented Jun 11, 2020

Yeah, I am talking about the 'selected' markers. Why would we not want them? We had one marker before, I would rather keep it =)

@rosecers
Copy link
Collaborator Author

Yeah, I am talking about the 'selected' markers. Why would we not want them? We had one marker before, I would rather keep it =)

Can we make this part of a future PR? Whenever I didn't code them out it would freeze the 3D map

@ceriottm
Copy link
Contributor

Yeah, I am talking about the 'selected' markers. Why would we not want them? We had one marker before, I would rather keep it =)

Can we make this part of a future PR? Whenever I didn't code them out it would freeze the 3D map

I think they should be there, I also noticed they were missing, and it's a major regression as one can't see who is who, breaking the viewer/map relationship

@ceriottm
Copy link
Contributor

ceriottm commented Jun 11, 2020

Badass bug: whenever the 2D (but not the 3D!!) plot is redrawn, the last structure in the grid becomes the active one. Even just zooming in or out will transfer the focus to the last structure.

@ceriottm
Copy link
Contributor

Badass bug: whenever the 2D (but not the 3D!!) plot is redrawn, the last structure in the grid becomes the active one. Even just zooming in or out will transfer the focus to the last structure.

This seems related to the update_AllMarkers() call on line 1295. which incidentally I guess has to do with the fact that highlighted symbols do not automatically scale when mousewheel-zooming.

@Luthaf do you think this will be fixed by addressing #11 ?

@rosecers
Copy link
Collaborator Author

Badass bug: whenever the 2D (but not the 3D!!) plot is redrawn, the last structure in the grid becomes the active one. Even just zooming in or out will transfer the focus to the last structure.

This seems related to the update_AllMarkers() call on line 1295. which incidentally I guess has to do with the fact that highlighted symbols do not automatically scale when mousewheel-zooming.

@Luthaf do you think this will be fixed by addressing #11 ?

I know what this is from -- when switching from 3D to 2D, the map adds all of the markers back, and the add function makes the new marker the active one. I can fix this pretty easily I think.

@ceriottm
Copy link
Contributor

Was actually a separate bug in which just zooming in 2D would switch the active point. I pushed a fix but it's ugly, the problem is that updateMarkers function also changes the active point.
Also, related to the bug you fixed, there is still the reverse problem, when switching from 2D to 3D changes the active point.

@Luthaf
Copy link
Contributor

Luthaf commented Jun 12, 2020

Ok, this looks good to me. I rebased & force pushed since we had duplicated commits. If you want to check it out locally, make sure to use git fetch rosecers git reset --hard rosecers/feature/pinning, and not git pull.

rosecers and others added 11 commits June 12, 2020 16:06
The code no longer tries to load a structure in the constructor
…ctive. Had to do it somewhat hackily because the only properties available in the click event for comparison require iteration through all selected points. Will become slow if there are a lot of selected points.
…writing the set active function within structure.ts, which had been rewritten to streamline the code, but missed a few nuances:

	- structure.ts:
		- whenever you set the active button, it puts a whole domino effect in motion. Therefore we should avoid doing `this._active = guid` as it will ignore this domino effect.
		- when the grid is switching datasets/setting up anew/etc. there will be no `old` active
		- if the grid tries to select an active which doesn't exist on the grid, do nothing
		- there is now a catch to check if the active is already equal to the argument passed
	- map.ts
		- I've moved the onselect exclusively into select, so that it doesn't get triggered with marker aesthetics updates (as it previously was in updateSelectedMarker)
		- when going from 2D->3D and vv., save the current active and restore it after switching. With the previous note it should not be necessary, but it's a failsafe just in case
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants