Improve volume analytics layout, invoke placeholder functions

Author: adamcogen

code/gui.js

@@ -1524,6 +1524,8 @@ class DrumMachineGui {
                 circle.fill = self.configurations.buttonBehavior.buttonHoverColor
                 rowSelectionRectangle.stroke = self.configurations.buttonBehavior.buttonHoverColor
                 self.initializeRowVolumeAdjustmentHoverVariablesAndVisuals(rowIndex);
+                self.setAnalyticsBarToVolumesMode()
+                self.setAnalyticsBarVolumesModeText(self, rowIndex)
             }
         }
     }
@@ -1537,6 +1539,8 @@ class DrumMachineGui {
             rowSelectionRectangle.stroke = 'transparent'
             if (self.shiftToolTracker.selectedRowIndex === null && self.rowVolumeAdjustmentTracker.selectedRowIndex === null) {
                 self.unhighlightNoteCirclesForRowVolumeAdjustment();
+                self.hideAllAnalyticsBarText()
+                self.setAnalyticsBarVolumesModeText(self, -1, true)
             }
         }
     }
@@ -1565,6 +1569,8 @@ class DrumMachineGui {
             circle.fill = self.configurations.volumeAdjusterRowHandles.unselectedColor
             rowSelectionRectangle.stroke = self.configurations.volumeAdjusterRowHandles.unselectedColor
             self.unhighlightNoteCirclesForRowVolumeAdjustment();
+            self.hideAllAnalyticsBarText()
+            self.setAnalyticsBarVolumesModeText(self, -1, true)
         }
     }
 
@@ -3356,6 +3362,8 @@ class DrumMachineGui {
         } else {
             self.components.domElements.divs.bottomBarText.innerHTML = self.configurations.helpText.changeRowVolume
         }
+        self.setAnalyticsBarToVolumesMode()
+        self.setAnalyticsBarVolumesModeText(self, self.rowVolumeAdjustmentTracker.selectedRowIndex)
     }
 
     // this method is very messy. my top priority was to get it working, and not worry about duplicated code or using the most perfect straightforward logic flow.
@@ -3889,6 +3897,8 @@ class DrumMachineGui {
     rowVolumeAdjustmentWindowMouseUpHandler(self, event) {
         self.components.domElements.divs.bottomBarText.innerHTML = this.configurations.helpText.defaultText
         self.rowVolumeAdjustmentTracker.selectedRowIndex = null
+        self.hideAllAnalyticsBarText()
+        self.setAnalyticsBarVolumesModeText(self, -1, true)
         self.redrawSequencer();
         self.saveCurrentSequencerStateToUrlHash();
     }
@@ -4825,15 +4835,15 @@ class DrumMachineGui {
      */
     setAnalyticsBarVolumesModeText(self, sequencerRowIndex, hidedValues=false) {
         if (hidedValues || sequencerRowIndex < 0) {
-            self.components.domElements.text.analyticsBarVolumesModeMinimumVolumeForRowText.innerHTML = "minimum volume for row: -"
-            self.components.domElements.text.analyticsBarVolumesModeMaximumVolumeForRowText.innerHTML = "maximum volume for row: -"
+            self.components.domElements.text.analyticsBarVolumesModeMinimumVolumeForRowText.innerHTML = "minimum on row: -"
+            self.components.domElements.text.analyticsBarVolumesModeMaximumVolumeForRowText.innerHTML = "maximum on row: -"
             self.components.domElements.text.analyticsBarVolumesModeIsRowMutedText.innerHTML = "is row muted: -"
         }
         let minimumNoteVolumeForRow = 0;
         let maximumNoteVolumeForRow = 0;
         let isRowMuted = false;
-        self.components.domElements.text.analyticsBarVolumesModeMinimumVolumeForRowText.innerHTML = "minimum volume for row: " + minimumNoteVolumeForRow
-        self.components.domElements.text.analyticsBarVolumesModeMaximumVolumeForRowText.innerHTML = "maximum volume for row: " + maximumNoteVolumeForRow
+        self.components.domElements.text.analyticsBarVolumesModeMinimumVolumeForRowText.innerHTML = "minimum on row: " + minimumNoteVolumeForRow
+        self.components.domElements.text.analyticsBarVolumesModeMaximumVolumeForRowText.innerHTML = "maximum on row: " + maximumNoteVolumeForRow
         self.components.domElements.text.analyticsBarVolumesModeIsRowMutedText.innerHTML = "is row muted: " + isRowMuted
     }
 

index.html

@@ -200,17 +200,17 @@
                 border-left: 1px solid black;
                 height: 100px;
                 position: fixed;
-                left: 270px;
+                left: 410px;
                 padding-left: 50px;
             }
             #analytics-bar-volumes-mode-column-2-text {
                 /* border: 1px solid black; */
                 position: fixed;
-                left: 350px;
+                left: 670px;
             }
             #analytics-bar-volumes-mode-column-3-text {
                 position: fixed;
-                left: 550px;
+                left: 970px;
             }
         </style>
 
@@ -310,11 +310,11 @@
             </div>
             <div id="analytics-bar-volumes-mode-text-div">
                 <div id="analytics-bar-volumes-mode-column-1-text">
-                    <p>volume:</p>
+                    <p>volumes:</p>
                 </div>
                 <div id="analytics-bar-volumes-mode-column-2-text">
-                    <p id="analytics-minimum-volume-for-row-text">minimum volume for row: -</p>
-                    <p id="analytics-maximum-volume-for-row-text">maximum volume for row: -</p>
+                    <p id="analytics-minimum-volume-for-row-text">minimum on row: -</p>
+                    <p id="analytics-maximum-volume-for-row-text">maximum on row: -</p>
                 </div>
                 <div id="analytics-bar-volumes-mode-column-3-text">
                     <p id="analytics-is-row-muted-text">is row muted: -</p>