From 9cae3ab22e1146316ac215b538f5ac1626e8c70d Mon Sep 17 00:00:00 2001
From: Michele Ceriotti <michele.ceriotti@gmail.com>
Date: Thu, 14 Dec 2023 16:50:01 -0800
Subject: [PATCH] Fixed `element` colorbar display

---
 src/map/map.ts          | 20 ++++++++++----------
 src/structure/viewer.ts | 32 ++++++++++++++++----------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/map/map.ts b/src/map/map.ts
index e9b9c5ebd..32340b13b 100644
--- a/src/map/map.ts
+++ b/src/map/map.ts
@@ -294,16 +294,6 @@ export class PropertiesMap {
             throw Error(message);
         }
 
-        this._options = new MapOptions(
-            this._root,
-            currentProperties,
-            (rect) => this.positionSettingsModal(rect),
-            config.settings
-        );
-        this._colorReset = this._options.getModalElement<HTMLButtonElement>('map-color-reset');
-
-        this._connectSettings();
-
         // By default, position the modal for settings on top of the plot,
         // centered horizontally
         this.positionSettingsModal = (rect: DOMRect) => {
@@ -314,6 +304,16 @@ export class PropertiesMap {
             };
         };
 
+        this._options = new MapOptions(
+            this._root,
+            currentProperties,
+            (rect) => this.positionSettingsModal(rect),
+            config.settings
+        );
+        this._colorReset = this._options.getModalElement<HTMLButtonElement>('map-color-reset');
+
+        this._connectSettings();
+
         this._createPlot();
 
         // This is done last as the plot needs to be created to obtain its
diff --git a/src/structure/viewer.ts b/src/structure/viewer.ts
index ac2aa42ab..96c7c1e10 100644
--- a/src/structure/viewer.ts
+++ b/src/structure/viewer.ts
@@ -252,6 +252,16 @@ export class MoleculeViewer {
             noPropsStyle,
         ];
 
+        // By default, position the modal for settings on top of the viewer,
+        // centered horizontally
+        this.positionSettingsModal = (rect: DOMRect) => {
+            const rootRect = this._root.getBoundingClientRect();
+            return {
+                left: rootRect.left - rect.width + 500,
+                top: rootRect.top + 20,
+            };
+        };
+
         this._options = new StructureOptions(
             this._root,
             (rect) => this.positionSettingsModal(rect),
@@ -272,16 +282,6 @@ export class MoleculeViewer {
         this._connectOptions();
         this._trajectoryOptions = this._options.getModalElement('trajectory-settings-group');
 
-        // By default, position the modal for settings on top of the viewer,
-        // centered horizontally
-        this.positionSettingsModal = (rect: DOMRect) => {
-            const rootRect = this._root.getBoundingClientRect();
-            return {
-                left: rootRect.left + rootRect.width / 2, // - rect.width / 2,
-                top: rootRect.top + 20,
-            };
-        };
-
         // Hack to reverse the scroll direction of 3dmol to match that of Plotly
         // The wheel event is captured on the parent of the canvas, modified
         // and then dispatched on the canvas.
@@ -1749,7 +1749,7 @@ export class MoleculeViewer {
 
         return {
             min: this._viewer.addLabel(
-                fixedWidthFloat(min)+"-",
+                fixedWidthFloat(min) + '-',
                 this._colorBarLabelsSpec({
                     x: viewerWidth - (horizontalShift + width - 5),
                     y: viewerHeight - (titleHeight + 8),
@@ -1758,7 +1758,7 @@ export class MoleculeViewer {
                 })
             ),
             mid: this._viewer.addLabel(
-                fixedWidthFloat(mid)+"-",
+                fixedWidthFloat(mid) + '-',
                 this._colorBarLabelsSpec({
                     x: viewerWidth - (horizontalShift + width - 5),
                     y: viewerHeight - (titleHeight + height / 2),
@@ -1767,7 +1767,7 @@ export class MoleculeViewer {
                 })
             ),
             max: this._viewer.addLabel(
-                fixedWidthFloat(max)+"-",
+                fixedWidthFloat(max) + '-',
                 this._colorBarLabelsSpec({
                     x: viewerWidth - (horizontalShift + width - 5),
                     y: viewerHeight - (titleHeight + height - 8),
@@ -1836,9 +1836,9 @@ export class MoleculeViewer {
 
     private _updateColorBar() {
         this._deleteColorBar();
-        // if (this._options.color.property.value !== 'element') {
-        this._colorBar = this._addColorBar();
-        // }
+        if (this._options.color.property.value !== 'element') {
+            this._colorBar = this._addColorBar();
+        }
     }
 }