Add a working example of searching from the stats screen in the Card Counts

ts/graphs/CardCounts.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import { defaultGraphBounds } from "./graph-helpers";
     import { gatherData, renderCards } from "./card-counts";
     import type { GraphData, TableDatum } from "./card-counts";
@@ -11,6 +12,8 @@
     export let preferences: PreferenceStore;
 
     let { cardCountsSeparateInactive } = preferences;
+    const dispatch = createEventDispatcher();
+
     let svg = null as HTMLElement | SVGElement | null;
 
     let bounds = defaultGraphBounds();
@@ -52,6 +55,12 @@
     .right {
         text-align: right;
     }
+
+    .search-link:hover {
+        cursor: pointer;
+        color: var(--link);
+        text-decoration: underline;
+    }
 </style>
 
 <div class="graph" id="graph-card-counts">
@@ -79,7 +88,8 @@
                     <tr>
                         <!-- prettier-ignore -->
                         <td>
-                            <span style="color: {d.colour};">■&nbsp;</span>{d.label}
+                            <span style="color: {d.colour};">■&nbsp;</span>
+                            <span class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</span>
                         </td>
                         <td class="right">{d.count}</td>
                         <td class="right">{d.percent}</td>

ts/graphs/GraphsPage.svelte

@@ -25,7 +25,7 @@
     const preferencesPromise = getPreferences();
 
     const refreshWith = async (searchNew: string, days: number) => {
-        search = searchNew
+        search = searchNew;
 
         active = true;
         try {
@@ -48,9 +48,9 @@
     refreshWith(search, days);
 
     const browserSearch = (event: CustomEvent) => {
-        const query = `${search} ${event.detail.query}`
+        const query = `${search} ${event.detail.query}`;
-        bridgeCommand(`browserSearch:${query}`)
+        bridgeCommand(`browserSearch:${query}`);
-    }
+    };
 </script>
 
 {#if controller}

ts/graphs/card-counts.ts

@@ -23,7 +23,7 @@ import type { GraphBounds } from "./graph-helpers";
 import { cumsum } from "d3-array";
 import type { I18n } from "anki/i18n";
 
-type Count = [string, number, boolean];
+type Count = [string, number, boolean, string];
 export interface GraphData {
     title: string;
     counts: Count[];
@@ -86,18 +86,51 @@ function countCards(
         }
     }
 
+    const extraQuery = separateInactive ? " -(is:buried or is:suspended)" : "";
+
     const counts: Count[] = [
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS), newCards, true],
+        [
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_LEARNING_CARDS), learn, true],
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS),
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS), relearn, true],
+            newCards,
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS), young, true],
+            true,
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS), mature, true],
+            `is:new${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_LEARNING_CARDS),
+            learn,
+            true,
+            `(-is:review is:learn)${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS),
+            relearn,
+            true,
+            `(is:review is:learn)${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS),
+            young,
+            true,
+            `(is:review -is:learn) prop:ivl<21${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS),
+            mature,
+            true,
+            `(is:review -is:learn) prop:ivl>=21${extraQuery}`,
+        ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_SUSPENDED_CARDS),
             suspended,
             separateInactive,
+            "is:suspended",
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_BURIED_CARDS),
+            buried,
+            separateInactive,
+            "is:buried",
         ],
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_BURIED_CARDS), buried, separateInactive],
     ];
 
     return counts;
@@ -132,6 +165,7 @@ export interface SummedDatum {
     count: number;
     // show up in the table
     show: boolean;
+    query: string;
     // running total
     total: number;
 }
@@ -139,6 +173,7 @@ export interface SummedDatum {
 export interface TableDatum {
     label: string;
     count: number;
+    query: string;
     percent: string;
     colour: string;
 }
@@ -155,6 +190,7 @@ export function renderCards(
             label: count[0],
             count: count[1],
             show: count[2],
+            query: count[3],
             idx,
             total: n,
         } as SummedDatum;
@@ -205,6 +241,7 @@ export function renderCards(
                   count: d.count,
                   percent: `${percent}%`,
                   colour: barColours[idx],
+                  query: d.query,
               } as TableDatum)
             : [];
     });