Merge pull request #5978 from davidwatkins73/waltz-5972-report-grid-a…

…nimations Waltz 5972 report grid animations
finos · Mar 24, 2022 · 4ccf62a · 4ccf62a
2 parents 8b908ef + 9e228f4
commit 4ccf62a
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte b/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
@@ -40,6 +40,7 @@
         activeSummaries.add(colRef);
     }
 
+
     function addOrRemoveFromActiveSummaries(summary) {
         if (isActive($activeSummaries, summary)) {
             removeSummary(summary);
@@ -54,6 +55,17 @@
     }
 
 
+    function mkOptionSummaryTitle(option) {
+        const optionName = option.optionInfo.name || "Not Provided";
+
+        if (option.counts.total !== option.counts.visible){
+            return `${optionName}: (${option.counts.total}) ${option.counts.visible}`
+        } else {
+            return `${optionName}: ${option.counts.visible}`
+        }
+    }
+
+
     $: {
         const byPropName = _.keyBy($summaries, d => mkPropNameForColumnDefinition(d.column));
 
@@ -117,10 +129,10 @@
                                         class:text-muted={optionSummary.counts.visible === 0}
                                         on:click={() => onToggleFilter(optionSummary)}>
                                         <td>
-                                            <div style={`
-                                                display: inline-block;
-                                                height: 10px; width: 10px;
-                                                background-color: ${optionSummary.optionInfo.color}`}>
+                                            <div class="color-indicator"
+                                                 style={`
+                                                    opacity: ${optionSummary.counts.visible > 0 ? 1 : 0.2};
+                                                    background-color: ${optionSummary.optionInfo.color}`}>
                                             </div>
                                             <span>{optionSummary.optionInfo.name || "Not Provided"}</span>
                                         </td>
@@ -186,7 +198,7 @@
                                 <ul style="display: inline-block"
                                     class="list-inline column-values-summary">
                                     {#each summary.optionSummaries as option}
-                                        <li title={option.optionInfo.name}>
+                                        <li title={mkOptionSummaryTitle(option)}>
                                             <span style={`
                                                     background-color: ${option.optionInfo.color};
                                                     opacity: ${option.counts.visible > 0 ? 1 : 0.2};
@@ -255,4 +267,10 @@
         font-style: italic;
     }
 
+    .color-indicator {
+        display: inline-block;
+        height: 10px; width: 10px;
+        transition: opacity 0.3s linear;
+    }
+
 </style>