feat: add column count to table tooltip (#1382)

- Adds the "Number of Columns" value to the tooltip.
- Also converted to css-grid so things would line up nicely

Author: dsmmcken

packages/dashboard-core-plugins/src/panels/IrisGridPanel.scss

@@ -30,12 +30,4 @@ $panel-message-overlay-top: 30px;
 
 .grid-cursor-linker {
   cursor: crosshair;
-}
-
-.tab-tooltip-container {
-  .column-statistics-grid {
-    border-top: 1px solid $gray-500;
-    margin: 5px -15px 0;
-    font-weight: 300;
-  }
-}
+}

packages/dashboard-core-plugins/src/panels/IrisGridPanelTooltip.tsx

@@ -18,17 +18,23 @@ function IrisGridPanelTooltip(props: IrisGridPanelTooltipProps): ReactElement {
   const rowCount = (model?.rowCount ?? 0) - (model?.pendingRowCount ?? 0);
   const formattedRowCount = model?.displayString(rowCount, 'long');
 
+  const columnCount = model?.columnCount ?? 0;
+  const formattedcolumnCount = model?.displayString(columnCount, 'long');
+
   return (
     <WidgetPanelTooltip
       widgetType="Table"
       widgetName={widgetName}
       glContainer={glContainer}
       description={description}
     >
-      <div className="column-statistics-grid">
-        <span className="column-statistic-operation">Number of Rows</span>
-        <span className="column-statistic-value">{formattedRowCount}</span>
-      </div>
+      <hr className="tab-tooltip-divider" />
+      <span>Number of Columns</span>
+      <span className="tab-tooltip-statistic-value">
+        {formattedcolumnCount}
+      </span>
+      <span>Number of Rows</span>
+      <span className="tab-tooltip-statistic-value">{formattedRowCount}</span>
     </WidgetPanelTooltip>
   );
 }

packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.scss

@@ -1,23 +1,47 @@
+@import '@deephaven/components/scss/custom.scss';
+
 $tooltip-container-width: 300px;
-$tooltip-title-width: 110px;
 
-.tab-tooltip-container {
-  padding: 5px 15px;
+.tab-tooltip-grid-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: first baseline;
   max-width: $tooltip-container-width;
   text-align: left;
 
   .tab-tooltip-title {
-    min-width: $tooltip-title-width;
+    font-weight: 700;
+  }
+
+  .tab-tooltip-name-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: first baseline;
+    gap: $spacer-1;
   }
 
   .tab-tooltip-name {
-    max-width: $tooltip-container-width - $tooltip-title-width;
     word-break: break-word;
-    padding-left: 5px;
   }
 
-  .tab-tooltip-copy {
-    margin-left: 2px;
-    margin-top: -4px;
+  hr.tab-tooltip-divider {
+    grid-column: span 2;
+    width: 100%;
+    margin: $spacer-1 0;
+    border-color: $gray-500;
+  }
+
+  .tab-tooltip-description {
+    grid-column: span 2;
+    color: $text-muted;
+    padding-bottom: $spacer-1;
+  }
+
+  .tab-tooltip-statistic-value {
+    font-feature-settings: 'tnum';
+    text-align: right;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 }

packages/dashboard-core-plugins/src/panels/WidgetPanelTooltip.tsx

@@ -18,11 +18,9 @@ function WidgetPanelTooltip(props: WidgetPanelTooltipProps): ReactElement {
   const panelTitle = LayoutUtils.getTitleFromContainer(glContainer);
 
   return (
-    <div className="tab-tooltip-container">
-      <div className="row flex-nowrap align-items-start">
-        <span className="tab-tooltip-title">
-          <b>{widgetType} Name </b>
-        </span>
+    <div className="tab-tooltip-grid-container">
+      <span className="tab-tooltip-title">{widgetType} Name</span>
+      <div className="tab-tooltip-name-wrapper">
         <span className="tab-tooltip-name">{widgetName}</span>
         <CopyButton
           className="tab-tooltip-copy"
@@ -31,17 +29,13 @@ function WidgetPanelTooltip(props: WidgetPanelTooltipProps): ReactElement {
         />
       </div>
       {widgetName !== panelTitle && (
-        <div className="row">
-          <span className="tab-tooltip-title">
-            <b>Display Name</b>
-          </span>
+        <>
+          <span className="tab-tooltip-title">Display Name</span>
           <span className="tab-tooltip-name">{panelTitle}</span>
-        </div>
+        </>
       )}
       {description && (
-        <div className="row">
-          <span className="tab-tooltip-description">{description}</span>
-        </div>
+        <div className="tab-tooltip-description">{description}</div>
       )}
       {children}
     </div>