diff --git a/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte b/waltz-ng/client/report-grid/components/svelte/ReportGridFilters.svelte
index 5713248c7a..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);
@@ -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>
\ No newline at end of file