From d1ae101a10efbdeceb94ba6064b6c2c0bf3d9d33 Mon Sep 17 00:00:00 2001
From: Chris Matzenbach <chris.matzenbach@omnisci.com>
Date: Thu, 16 May 2024 16:10:02 -0500
Subject: [PATCH 1/4] Use flexbox, stop from overflowing, hide align bts when
 too smol

---
 dist/charting.css           | 24 +++++++++++++++---------
 dist/charting.js            | 13 +++++++------
 scss/chart.scss             | 21 ++++++++++++++-------
 src/charts/heavyai-table.js | 28 ++++++++++++++++------------
 4 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/dist/charting.css b/dist/charting.css
index 152d6c7c..f7eb5316 100644
--- a/dist/charting.css
+++ b/dist/charting.css
@@ -790,22 +790,28 @@ body {
     position: relative; }
   .dc-chart .table-header-item {
     position: relative;
-    white-space: nowrap; }
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    border-bottom: 1px solid #e2e2e2; }
+    .dc-chart .table-header-item .align-btn-container {
+      display: flex;
+      align-items: center; }
     .dc-chart .table-header-item .left-align-btn, .dc-chart .table-header-item .center-align-btn, .dc-chart .table-header-item .right-align-btn {
-      width: 18px;
-      height: 24px;
-      position: absolute;
+      min-width: 18px;
+      min-height: 24px;
       right: 0;
       top: 1px;
       padding: 4px 0px;
       cursor: pointer;
-      display: none; }
+      visibility: hidden; }
       .dc-chart .table-header-item .left-align-btn.active .svg-icon, .dc-chart .table-header-item .center-align-btn.active .svg-icon, .dc-chart .table-header-item .right-align-btn.active .svg-icon {
         fill: #22A7F0; }
       .dc-chart .table-header-item .left-align-btn:hover .svg-icon, .dc-chart .table-header-item .center-align-btn:hover .svg-icon, .dc-chart .table-header-item .right-align-btn:hover .svg-icon {
         fill: #22A7F0; }
     .dc-chart .table-header-item:hover .left-align-btn, .dc-chart .table-header-item:hover .center-align-btn, .dc-chart .table-header-item:hover .right-align-btn {
-      display: block; }
+      visibility: visible; }
     .dc-chart .table-header-item.isFiltered .unfilter-btn {
       display: block; }
     .dc-chart .table-header-item .unfilter-btn {
@@ -824,13 +830,13 @@ body {
   .dc-chart .null-value {
     font-style: italic; }
   .dc-chart .table-sort {
-    border-bottom: 1px solid #e2e2e2;
     color: #868686;
     font-size: 13px;
-    padding: 4px 24px 4px 20px;
+    padding: 4px 4px 4px 20px;
     background: white;
     position: relative;
-    cursor: text; }
+    cursor: text;
+    margin-right: auto; }
     .dc-chart .table-sort.active {
       color: #22A7F0; }
       .dc-chart .table-sort.active:after {
diff --git a/dist/charting.js b/dist/charting.js
index 97af9d18..f48f2e27 100644
--- a/dist/charting.js
+++ b/dist/charting.js
@@ -95005,12 +95005,11 @@ function heavyaiTable(parent, chartGroup) {
     table.selectAll("th").each(function (d, i) {
       var headerItem = dockedHeader.append("div").attr("class", "table-header-item").classed("isFiltered", function () {
         return d.expression in _filteredColumns;
-      });
+      }).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
       var sortLabel = headerItem.append("div").attr("class", "table-sort").classed("disabled", function () {
         var isString = data[0] ? typeof data[0]["col".concat(i)] === "string" : false;
         return !_isGroupedData && isString;
-      }).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
-      var textSpan = sortLabel.append("span").text(d.label);
+      }).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true);
       var sortButton = sortLabel.append("div").attr("class", "sort-btn").on("click", function () {
         _tableWrapper.selectAll(".table-sort").classed("active asc desc", false);
         if (_sortColumn && _sortColumn.index === i) {
@@ -95029,11 +95028,13 @@ function heavyaiTable(parent, chartGroup) {
         _chart._invokeSortListener(_sortColumn);
         _chart.redrawAsync();
       });
+      var textSpan = sortLabel.append("span").text(d.label);
       sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-sort");
       sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort-arrow", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-arrow1");
+      var alignBtnContainer = headerItem.append("div").attr("class", "align-btn-container");
 
       // left align button
-      headerItem.append("div").attr("class", "left-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "left-align-btn").classed("active", function () {
         return _chart.isColLeftAligned(i);
       }).on("click", function () {
         if (!_chart.isColLeftAligned(i)) {
@@ -95044,7 +95045,7 @@ function heavyaiTable(parent, chartGroup) {
       }).style("left", headerItem.node().getBoundingClientRect().width - 54 + "px").append("svg").attr("class", "svg-icon").classed("icon-caret-left", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-caret-left");
 
       // center align button
-      headerItem.append("div").attr("class", "center-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "center-align-btn").classed("active", function () {
         return _chart.isColCenterAligned(i);
       }).on("click", function () {
         if (!_chart.isColCenterAligned(i)) {
@@ -95055,7 +95056,7 @@ function heavyaiTable(parent, chartGroup) {
       }).style("left", headerItem.node().getBoundingClientRect().width - 36 + "px").append("svg").attr("class", "svg-icon").classed("icon-align-center", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-align-center");
 
       // right align button
-      headerItem.append("div").attr("class", "right-align-btn").classed("active", function () {
+      alignBtnContainer.append("div").attr("class", "right-align-btn").classed("active", function () {
         return _chart.isColRightAligned(i);
       }).on("click", function () {
         if (!_chart.isColRightAligned(i)) {
diff --git a/scss/chart.scss b/scss/chart.scss
index 6f9dcac5..fe26fa6e 100644
--- a/scss/chart.scss
+++ b/scss/chart.scss
@@ -676,16 +676,23 @@ body {
     .table-header-item {
         position: relative;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        border-bottom: 1px solid $gray2;
 
+        .align-btn-container {
+          display: flex;
+          align-items: center;
+        }
         .left-align-btn, .center-align-btn, .right-align-btn {
-            width: 18px;
-            height: 24px;
-            position: absolute;
+            min-width: 18px;
+            min-height: 24px;
             right: 0;
             top: 1px;
             padding: 4px 0px;
             cursor: pointer;
-            display: none;
+            visibility: hidden;
 
             &.active {
                 .svg-icon {
@@ -702,7 +709,7 @@ body {
 
         &:hover {
             .left-align-btn, .center-align-btn, .right-align-btn {
-                display: block;
+                visibility: visible;
             }
         }
 
@@ -741,13 +748,13 @@ body {
     }
 
     .table-sort {
-        border-bottom: 1px solid $gray2;
         color: $gray5;
         font-size: 13px;
-        padding: 4px 24px 4px 20px;
+        padding: 4px 4px 4px 20px;
         background: white;
         position: relative;
         cursor: text;
+        margin-right: auto;
 
         &.active {
             color: $blue-main;
diff --git a/src/charts/heavyai-table.js b/src/charts/heavyai-table.js
index 59f26d8c..5fa6c7fd 100644
--- a/src/charts/heavyai-table.js
+++ b/src/charts/heavyai-table.js
@@ -505,6 +505,13 @@ export default function heavyaiTable(parent, chartGroup) {
         .append("div")
         .attr("class", "table-header-item")
         .classed("isFiltered", () => d.expression in _filteredColumns)
+        .style(
+          "width",
+          d3
+            .select(this)
+            .node()
+            .getBoundingClientRect().width + "px"
+        )
 
       const sortLabel = headerItem
         .append("div")
@@ -517,15 +524,6 @@ export default function heavyaiTable(parent, chartGroup) {
         })
         .classed("active", _sortColumn ? _sortColumn.index === i : false)
         .classed(_sortColumn ? _sortColumn.order : "", true)
-        .style(
-          "width",
-          d3
-            .select(this)
-            .node()
-            .getBoundingClientRect().width + "px"
-        )
-
-      const textSpan = sortLabel.append("span").text(d.label)
 
       const sortButton = sortLabel
         .append("div")
@@ -548,6 +546,8 @@ export default function heavyaiTable(parent, chartGroup) {
           _chart.redrawAsync()
         })
 
+      const textSpan = sortLabel.append("span").text(d.label)
+
       sortButton
         .append("svg")
         .attr("class", "svg-icon")
@@ -564,8 +564,12 @@ export default function heavyaiTable(parent, chartGroup) {
         .append("use")
         .attr("xlink:href", "#icon-arrow1")
 
+      const alignBtnContainer = headerItem
+        .append("div")
+        .attr("class", "align-btn-container")
+
       // left align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "left-align-btn")
         .classed("active", () => _chart.isColLeftAligned(i))
@@ -588,7 +592,7 @@ export default function heavyaiTable(parent, chartGroup) {
         .attr("xlink:href", "#icon-caret-left")
 
       // center align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "center-align-btn")
         .classed("active", () => _chart.isColCenterAligned(i))
@@ -611,7 +615,7 @@ export default function heavyaiTable(parent, chartGroup) {
         .attr("xlink:href", "#icon-align-center")
 
       // right align button
-      headerItem
+      alignBtnContainer
         .append("div")
         .attr("class", "right-align-btn")
         .classed("active", () => _chart.isColRightAligned(i))

From 0dd020ee34e26cbe7168fd813be08df3d0b8e0f4 Mon Sep 17 00:00:00 2001
From: Chris Matzenbach <chris.matzenbach@omnisci.com>
Date: Fri, 17 May 2024 09:52:30 -0500
Subject: [PATCH 2/4] FIxed icon alignment and border

---
 dist/charting.css | 9 +++++----
 scss/chart.scss   | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/dist/charting.css b/dist/charting.css
index f7eb5316..7ee12daa 100644
--- a/dist/charting.css
+++ b/dist/charting.css
@@ -784,7 +784,8 @@ body {
     left: 0;
     width: 100%;
     padding: 0 12px;
-    overflow: hidden; }
+    overflow: hidden;
+    border-bottom: 1px solid #e2e2e2; }
   .dc-chart .docked-table-header {
     display: flex;
     position: relative; }
@@ -793,8 +794,7 @@ body {
     white-space: nowrap;
     display: flex;
     align-items: center;
-    flex-direction: row;
-    border-bottom: 1px solid #e2e2e2; }
+    flex-direction: row; }
     .dc-chart .table-header-item .align-btn-container {
       display: flex;
       align-items: center; }
@@ -805,7 +805,8 @@ body {
       top: 1px;
       padding: 4px 0px;
       cursor: pointer;
-      visibility: hidden; }
+      visibility: hidden;
+      display: flex; }
       .dc-chart .table-header-item .left-align-btn.active .svg-icon, .dc-chart .table-header-item .center-align-btn.active .svg-icon, .dc-chart .table-header-item .right-align-btn.active .svg-icon {
         fill: #22A7F0; }
       .dc-chart .table-header-item .left-align-btn:hover .svg-icon, .dc-chart .table-header-item .center-align-btn:hover .svg-icon, .dc-chart .table-header-item .right-align-btn:hover .svg-icon {
diff --git a/scss/chart.scss b/scss/chart.scss
index fe26fa6e..61bf4713 100644
--- a/scss/chart.scss
+++ b/scss/chart.scss
@@ -666,6 +666,7 @@ body {
         width: 100%;
         padding: 0 12px;
         overflow: hidden;
+        border-bottom: 1px solid $gray2;
     }
 
     .docked-table-header {
@@ -679,7 +680,6 @@ body {
         display: flex;
         align-items: center;
         flex-direction: row;
-        border-bottom: 1px solid $gray2;
 
         .align-btn-container {
           display: flex;
@@ -693,6 +693,7 @@ body {
             padding: 4px 0px;
             cursor: pointer;
             visibility: hidden;
+            display: flex;
 
             &.active {
                 .svg-icon {

From 917507d7768bb83e7f80477346217ca64ba9e761 Mon Sep 17 00:00:00 2001
From: Chris Matzenbach <chris.matzenbach@omnisci.com>
Date: Fri, 17 May 2024 11:49:23 -0500
Subject: [PATCH 3/4] Remove old positioning props

---
 scss/chart.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/scss/chart.scss b/scss/chart.scss
index 61bf4713..f093af8a 100644
--- a/scss/chart.scss
+++ b/scss/chart.scss
@@ -688,8 +688,6 @@ body {
         .left-align-btn, .center-align-btn, .right-align-btn {
             min-width: 18px;
             min-height: 24px;
-            right: 0;
-            top: 1px;
             padding: 4px 0px;
             cursor: pointer;
             visibility: hidden;

From a853c0c87162a06b47186ad598ef823b9bcbd7bd Mon Sep 17 00:00:00 2001
From: Chris Matzenbach <chris.matzenbach@omnisci.com>
Date: Mon, 20 May 2024 10:30:24 -0500
Subject: [PATCH 4/4] Update build files

---
 dist/charting.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/dist/charting.css b/dist/charting.css
index 7ee12daa..014086b0 100644
--- a/dist/charting.css
+++ b/dist/charting.css
@@ -801,8 +801,6 @@ body {
     .dc-chart .table-header-item .left-align-btn, .dc-chart .table-header-item .center-align-btn, .dc-chart .table-header-item .right-align-btn {
       min-width: 18px;
       min-height: 24px;
-      right: 0;
-      top: 1px;
       padding: 4px 0px;
       cursor: pointer;
       visibility: hidden;