Merge branch '309-allow-plugin-to-hide-left-panel' into 'development'

Resolve "Allow plugin to hide left panel"

Closes #309

See merge request !306

CHANGELOG

@@ -2,9 +2,19 @@ minerva-front (19.0.0~alpha.0) stable; urgency=medium
   * Feature: support for matomo (#289)
   * Feature: allow plugin to not have a panel (#306)
   * Feature: allow plugin to add menu option to context menu (#307)
+  * Feature: allow plugin to access info about opened panel (#309)
+  * Feature: allow plugin to hide opened panel (#309)
+  * Feature: allow plugin to open left panel (#309)
 
  -- Piotr Gawron <piotr.gawron@uni.lu>  Fri, 18 Oct 2024 13:00:00 +0200
 
+minerva-front (18.0.3) stable; urgency=medium
+  * Bug fix: Molart froze after clicking (#313)
+  * Bug fix: missing description and modifications added to element and
+    reaction summary (#314)
+
+ -- Piotr Gawron <piotr.gawron@uni.lu>  Fri, 08 Nov 2024 13:00:00 +0200
+
 minerva-front (18.0.2) stable; urgency=medium
   * Bug fix: Terms of Service modal is not hidden by Select project modal when
     login via ORCID (#305)
@@ -14,7 +24,7 @@ minerva-front (18.0.2) stable; urgency=medium
  -- Piotr Gawron <piotr.gawron@uni.lu>  Wed, 30 Oct 2024 13:00:00 +0200
 
 minerva-front (18.0.1) stable; urgency=medium
-  * Bug fix: show cookie baner only when cookie baner link is provided (#304)
+  * Bug fix: show cookie banner only when cookie banner link is provided (#304)
   * Bug fix: when link to submap is provided add submap name (#303)
   * Bug fix: some old maps could not be opened (#311)
 

docs/plugins/interface.md

+### Interface
+
+#### getOpenedPanel
+
+Return string identifying panel that is currently opened. Available options:
+
+```
+undefined
+'none'
+'search'
+'project-info'
+'plugins'
+'export'
+'legend'
+'submaps'
+'reaction'
+'overlays'
+'bio-entity'
+'comment'
+'available-plugins'
+'layers';
+```
+
+##### Example of getOpenedPanel method usage:
+
+```javascript
+window.minerva.map.data.getOpenedPanel();
+```
+
+#### hidePanel
+
+Close opened panel.
+
+##### Example of hidePanel method usage:
+
+```javascript
+//close specific panel if the panel is opened
+window.minerva.map.data.hidePanel('available-plugins');
+
+//close the panel (regardless which one is opened)
+window.minerva.map.data.hidePanel('available-plugins');
+```
+
+#### OpenPanel
+
+Open specified panel.
+
+##### Example of openPanel method usage:
+
+```javascript
+window.minerva.map.data.openPanel('available-plugins');
+```

index.d.ts

@@ -2,7 +2,6 @@ import { getBounds } from '@/services/pluginsManager/map/data/getBounds';
 import { fitBounds } from '@/services/pluginsManager/map/fitBounds';
 import { getOpenMapId } from '@/services/pluginsManager/map/getOpenMapId';
 import { triggerSearch } from '@/services/pluginsManager/map/triggerSearch';
-import { MinervaConfiguration } from '@/services/pluginsManager/pluginsManager';
 import { getModels } from '@/services/pluginsManager/map/models/getModels';
 import { openMap } from '@/services/pluginsManager/map/openMap';
 import { getCenter } from '@/services/pluginsManager/map/position/getCenter';
@@ -21,6 +20,8 @@ import { hideDataOverlay } from '@/services/pluginsManager/map/overlays/hideData
 import { removeDataOverlay } from '@/services/pluginsManager/map/overlays/removeDataOverlay';
 import { addDataOverlay } from '@/services/pluginsManager/map/overlays/addDataOverlay';
 import { getApiUrls } from '@/services/pluginsManager/project/data/getApiUrls';
+import { getOpenedPanel } from '@/services/pluginsManager/interface/getOpenedPanel';
+import { hidePanel } from '@/services/pluginsManager/interface/hidePanel';
 
 type Plugin = {
   pluginName: string;
@@ -73,6 +74,11 @@ declare global {
         getCenter: typeof getCenter;
         setCenter: typeof setCenter;
       };
+      interface: {
+        getOpenedPanel: typeof getOpenedPanel;
+        hidePanel: typeof hidePanel;
+        openPanel: typeof openPanel;
+      };
       overviewImage: {
         getCurrentOverviewImage: typeof getCurrentOverviewImage;
         getOverviewImages: typeof getOverviewImages;

package-lock.json

@@ -23,7 +23,7 @@
         "downshift": "8.3.1",
         "eslint-config-next": "13.4.19",
         "is-uuid": "1.0.2",
-        "molart": "github:davidhoksza/MolArt",
+        "molart": "1.15.0",
         "next": "13.4.19",
         "ol": "10.2.0",
         "polished": "4.3.1",
@@ -10442,22 +10442,22 @@
       }
     },
     "node_modules/molart": {
-      "version": "1.16.0",
-      "resolved": "git+ssh://git@github.com/davidhoksza/MolArt.git#7fa1d23558af0938bd74621ff2ee125f9a4c8d05",
-      "license": "Apache-2.0",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/molart/-/molart-1.15.0.tgz",
+      "integrity": "sha512-9Mq880f/wEh0uQz/pvwNJPA3Fe+ZQZH19/K0yfU9ruNFLoouxzfza6Bc6NU9o7IIv8PULQbXyNToO6HPeaUxTw==",
       "dependencies": {
         "@types/downloadjs": "^1.4.2",
-        "color-blend": "1.0.0",
+        "color-blend": "^1.0.0",
         "downloadjs": "^1.4.7",
         "events": "^1.1.1",
         "jquery": "^3.6.0",
         "litemol": "github:dsehnal/LiteMol",
         "lodash": "^4.17.21",
         "ProtVista": "git+https://github.com/davidhoksza/protvista.git#scaling",
-        "semantic-ui-button": "2.2.12",
-        "semantic-ui-dropdown": "2.2.12",
-        "semantic-ui-label": "2.2.12",
-        "semantic-ui-transition": "2.2.12"
+        "semantic-ui-button": "^2.3.2",
+        "semantic-ui-dropdown": "^2.2.12",
+        "semantic-ui-label": "^2.2.12",
+        "semantic-ui-transition": "^2.2.12"
       }
     },
     "node_modules/moo-color": {
@@ -12319,9 +12319,9 @@
       "integrity": "sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ=="
     },
     "node_modules/semantic-ui-button": {
-      "version": "2.2.12",
-      "resolved": "https://registry.npmjs.org/semantic-ui-button/-/semantic-ui-button-2.2.12.tgz",
-      "integrity": "sha512-z5E23bbb2txw60/Dgekf/1qDyFvU1JahiG05/XqOLaLCutXoep3cMtcFRoeyID6b2EwPQ84IHFXVskL3LNXQuQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/semantic-ui-button/-/semantic-ui-button-2.5.0.tgz",
+      "integrity": "sha512-Td9gq4hO97Wz/9SbW1ZOQvm2+GiHjomCKfo3tbk8QTcMMKO3C4nsirxOf6IFqXxaOoYfrOlsw/srGD7shHcIqA=="
     },
     "node_modules/semantic-ui-dropdown": {
       "version": "2.2.12",
@@ -21721,21 +21721,22 @@
       "dev": true
     },
     "molart": {
-      "version": "git+ssh://git@github.com/davidhoksza/MolArt.git#7fa1d23558af0938bd74621ff2ee125f9a4c8d05",
-      "from": "molart@github:davidhoksza/MolArt",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/molart/-/molart-1.15.0.tgz",
+      "integrity": "sha512-9Mq880f/wEh0uQz/pvwNJPA3Fe+ZQZH19/K0yfU9ruNFLoouxzfza6Bc6NU9o7IIv8PULQbXyNToO6HPeaUxTw==",
       "requires": {
         "@types/downloadjs": "^1.4.2",
-        "color-blend": "1.0.0",
+        "color-blend": "^1.0.0",
         "downloadjs": "^1.4.7",
         "events": "^1.1.1",
         "jquery": "^3.6.0",
         "litemol": "github:dsehnal/LiteMol",
         "lodash": "^4.17.21",
         "ProtVista": "git+https://github.com/davidhoksza/protvista.git#scaling",
-        "semantic-ui-button": "2.2.12",
-        "semantic-ui-dropdown": "2.2.12",
-        "semantic-ui-label": "2.2.12",
-        "semantic-ui-transition": "2.2.12"
+        "semantic-ui-button": "^2.3.2",
+        "semantic-ui-dropdown": "^2.2.12",
+        "semantic-ui-label": "^2.2.12",
+        "semantic-ui-transition": "^2.2.12"
       }
     },
     "moo-color": {
@@ -22984,9 +22985,9 @@
       "integrity": "sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ=="
     },
     "semantic-ui-button": {
-      "version": "2.2.12",
-      "resolved": "https://registry.npmjs.org/semantic-ui-button/-/semantic-ui-button-2.2.12.tgz",
-      "integrity": "sha512-z5E23bbb2txw60/Dgekf/1qDyFvU1JahiG05/XqOLaLCutXoep3cMtcFRoeyID6b2EwPQ84IHFXVskL3LNXQuQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/semantic-ui-button/-/semantic-ui-button-2.5.0.tgz",
+      "integrity": "sha512-Td9gq4hO97Wz/9SbW1ZOQvm2+GiHjomCKfo3tbk8QTcMMKO3C4nsirxOf6IFqXxaOoYfrOlsw/srGD7shHcIqA=="
     },
     "semantic-ui-dropdown": {
       "version": "2.2.12",

package.json

@@ -37,7 +37,7 @@
     "downshift": "8.3.1",
     "eslint-config-next": "13.4.19",
     "is-uuid": "1.0.2",
-    "molart": "github:davidhoksza/MolArt",
+    "molart": "1.15.0",
     "next": "13.4.19",
     "ol": "10.2.0",
     "polished": "4.3.1",

public/config.js

@@ -6,6 +6,6 @@ window.config = {
   BASE_API_URL: `${root}/minerva/api`,
   BASE_NEW_API_URL: `${root}/minerva/new_api/`,
   BASE_MAP_IMAGES_URL: `${root}/`,
-  DEFAULT_PROJECT_ID: 'sample',
+  DEFAULT_PROJECT_ID: 'minervar_example',
   ADMIN_PANEL_URL: `${root}/minerva/admin.xhtml`,
 };

src/components/FunctionalArea/Modal/MolArtModal/MolArtModal.component.tsx

@@ -21,6 +21,7 @@ export const MolArtModal: React.FC = () => {
       molart = new MolArt({
         uniprotId: uniprot,
         containerId,
+        customDataSources: [],
       });
     } catch (e) {
       // eslint-disable-next-line no-console

src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx

@@ -14,6 +14,7 @@ import { DrawerHeading } from '@/shared/DrawerHeading';
 import { ElementSearchResultType } from '@/types/models';
 import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/CommentItem.component';
 import { getTypeBySBOTerm } from '@/utils/bioEntity/getTypeBySBOTerm';
+import { ModificationResidueItem } from '@/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem';
 import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
 import { AnnotationItem } from './AnnotationItem';
 import { AssociatedSubmap } from './AssociatedSubmap';
@@ -42,6 +43,10 @@ export const BioEntityDrawer = (): React.ReactNode => {
 
   const isReferenceAvailable = bioEntityData.references.length > ZERO;
   const isCommentAvailable = commentsData.length > ZERO;
+  const modificationResidues = (
+    bioEntityData.modificationResidues ? bioEntityData.modificationResidues : []
+  ).filter(modificationResidue => modificationResidue.state && modificationResidue.state !== '');
+  const isModificationAvailable = modificationResidues.length > ZERO;
 
   const type = getTypeBySBOTerm(bioEntityData.sboTerm);
 
@@ -64,6 +69,17 @@ export const BioEntityDrawer = (): React.ReactNode => {
             Full name: <b className="font-semibold">{bioEntityData.fullName}</b>
           </div>
         )}
+        {bioEntityData.notes && <div className="text-sm font-normal">{bioEntityData.notes}</div>}
+        {isModificationAvailable && (
+          <h3 className="font-semibold">Post-translational modifications:</h3>
+        )}
+        {isModificationAvailable && (
+          <ul className="ml-5 list-disc">
+            {modificationResidues.map(residue => (
+              <ModificationResidueItem key={residue.id} state={residue.state} name={residue.name} />
+            ))}
+          </ul>
+        )}
         <h3 className="font-semibold">
           Annotations:{' '}
           {!isReferenceAvailable && <span className="font-normal">No annotations</span>}

src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/ModificationResidueItem.component.tsx

+import { ModificationResidue } from '@/types/models';
+
+type ModificationResidueItemProps = Pick<ModificationResidue, 'state' | 'name'>;
+
+export const ModificationResidueItem = ({
+  state,
+  name,
+}: ModificationResidueItemProps): JSX.Element => (
+  <li>
+    <span>
+      {state} {name && <span>at position {name}</span>}
+    </span>
+  </li>
+);

src/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem/index.ts

+export { ModificationResidueItem } from './ModificationResidueItem.component';

src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx

@@ -37,6 +37,7 @@ export const ReactionDrawer = (): React.ReactNode => {
           Type: <b className="font-semibold">{reaction.type}</b>
         </div>
         <hr className="border-b border-b-divide" />
+        {reaction.notes && <div className="text-sm font-normal">{reaction.notes}</div>}
         <h3 className="font-semibold">Annotations:</h3>
         {referencesGrouped.map(group => (
           <ReferenceGroup key={group.source} group={group} />

src/redux/drawer/drawer.selectors.ts

@@ -147,3 +147,10 @@ export const searchDrawerOpenSelector = createSelector(
 export const resultDrawerOpen = createSelector(drawerSelector, drawer => {
   return drawer.isOpen && RESULT_DRAWERS.includes(drawer.drawerName);
 });
+
+export const openedDrawerSelector = createSelector(drawerSelector, drawer => {
+  if (drawer.isOpen) {
+    return drawer.drawerName;
+  }
+  return undefined;
+});

src/services/pluginsManager/interface/getOpenedPanel.ts

+import { store } from '@/redux/store';
+import { openedDrawerSelector } from '@/redux/drawer/drawer.selectors';
+
+export const getOpenedPanel = (): string | undefined => {
+  const { getState } = store;
+  const drawerName = openedDrawerSelector(getState());
+
+  return drawerName;
+};

src/services/pluginsManager/interface/hidePanel.ts

+import { store } from '@/redux/store';
+import { openedDrawerSelector } from '@/redux/drawer/drawer.selectors';
+import { DrawerName } from '@/types/drawerName';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+
+export const hidePanel = (panelName: DrawerName | undefined): void => {
+  const { getState, dispatch } = store;
+  const drawerName = openedDrawerSelector(getState());
+
+  if (panelName === drawerName || panelName === undefined) {
+    dispatch(closeDrawer());
+  }
+};

src/services/pluginsManager/interface/openPanel.ts

+import { store } from '@/redux/store';
+import { DrawerName } from '@/types/drawerName';
+import { openDrawer } from '@/redux/drawer/drawer.slice';
+
+export const openPanel = (panelName: DrawerName): void => {
+  const { dispatch } = store;
+  dispatch(openDrawer(panelName));
+};

src/services/pluginsManager/pluginsManager.ts

@@ -9,6 +9,9 @@ import { getPluginHashWithoutPrefix } from '@/utils/plugins/getPluginHashWithout
 import { ONE, ZERO } from '@/constants/common';
 import { minervaDefine } from '@/services/pluginsManager/map/minervaDefine';
 import { PluginsContextMenu } from '@/services/pluginsManager/pluginContextMenu/pluginsContextMenu';
+import { getOpenedPanel } from '@/services/pluginsManager/interface/getOpenedPanel';
+import { hidePanel } from '@/services/pluginsManager/interface/hidePanel';
+import { openPanel } from '@/services/pluginsManager/interface/openPanel';
 import { bioEntitiesMethods } from './bioEntities';
 import { getModels } from './map/models/getModels';
 import { openMap } from './map/openMap';
@@ -78,6 +81,11 @@ export const PluginsManager: PluginsManagerType = {
       data: {
         bioEntities: bioEntitiesMethods,
       },
+      interface: {
+        getOpenedPanel,
+        hidePanel,
+        openPanel,
+      },
       map: {
         data: {
           getBounds,

src/types/models.ts

@@ -83,6 +83,7 @@ import { shapeRelAbsBezierPointSchema } from '@/models/shapeRelAbsBezierPointSch
 import { newReactionSchema } from '@/models/newReactionSchema';
 import { reactionProduct } from '@/models/reactionProduct';
 import { operatorSchema } from '@/models/operatorSchema';
+import { modificationResiduesSchema } from '@/models/modificationResiduesSchema';
 
 export type Project = z.infer<typeof projectSchema>;
 export type OverviewImageView = z.infer<typeof overviewImageView>;
@@ -164,6 +165,7 @@ export type MarkerSurface = z.infer<typeof markerSurfaceSchema>;
 export type MarkerLine = z.infer<typeof markerLineSchema>;
 export type MarkerWithPosition = z.infer<typeof markerWithPositionSchema>;
 export type Marker = z.infer<typeof markerSchema>;
+export type ModificationResidue = z.infer<typeof modificationResiduesSchema>;
 export type JavaStacktrace = z.infer<typeof javaStacktraceSchema>;
 export type Comment = z.infer<typeof commentSchema>;