Gray out unselected rows in table

web-common/src/features/dashboards/pivot/Pivot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import "regular-table";
-  import "regular-table/dist/css/material.css";
+  import "./regular-table-style.css";
   import type { RegularTableElement } from "regular-table";
   import { createEventDispatcher, onMount } from "svelte";
   import type { PivotPos, PivotRenderCallback } from "./types";

web-common/src/features/dashboards/pivot/regular-table-style.css

@@ -0,0 +1,39 @@
+/* Copy of regular-table/dist/css/material.css with some styles removed */
+
+regular-table tbody td,regular-table thead th:not(.rt-group-corner){transform:translate(var(--regular-table--transform-x,0px),0);}
+regular-table tbody{transform:translate(0,var(--regular-table--transform-y,0px));}
+regular-table tbody tr:first-child td,regular-table tbody tr:first-child th{-webkit-clip-path:polygon(0 var(--regular-table--clip-y,0),0 100%,100% 100%,100% var(--regular-table--clip-y,0));clip-path:polygon(0 var(--regular-table--clip-y,0),0 100%,100% 100%,100% var(--regular-table--clip-y,0));}
+regular-table tbody tr td:first-of-type{-webkit-clip-path:polygon(var(--regular-table--clip-x,0)0,var(--regular-table--clip-x,0)100%,100% 100%,100% 0);clip-path:polygon(var(--regular-table--clip-x,0)0,var(--regular-table--clip-x,0)100%,100% 100%,100% 0);}
+regular-table tbody tr:first-child td:first-of-type{-webkit-clip-path:polygon(var(--regular-table--clip-x,0)var(--regular-table--clip-y,0),var(--regular-table--clip-x,0)100%,100% 100%,100% var(--regular-table--clip-y,0));clip-path:polygon(var(--regular-table--clip-x,0)var(--regular-table--clip-y,0),var(--regular-table--clip-x,0)100%,100% 100%,100% var(--regular-table--clip-y,0));}
+regular-table{padding-top:12px;padding-left:12px;padding-bottom:0;padding-right:0;scrollbar-color:transparent transparent;scrollbar-width:thin;outline:none;}
+regular-table:hover{scrollbar-color:rgba(0,0,0,0.3)transparent;}
+regular-table div[tabindex]{outline:none;}
+regular-table>div{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;}
+regular-table th{text-align:center;}
+regular-table thead tr:not(:last-child) th{overflow:hidden;max-width:0px;}
+regular-table thead tr:last-child .rt-float,regular-table tbody .rt-float{text-align:right;}
+regular-table thead .rt-integer,regular-table tbody .rt-integer{text-align:right;}
+regular-table tbody th{text-align:left;}
+regular-table span.rt-tree-container{display:flex;align-items:center;height:100%;}
+regular-table thead .rt-string,regular-table tbody .rt-string,regular-table thead .rt-date,regular-table tbody .rt-date,regular-table thead .rt-datetime,regular-table tbody .rt-datetime{text-align:left;}
+regular-table thead tr:last-child th{border-bottom:1px solid#ddd;}
+regular-table th{position:relative;}
+regular-table tr th span.rt-tree-group{margin-left:5px;margin-right:15px;border-left:1px solid#eee;height:100%;}
+regular-table td,regular-table th{white-space:nowrap;font-size:12px;padding-right:5px;padding-left:5px;padding-top:0px;padding-bottom:0px;height:19px;}
+regular-table table *{box-sizing:border-box;}
+regular-table table{position:absolute;overflow:hidden;color:#666;outline:none;}
+regular-table span.rt-row-header-icon{color:#aaa;padding-right:4px;font-family:"Material Icons";}
+regular-table span.rt-column-header-icon{font-size:10px;padding-left:3px;display:inline-block;width:10px;font-family:"Material Icons";}
+regular-table span.rt-row-header-icon:hover{color:#1a7da1;text-shadow:0px 0px 3px#1a7da1;}
+regular-table .rt-selected td{background-color:#eee;}
+regular-table .rt-cell-clip{overflow:hidden;text-overflow:ellipsis;}
+regular-table td span.rt-group-name,regular-table th span.rt-group-name{margin-right:-5px;padding-right:5px;padding-left:8px;flex:1;height:100%;}
+regular-table th span.rt-group-name{text-align:left;}
+regular-table td th span.rt-group-leaf,regular-table th span.rt-group-leaf{margin-left:16px;height:100%;}
+regular-table .rt-column-resize{height:100%;width:10px;position:absolute;top:0;right:0;cursor:col-resize;}
+regular-table::-webkit-scrollbar,regular-table::-webkit-scrollbar-corner{background-color:transparent;height:12px;width:12px;}
+regular-table::-webkit-scrollbar-thumb{background-clip:content-box;background-color:rgba(0,0,0,0);border-radius:5px;}
+regular-table::-webkit-scrollbar-thumb:horizontal{border-bottom:2px solid transparent;border-top:2px solid transparent;}
+regular-table::-webkit-scrollbar-thumb:vertical{border-left:2px solid transparent;border-right:2px solid transparent;}
+regular-table:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);}
+regular-table::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.3);}

web-common/src/features/dashboards/time-dimension-details/TDDTable.svelte

@@ -54,15 +54,15 @@
   const renderCell: PivotRenderCallback = (data) => {
     const classesToAdd = ["text-right"];
     const classesToRemove = [
-      "!bg-white",
-      "!bg-gray-100",
-      "!bg-gray-200",
-      "!bg-blue-50",
-      "!bg-blue-100",
-      "!bg-blue-200",
-      "!bg-slate-50",
-      "!bg-slate-100",
-      "!bg-slate-200",
+      "bg-white",
+      "bg-gray-100",
+      "bg-gray-200",
+      "bg-blue-50",
+      "bg-blue-100",
+      "bg-blue-200",
+      "bg-slate-50",
+      "bg-slate-100",
+      "bg-slate-200",
     ];
 
     if (data.y === 2) {
@@ -124,34 +124,44 @@
   const getMarker = (value, y) => {
     if (y === 0) {
       noSelectionMarkerCount = 0;
-      return ``;
+      return { icon: ``, muted: false };
     }
     const visibleIdx = tableData?.selectedValues.indexOf(value.value);
 
     if (comparing === "time") {
-      if (y == 1) return SelectedCheckmark("fill-blue-500");
-      else if (y == 2) return SelectedCheckmark("fill-gray-300");
-      else return ``;
+      let icon = "";
+      if (y == 1) icon = SelectedCheckmark("fill-blue-500");
+      else if (y == 2) icon = SelectedCheckmark("fill-gray-300");
+      return { icon, muted: false };
     }
 
     if (visibleIdx > -1) {
-      if (excludeMode) return ExcludeIcon;
+      if (excludeMode) return { icon: ExcludeIcon, muted: true };
       // Only show colored markers for first 11 selected values
       else
-        return SelectedCheckmark(
-          "fill-" +
-            (visibleIdx < 11 ? CHECKMARK_COLORS[visibleIdx] : "gray-300")
-        );
+        return {
+          icon: SelectedCheckmark(
+            "fill-" +
+              (visibleIdx < 11 ? CHECKMARK_COLORS[visibleIdx] : "gray-300")
+          ),
+          muted: false,
+        };
     } else if (noSelectionMarkerCount < 3) {
       if (excludeMode || !tableData?.selectedValues.length) {
         noSelectionMarkerCount += 1;
-        return `<div class="rounded-full bg-${
-          CHECKMARK_COLORS[noSelectionMarkerCount - 1]
-        }" style="width: 13px; height: 13px;"></div>`;
+        return {
+          icon: `<div class="rounded-full bg-${
+            CHECKMARK_COLORS[noSelectionMarkerCount - 1]
+          }" style="width: 13px; height: 13px;"></div>`,
+          muted: false,
+        };
       }
     }
 
-    return ``;
+    return {
+      icon: ``,
+      muted: !excludeMode && tableData?.selectedValues.length > 0,
+    };
   };
 
   const renderRowHeader: PivotRenderCallback = ({ value, x, y, element }) => {
@@ -171,35 +181,39 @@
       x - tableData?.fixedColCount
     );
     if (x > 0) {
-      element.classList.remove(
-        "!bg-slate-50",
-        "!bg-slate-100",
-        "!bg-slate-200"
-      );
+      element.classList.remove("bg-slate-50", "bg-slate-100", "bg-slate-200");
       element.classList.add(cellBgColor);
     }
     if (x === 0) {
       element.classList.add("pl-0");
       const marker = getMarker(value, y);
+
+      // Gray out rows which are not included
+      if (marker.muted) {
+        element?.parentElement?.classList.add("ui-copy-disabled-faint");
+      } else {
+        element?.parentElement?.classList.remove("ui-copy-disabled-faint");
+      }
+
       const justifyTotal = y === 0 ? "justify-end" : "";
       const fontWeight = y === 0 ? "font-semibold" : "font-normal";
       return `<div class="flex items-center w-full h-full overflow-hidden pr-2 gap-1 ${justifyTotal}">
-        <div class="w-5 shrink-0 h-full flex items-center justify-center" toggle-visible="${y}">${marker}</div>
-        <div class="truncate text-xs ${fontWeight} text-gray-700">${value.value}</div></div>`;
+        <div class="w-5 shrink-0 h-full flex items-center justify-center" toggle-visible="${y}">${marker.icon}</div>
+        <div class="truncate text-xs ${fontWeight}">${value.value}</div></div>`;
     } else if (x === 1)
-      return `<div class="text-xs font-semibold text-right text-gray-700 flex items-center justify-end gap-2" >${value.value}
+      return `<div class="text-xs font-semibold text-right flex items-center justify-end gap-2" >${value.value}
         ${value.spark}
 
         </div>`;
     else
-      return `<div class="text-xs font-normal text-right text-gray-700" >${value.value}</div>`;
+      return `<div class="text-xs font-normal text-right" >${value.value}</div>`;
   };
 
   const renderRowCorner: PivotRenderCallback = (data) => {
     data.element.classList.add("bg-white", "z-10");
     if (data.x === 0)
       return `
-      <div class="flex items-center font-medium text-gray-700 text-left" sort="dimension">
+      <div class="flex items-center font-medium text-left" sort="dimension">
         <span class="truncate">${dimensionLabel} </span>
         ${
           comparing === "dimension" && sortType === SortType.DIMENSION
@@ -208,7 +222,7 @@
         }
       </div>`;
     if (data.x === 1)
-      return `<div class="text-right font-medium text-gray-700 flex items-center" sort="value">
+      return `<div class="text-right font-medium flex items-center" sort="value">
         <span class="truncate">${measureLabel} </span>
         ${
           comparing === "dimension" &&
@@ -219,7 +233,7 @@
         }
       </div>`;
     if (data.x === 2)
-      return `<div class="flex items-center justify-end text-gray-700" sort="value">${PieChart} % 
+      return `<div class="flex items-center justify-end" sort="value">${PieChart} % 
         ${
           comparing === "dimension" && sortType === SortType.VALUE
             ? MeasureArrow(sortDirection)

web-common/src/features/dashboards/time-dimension-details/util.ts

@@ -37,19 +37,19 @@ export function getClassForCell(
 ) {
   const bgColors = {
     fixed: {
-      base: "!bg-slate-50",
-      highlighted: "!bg-slate-100",
-      doubleHighlighted: "!bg-slate-200",
+      base: "bg-slate-50",
+      highlighted: "bg-slate-100",
+      doubleHighlighted: "bg-slate-200",
     },
     scrubbed: {
-      base: "!bg-blue-50",
-      highlighted: "!bg-blue-100",
-      doubleHighlighted: "!bg-blue-200",
+      base: "bg-blue-50",
+      highlighted: "bg-blue-100",
+      doubleHighlighted: "bg-blue-200",
     },
     default: {
-      base: "!bg-white",
-      highlighted: "!bg-gray-100",
-      doubleHighlighted: "!bg-gray-200",
+      base: "bg-white",
+      highlighted: "bg-gray-100",
+      doubleHighlighted: "bg-gray-200",
     },
   };