From 4c0c0f29e4fa967a8b81977661339857480ff874 Mon Sep 17 00:00:00 2001
From: David Watkins <davidwatkins73@gmail.com>
Date: Thu, 24 Mar 2022 09:16:57 +0000
Subject: [PATCH 1/2] Animation on filter list option colors

#5972
---
 .../svelte/ReportGridFilters.svelte           | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte b/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
index 5713248c7a..82296daae5 100644
--- a/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
+++ b/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
@@ -54,6 +54,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 +128,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 +197,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 +266,10 @@
         font-style: italic;
     }
 
+    .color-indicator {
+        display: inline-block;
+        height: 10px; width: 10px;
+        transition: opacity 0.3s linear;
+    }
+
 </style>
\ No newline at end of file

From 9e228f465835f7977b96f8100ec7ff7671da306f Mon Sep 17 00:00:00 2001
From: David Watkins <davidwatkins73@gmail.com>
Date: Thu, 24 Mar 2022 09:32:38 +0000
Subject: [PATCH 2/2] Animation on filter list option colors

#5972
---
 .../report-grid/components/svelte/ReportGridFilters.svelte       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte b/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
index 82296daae5..1cb75d54f8 100644
--- 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);