From fdf4c6628f2690b3a21e3e801224db12f45c03c3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 5 Jan 2021 22:04:31 +0100
Subject: [PATCH 01/19] Add browserSearch bridge command

---
 qt/aqt/stats.py | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/qt/aqt/stats.py b/qt/aqt/stats.py
index 055a81424..fd7a195a7 100644
--- a/qt/aqt/stats.py
+++ b/qt/aqt/stats.py
@@ -51,6 +51,7 @@ class NewDeckStats(QDialog):
         gui_hooks.stats_dialog_will_show(self)
         self.show()
         self.refresh()
+        self.form.web.set_bridge_command(self._on_bridge_cmd, self)
         self.activateWindow()
 
     def reject(self):
@@ -89,6 +90,14 @@ class NewDeckStats(QDialog):
     def changeScope(self, type):
         pass
 
+    def _on_bridge_cmd(self, cmd: str) -> bool:
+        if cmd.startswith("browserSearch"):
+            _, query = cmd.split(':', 1)
+            browser = aqt.dialogs.open("Browser", self.mw)
+            browser.search_for(query)
+
+        return False
+
     def refresh(self):
         self.form.web.load_ts_page("graphs")
 

From c8f0ee8b3b4823ceeab5fdf588837a4bd92e56a7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 5 Jan 2021 22:28:51 +0100
Subject: [PATCH 02/19] Add search event listeners on graphs

---
 ts/graphs/GraphsPage.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index cd3928d7e..78f8141af 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -24,7 +24,9 @@
 
     const preferencesPromise = getPreferences();
 
-    const refreshWith = async (search: string, days: number) => {
+    const refreshWith = async (searchNew: string, days: number) => {
+        search = searchNew
+
         active = true;
         try {
             [sourceData, preferences] = await Promise.all([
@@ -44,6 +46,11 @@
     };
 
     refreshWith(search, days);
+
+    const browserSearch = (event: CustomEvent) => {
+        const query = `${search} ${event.detail.query}`
+        bridgeCommand(`browserSearch:${query}`)
+    }
 </script>
 
 {#if controller}
@@ -65,7 +72,8 @@
                 {preferences}
                 {revlogRange}
                 {i18n}
-                {nightMode} />
+                {nightMode}
+                on:search={browserSearch} />
         {/each}
     </div>
 {/if}

From 3ab92b34277f97e53cc4d05e1428a6a84b4b69d4 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 6 Jan 2021 13:40:05 +0100
Subject: [PATCH 03/19] Add a working example of searching from the stats
 screen in the Card Counts

---
 ts/graphs/CardCounts.svelte | 12 ++++++++-
 ts/graphs/GraphsPage.svelte |  8 +++---
 ts/graphs/card-counts.ts    | 51 ++++++++++++++++++++++++++++++++-----
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 7835f7e10..3667c8bde 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/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>
diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 78f8141af..f26aae9fa 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/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}`
-        bridgeCommand(`browserSearch:${query}`)
-    }
+        const query = `${search} ${event.detail.query}`;
+        bridgeCommand(`browserSearch:${query}`);
+    };
 </script>
 
 {#if controller}
diff --git a/ts/graphs/card-counts.ts b/ts/graphs/card-counts.ts
index f45bca720..12b0b7799 100644
--- a/ts/graphs/card-counts.ts
+++ b/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_RELEARNING_CARDS), relearn, true],
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS), young, true],
-        [i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS), mature, true],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS),
+            newCards,
+            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)
             : [];
     });

From 6a0f2a0ebbb188c4ab7253fc2260a6a4de942f74 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 6 Jan 2021 19:26:47 +0100
Subject: [PATCH 04/19] Export bridgeCommandsSupported from graphs.rs for stats

---
 ts/graphs/CardCounts.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 3667c8bde..55b1ea47f 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -89,7 +89,11 @@
                         <!-- prettier-ignore -->
                         <td>
                             <span style="color: {d.colour};">■&nbsp;</span>
-                            <span class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</span>
+                            {#if sourceData.bridgeCommandsSupported}
+                                <span class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</span>
+                            {:else}
+                                <span>{d.label}</span>
+                            {/if}
                         </td>
                         <td class="right">{d.count}</td>
                         <td class="right">{d.percent}</td>

From a7c8b021dd76d02c97a4aabefd57e70c8fa778e3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 7 Jan 2021 01:09:55 +0100
Subject: [PATCH 05/19] Satisfy formatter

---
 qt/aqt/stats.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/qt/aqt/stats.py b/qt/aqt/stats.py
index fd7a195a7..2903f1917 100644
--- a/qt/aqt/stats.py
+++ b/qt/aqt/stats.py
@@ -92,7 +92,7 @@ class NewDeckStats(QDialog):
 
     def _on_bridge_cmd(self, cmd: str) -> bool:
         if cmd.startswith("browserSearch"):
-            _, query = cmd.split(':', 1)
+            _, query = cmd.split(":", 1)
             browser = aqt.dialogs.open("Browser", self.mw)
             browser.search_for(query)
 

From 58950452e409d0a01cc33d6260ea22074b791243 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 7 Jan 2021 12:22:50 +0100
Subject: [PATCH 06/19] Add search to added graph

---
 ts/graphs/AddedGraph.svelte     |  2 +-
 ts/graphs/HistogramGraph.svelte |  5 ++++-
 ts/graphs/added.ts              | 18 +++++++++++++++++-
 ts/graphs/histogram-graph.ts    | 20 ++++++++++++++++++--
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/ts/graphs/AddedGraph.svelte b/ts/graphs/AddedGraph.svelte
index 7d9485611..5ff7af8b9 100644
--- a/ts/graphs/AddedGraph.svelte
+++ b/ts/graphs/AddedGraph.svelte
@@ -39,7 +39,7 @@
         <GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} />
+    <HistogramGraph data={histogramData} {i18n} on:search />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/HistogramGraph.svelte b/ts/graphs/HistogramGraph.svelte
index d178d33af..86347ad58 100644
--- a/ts/graphs/HistogramGraph.svelte
+++ b/ts/graphs/HistogramGraph.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import type { HistogramData } from "./histogram-graph";
     import { histogramGraph } from "./histogram-graph";
     import AxisTicks from "./AxisTicks.svelte";
@@ -9,10 +10,12 @@
     export let data: HistogramData | null = null;
     export let i18n: I18n;
 
+    const dispatch = createEventDispatcher();
+
     let bounds = defaultGraphBounds();
     let svg = null as HTMLElement | SVGElement | null;
 
-    $: histogramGraph(svg as SVGElement, bounds, data);
+    $: histogramGraph(svg as SVGElement, bounds, data, dispatch);
 </script>
 
 <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts
index 74caf2206..0e9b8f2fe 100644
--- a/ts/graphs/added.ts
+++ b/ts/graphs/added.ts
@@ -102,8 +102,24 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
+    function makeQuery(
+        data: HistogramData,
+        binIdx: number,
+    ): string {
+        const start = Math.abs(data.bins[binIdx].x0!) + 1;
+        const include = `added:${start}`
+
+        if (start === 1) {
+            return include
+        }
+
+        const end = Math.abs(data.bins[binIdx].x1!) + 1;
+        const exclude = `-added:${end}`
+        return `${include} ${exclude}`
+    }
+
     return [
-        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true },
         tableData,
     ];
 }
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index aa067c66a..5f995f9d4 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -25,6 +25,10 @@ export interface HistogramData {
         cumulative: number,
         percent: number
     ) => string;
+    makeQuery?: (
+        data: HistogramData,
+        binIdx: number,
+    ) => string;
     showArea: boolean;
     colourScale: ScaleSequential<string>;
     binValue?: (bin: Bin<any, any>) => number;
@@ -34,7 +38,8 @@ export interface HistogramData {
 export function histogramGraph(
     svgElem: SVGElement,
     bounds: GraphBounds,
-    data: HistogramData | null
+    data: HistogramData | null,
+    dispatch: any,
 ): void {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
@@ -152,10 +157,21 @@ export function histogramGraph(
         .attr("y", () => y(yMax!)!)
         .attr("width", barWidth)
         .attr("height", () => y(0)! - y(yMax!)!)
+        .on("mouseover", function (this: any) {
+            this.style = "cursor: pointer;";
+        })
         .on("mousemove", function (this: any, d: any, idx) {
             const [x, y] = mouse(document.body);
             const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
             showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
         })
-        .on("mouseout", hideTooltip);
+        .on("mouseout", function (this: any) {
+            hideTooltip;
+            this.style = "";
+        })
+        .on('click', function(this: any, d: any, idx: number) {
+            console.log('clicked', this)
+            if (!data.makeQuery) { return }
+            dispatch("search", { query: data.makeQuery(data, idx) })
+        });
 }

From 1232fd70691cd40d9a418aa17ee16c1a59815c97 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 7 Jan 2021 12:44:58 +0100
Subject: [PATCH 07/19] Add search functional on interval graph

---
 ts/graphs/IntervalsGraph.svelte |  2 +-
 ts/graphs/intervals.ts          | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/ts/graphs/IntervalsGraph.svelte b/ts/graphs/IntervalsGraph.svelte
index 5f94b9fc2..aca20542b 100644
--- a/ts/graphs/IntervalsGraph.svelte
+++ b/ts/graphs/IntervalsGraph.svelte
@@ -59,7 +59,7 @@
         </label>
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} />
+    <HistogramGraph data={histogramData} {i18n} on:search />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index 624701f60..0038e20b5 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -134,6 +134,26 @@ export function prepareIntervalData(
         return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`;
     }
 
+    function makeQuery(
+        data: HistogramData,
+        binIdx: number,
+    ): string {
+        const onlyReview = "-(is:new or is:learn or is:suspended or is:buried)"
+
+        const bin = data.bins[binIdx];
+        const start = bin.x0!;
+        const end = bin.x1! - 1;
+
+        if (start === end) {
+            return `prop:ivl=${start} ${onlyReview}`
+        }
+
+        const fromQuery = `prop:ivl>=${start}`
+        const tillQuery = `prop:ivl<=${end}`
+
+        return `${fromQuery} ${tillQuery} ${onlyReview}`
+    }
+
     const meanInterval = Math.round(mean(allIntervals) ?? 0);
     const meanIntervalString = timeSpan(i18n, meanInterval * 86400, false);
     const tableData = [
@@ -143,7 +163,7 @@ export function prepareIntervalData(
         },
     ];
     return [
-        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true },
         tableData,
     ];
 }

From 8a43745f837be7286d0dfd5fcec0b8d185c21145 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 13:48:42 +0100
Subject: [PATCH 08/19] Remove onlyReview from intervals query

---
 ts/graphs/intervals.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index 0038e20b5..a87361e78 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -138,20 +138,18 @@ export function prepareIntervalData(
         data: HistogramData,
         binIdx: number,
     ): string {
-        const onlyReview = "-(is:new or is:learn or is:suspended or is:buried)"
-
         const bin = data.bins[binIdx];
         const start = bin.x0!;
         const end = bin.x1! - 1;
 
         if (start === end) {
-            return `prop:ivl=${start} ${onlyReview}`
+            return `prop:ivl=${start}`
         }
 
         const fromQuery = `prop:ivl>=${start}`
         const tillQuery = `prop:ivl<=${end}`
 
-        return `${fromQuery} ${tillQuery} ${onlyReview}`
+        return `${fromQuery} ${tillQuery}`
     }
 
     const meanInterval = Math.round(mean(allIntervals) ?? 0);

From 2fd40394943082a34b6c5bf141cef959892c6efd Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 13:59:33 +0100
Subject: [PATCH 09/19] Add query functionality to FutureDue graph

---
 ts/graphs/FutureDue.svelte |  2 +-
 ts/graphs/future-due.ts    | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ts/graphs/FutureDue.svelte b/ts/graphs/FutureDue.svelte
index 984707a09..a10560b8f 100644
--- a/ts/graphs/FutureDue.svelte
+++ b/ts/graphs/FutureDue.svelte
@@ -53,7 +53,7 @@
         <GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} />
+    <HistogramGraph data={histogramData} {i18n} on:search />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/future-due.ts b/ts/graphs/future-due.ts
index 1ae73c0bf..085a987e6 100644
--- a/ts/graphs/future-due.ts
+++ b/ts/graphs/future-due.ts
@@ -145,6 +145,24 @@ export function buildHistogram(
         return `${days}:<br>${cards}<br>${totalLabel}: ${cumulative}`;
     }
 
+    function makeQuery(
+        data: HistogramData,
+        binIdx: number,
+    ): string {
+        const bin = data.bins[binIdx];
+        const start = bin.x0!;
+        const end = bin.x1! - 1;
+
+        if (start === end) {
+            return `"prop:due=${start}"`
+        }
+
+        const fromQuery = `"prop:due>=${start}"`
+        const tillQuery = `"prop:due<=${end}"`
+
+        return `${fromQuery} AND ${tillQuery}`
+    }
+
     const periodDays = xMax! - xMin!;
     const tableData = [
         {
@@ -171,6 +189,7 @@ export function buildHistogram(
             bins,
             total,
             hoverText,
+            makeQuery,
             showArea: true,
             colourScale,
             binValue,

From 740dcedbe66928e634157241448379034d4be404 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 14:00:18 +0100
Subject: [PATCH 10/19] Normalize intervals query

---
 ts/graphs/intervals.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index a87361e78..4ef512fae 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -143,13 +143,13 @@ export function prepareIntervalData(
         const end = bin.x1! - 1;
 
         if (start === end) {
-            return `prop:ivl=${start}`
+            return `"prop:ivl=${start}"`
         }
 
-        const fromQuery = `prop:ivl>=${start}`
-        const tillQuery = `prop:ivl<=${end}`
+        const fromQuery = `"prop:ivl>=${start}"`
+        const tillQuery = `"prop:ivl<=${end}"`
 
-        return `${fromQuery} ${tillQuery}`
+        return `${fromQuery} AND ${tillQuery}`
     }
 
     const meanInterval = Math.round(mean(allIntervals) ?? 0);

From fd58f73f13f76c101d3aba6eaeaae347d16b759b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 14:22:20 +0100
Subject: [PATCH 11/19] Fix up histogram code to correctly hide tooltip again

---
 ts/graphs/graphs.scss        |  4 ++++
 ts/graphs/histogram-graph.ts | 27 ++++++++++++---------------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/ts/graphs/graphs.scss b/ts/graphs/graphs.scss
index 75c4eddf7..bd2aa4615 100644
--- a/ts/graphs/graphs.scss
+++ b/ts/graphs/graphs.scss
@@ -197,3 +197,7 @@
 .no-focus-outline:focus {
     outline: 0;
 }
+
+.clickable {
+    cursor: pointer;
+}
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index 5f995f9d4..8a4b90d90 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -136,7 +136,7 @@ export function histogramGraph(
                 "d",
                 area()
                     .curve(curveBasis)
-                    .x((d, idx) => {
+                    .x((_d, idx) => {
                         if (idx === 0) {
                             return x(data.bins[0].x0!)!;
                         } else {
@@ -149,7 +149,7 @@ export function histogramGraph(
     }
 
     // hover/tooltip
-    svg.select("g.hoverzone")
+    const hoverzone = svg.select("g.hoverzone")
         .selectAll("rect")
         .data(data.bins)
         .join("rect")
@@ -157,21 +157,18 @@ export function histogramGraph(
         .attr("y", () => y(yMax!)!)
         .attr("width", barWidth)
         .attr("height", () => y(0)! - y(yMax!)!)
-        .on("mouseover", function (this: any) {
-            this.style = "cursor: pointer;";
-        })
-        .on("mousemove", function (this: any, d: any, idx) {
+        .on("mousemove", function (this: any, _d: any, idx: number) {
             const [x, y] = mouse(document.body);
             const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
             showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
         })
-        .on("mouseout", function (this: any) {
-            hideTooltip;
-            this.style = "";
-        })
-        .on('click', function(this: any, d: any, idx: number) {
-            console.log('clicked', this)
-            if (!data.makeQuery) { return }
-            dispatch("search", { query: data.makeQuery(data, idx) })
-        });
+        .on("mouseout", hideTooltip);
+
+    if (data.makeQuery) {
+        hoverzone
+            .attr("class", "clickable")
+            .on("click", function (this: any, _d: any, idx: number) {
+                dispatch("search", { query: data.makeQuery!(data, idx) })
+            });
+    }
 }

From 0e98bd7db2d558b087994430ce7c6bd3cc2807e9 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 14:28:38 +0100
Subject: [PATCH 12/19] Normalize the remaining queries

---
 ts/graphs/added.ts           | 23 ++++++++++++++---------
 ts/graphs/card-counts.ts     | 16 ++++++++--------
 ts/graphs/future-due.ts      | 13 +++++--------
 ts/graphs/histogram-graph.ts | 12 +++++-------
 ts/graphs/intervals.ts       | 23 ++++++++++++++---------
 5 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts
index 0e9b8f2fe..c22ea73a7 100644
--- a/ts/graphs/added.ts
+++ b/ts/graphs/added.ts
@@ -102,24 +102,29 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
-    function makeQuery(
-        data: HistogramData,
-        binIdx: number,
-    ): string {
+    function makeQuery(data: HistogramData, binIdx: number): string {
         const start = Math.abs(data.bins[binIdx].x0!) + 1;
-        const include = `added:${start}`
+        const include = `"added:${start}"`;
 
         if (start === 1) {
-            return include
+            return include;
         }
 
         const end = Math.abs(data.bins[binIdx].x1!) + 1;
-        const exclude = `-added:${end}`
-        return `${include} ${exclude}`
+        const exclude = `-"added:${end}"`;
+        return `${include} AND ${exclude}`;
     }
 
     return [
-        { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true },
+        {
+            scale,
+            bins,
+            total: totalInPeriod,
+            hoverText,
+            makeQuery,
+            colourScale,
+            showArea: true,
+        },
         tableData,
     ];
 }
diff --git a/ts/graphs/card-counts.ts b/ts/graphs/card-counts.ts
index 12b0b7799..0eb2fba8f 100644
--- a/ts/graphs/card-counts.ts
+++ b/ts/graphs/card-counts.ts
@@ -86,50 +86,50 @@ function countCards(
         }
     }
 
-    const extraQuery = separateInactive ? " -(is:buried or is:suspended)" : "";
+    const extraQuery = separateInactive ? 'AND -("is:buried" OR "is:suspended")' : "";
 
     const counts: Count[] = [
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_NEW_CARDS),
             newCards,
             true,
-            `is:new${extraQuery}`,
+            `"is:new"${extraQuery}`,
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_LEARNING_CARDS),
             learn,
             true,
-            `(-is:review is:learn)${extraQuery}`,
+            `(-"is:review" AND "is:learn")${extraQuery}`,
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS),
             relearn,
             true,
-            `(is:review is:learn)${extraQuery}`,
+            `("is:review" AND "is:learn")${extraQuery}`,
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS),
             young,
             true,
-            `(is:review -is:learn) prop:ivl<21${extraQuery}`,
+            `("is:review" AND -"is:learn") AND "prop:ivl<21"${extraQuery}`,
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS),
             mature,
             true,
-            `(is:review -is:learn) prop:ivl>=21${extraQuery}`,
+            `("is:review" -"is:learn") AND "prop:ivl>=21"${extraQuery}`,
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_SUSPENDED_CARDS),
             suspended,
             separateInactive,
-            "is:suspended",
+            '"is:suspended"',
         ],
         [
             i18n.tr(i18n.TR.STATISTICS_COUNTS_BURIED_CARDS),
             buried,
             separateInactive,
-            "is:buried",
+            '"is:buried"',
         ],
     ];
 
diff --git a/ts/graphs/future-due.ts b/ts/graphs/future-due.ts
index 085a987e6..d1f09018e 100644
--- a/ts/graphs/future-due.ts
+++ b/ts/graphs/future-due.ts
@@ -145,22 +145,19 @@ export function buildHistogram(
         return `${days}:<br>${cards}<br>${totalLabel}: ${cumulative}`;
     }
 
-    function makeQuery(
-        data: HistogramData,
-        binIdx: number,
-    ): string {
+    function makeQuery(data: HistogramData, binIdx: number): string {
         const bin = data.bins[binIdx];
         const start = bin.x0!;
         const end = bin.x1! - 1;
 
         if (start === end) {
-            return `"prop:due=${start}"`
+            return `"prop:due=${start}"`;
         }
 
-        const fromQuery = `"prop:due>=${start}"`
-        const tillQuery = `"prop:due<=${end}"`
+        const fromQuery = `"prop:due>=${start}"`;
+        const tillQuery = `"prop:due<=${end}"`;
 
-        return `${fromQuery} AND ${tillQuery}`
+        return `${fromQuery} AND ${tillQuery}`;
     }
 
     const periodDays = xMax! - xMin!;
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index 8a4b90d90..93f5ddad9 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -25,10 +25,7 @@ export interface HistogramData {
         cumulative: number,
         percent: number
     ) => string;
-    makeQuery?: (
-        data: HistogramData,
-        binIdx: number,
-    ) => string;
+    makeQuery?: (data: HistogramData, binIdx: number) => string;
     showArea: boolean;
     colourScale: ScaleSequential<string>;
     binValue?: (bin: Bin<any, any>) => number;
@@ -39,7 +36,7 @@ export function histogramGraph(
     svgElem: SVGElement,
     bounds: GraphBounds,
     data: HistogramData | null,
-    dispatch: any,
+    dispatch: any
 ): void {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
@@ -149,7 +146,8 @@ export function histogramGraph(
     }
 
     // hover/tooltip
-    const hoverzone = svg.select("g.hoverzone")
+    const hoverzone = svg
+        .select("g.hoverzone")
         .selectAll("rect")
         .data(data.bins)
         .join("rect")
@@ -168,7 +166,7 @@ export function histogramGraph(
         hoverzone
             .attr("class", "clickable")
             .on("click", function (this: any, _d: any, idx: number) {
-                dispatch("search", { query: data.makeQuery!(data, idx) })
+                dispatch("search", { query: data.makeQuery!(data, idx) });
             });
     }
 }
diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index 4ef512fae..b31f88def 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -134,22 +134,19 @@ export function prepareIntervalData(
         return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`;
     }
 
-    function makeQuery(
-        data: HistogramData,
-        binIdx: number,
-    ): string {
+    function makeQuery(data: HistogramData, binIdx: number): string {
         const bin = data.bins[binIdx];
         const start = bin.x0!;
         const end = bin.x1! - 1;
 
         if (start === end) {
-            return `"prop:ivl=${start}"`
+            return `"prop:ivl=${start}"`;
         }
 
-        const fromQuery = `"prop:ivl>=${start}"`
-        const tillQuery = `"prop:ivl<=${end}"`
+        const fromQuery = `"prop:ivl>=${start}"`;
+        const tillQuery = `"prop:ivl<=${end}"`;
 
-        return `${fromQuery} AND ${tillQuery}`
+        return `${fromQuery} AND ${tillQuery}`;
     }
 
     const meanInterval = Math.round(mean(allIntervals) ?? 0);
@@ -161,7 +158,15 @@ export function prepareIntervalData(
         },
     ];
     return [
-        { scale, bins, total: totalInPeriod, hoverText, makeQuery, colourScale, showArea: true },
+        {
+            scale,
+            bins,
+            total: totalInPeriod,
+            hoverText,
+            makeQuery,
+            colourScale,
+            showArea: true,
+        },
         tableData,
     ];
 }

From f1c8879830b98f122db5d934c9fb704a0bcf7f9d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 8 Jan 2021 17:16:52 +0100
Subject: [PATCH 13/19] Add search functionality for ease graph

---
 ts/graphs/EaseGraph.svelte |  2 +-
 ts/graphs/ease.ts          | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ts/graphs/EaseGraph.svelte b/ts/graphs/EaseGraph.svelte
index 76725fb6e..89c728b44 100644
--- a/ts/graphs/EaseGraph.svelte
+++ b/ts/graphs/EaseGraph.svelte
@@ -26,7 +26,7 @@
 
     <div class="subtitle">{subtitle}</div>
 
-    <HistogramGraph data={histogramData} {i18n} />
+    <HistogramGraph data={histogramData} {i18n} on:search />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/ease.ts b/ts/graphs/ease.ts
index 872efa77d..05d3212fb 100644
--- a/ts/graphs/ease.ts
+++ b/ts/graphs/ease.ts
@@ -61,6 +61,21 @@ export function prepareData(
         });
     }
 
+    function makeQuery(data: HistogramData, binIdx: number): string {
+        const bin = data.bins[binIdx];
+        const start = bin.x0!;
+        const end = (bin.x1! - 1);
+
+        if (start === end) {
+            return `"prop:ease=${start / 100}"`;
+        }
+
+        const fromQuery = `"prop:ease>=${start / 100}"`;
+        const tillQuery = `"prop:ease<${end / 100}"`;
+
+        return `${fromQuery} AND ${tillQuery}`;
+    }
+
     const xTickFormat = (num: number): string => `${num.toFixed(0)}%`;
     const tableData = [
         {
@@ -70,7 +85,7 @@ export function prepareData(
     ];
 
     return [
-        { scale, bins, total, hoverText, colourScale, showArea: false, xTickFormat },
+        { scale, bins, total, hoverText, makeQuery, colourScale, showArea: false, xTickFormat },
         tableData,
     ];
 }

From 7f671cf837e4803ad54c4f25c47e6902703f42b0 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 18 Jan 2021 01:24:32 +0100
Subject: [PATCH 14/19] Add search functionality to Calendar view

---
 ts/graphs/CalendarGraph.svelte | 4 ++++
 ts/graphs/calendar.ts          | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/ts/graphs/CalendarGraph.svelte b/ts/graphs/CalendarGraph.svelte
index 0ad08d0b8..5296f6027 100644
--- a/ts/graphs/CalendarGraph.svelte
+++ b/ts/graphs/CalendarGraph.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
     import NoDataOverlay from "./NoDataOverlay.svelte";
     import AxisTicks from "./AxisTicks.svelte";
     import { defaultGraphBounds, RevlogRange } from "./graph-helpers";
@@ -15,6 +16,8 @@
     export let nightMode: boolean;
 
     let { calendarFirstDayOfWeek } = preferences;
+    const dispatch = createEventDispatcher();
+
     let graphData: GraphData | null = null;
 
     let bounds = defaultGraphBounds();
@@ -49,6 +52,7 @@
             svg as SVGElement,
             bounds,
             graphData,
+            dispatch,
             targetYear,
             i18n,
             nightMode,
diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index 02d6dbc1d..f9214a53c 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -82,6 +82,7 @@ export function renderCalendar(
     svgElem: SVGElement,
     bounds: GraphBounds,
     sourceData: GraphData,
+    dispatch: any,
     targetYear: number,
     i18n: I18n,
     nightMode: boolean,
@@ -113,6 +114,7 @@ export function renderCalendar(
             maxCount = count;
         }
     }
+    console.log('sourceData', sourceData, dayMap)
 
     if (!maxCount) {
         setDataAvailable(svg, false);
@@ -205,6 +207,9 @@ export function renderCalendar(
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip)
+        .on("click", function (this: any, d: any) {
+            dispatch("search", { query: `"prop:rated=${d.day}"` });
+        })
         .transition()
         .duration(800)
         .attr("fill", (d) => (d.count === 0 ? emptyColour : blues(d.count)!));

From 60ed9c1e22919b42abcbb8dca7639b288f4bb415 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 18 Jan 2021 01:50:23 +0100
Subject: [PATCH 15/19] Add back bridge_commands_support via backend.proto

---
 rslib/backend.proto       | 1 +
 rslib/src/stats/graphs.rs | 1 +
 2 files changed, 2 insertions(+)

diff --git a/rslib/backend.proto b/rslib/backend.proto
index 56d38dd96..392ed3388 100644
--- a/rslib/backend.proto
+++ b/rslib/backend.proto
@@ -1092,6 +1092,7 @@ message GraphsOut {
   uint32 scheduler_version = 5;
   /// Seconds to add to UTC timestamps to get local time.
   int32 local_offset_secs = 7;
+  bool bridge_commands_supported = 8;
 }
 
 message GraphPreferences {
diff --git a/rslib/src/stats/graphs.rs b/rslib/src/stats/graphs.rs
index 093aecb73..73ae77836 100644
--- a/rslib/src/stats/graphs.rs
+++ b/rslib/src/stats/graphs.rs
@@ -44,6 +44,7 @@ impl Collection {
             next_day_at_secs: timing.next_day_at as u32,
             scheduler_version: self.sched_ver() as u32,
             local_offset_secs: local_offset_secs as i32,
+            bridge_commands_supported: true,
         })
     }
 

From f767a5e6ca86e0931097443868597d948d6e731a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 18 Jan 2021 02:09:04 +0100
Subject: [PATCH 16/19] Make calendar only clickable, if counts > 0

---
 ts/graphs/calendar.ts |  9 +++++++--
 ts/graphs/ease.ts     | 13 +++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index f9214a53c..fbc2fe964 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -114,7 +114,7 @@ export function renderCalendar(
             maxCount = count;
         }
     }
-    console.log('sourceData', sourceData, dayMap)
+    console.log("sourceData", sourceData, dayMap);
 
     if (!maxCount) {
         setDataAvailable(svg, false);
@@ -207,8 +207,13 @@ export function renderCalendar(
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip)
+        .attr("class", (d: any): string => {
+            return d.count > 0 ? "clickable" : "";
+        })
         .on("click", function (this: any, d: any) {
-            dispatch("search", { query: `"prop:rated=${d.day}"` });
+            if (d.count > 0) {
+                dispatch("search", { query: `"prop:rated=${d.day}"` });
+            }
         })
         .transition()
         .duration(800)
diff --git a/ts/graphs/ease.ts b/ts/graphs/ease.ts
index 05d3212fb..4f13e200f 100644
--- a/ts/graphs/ease.ts
+++ b/ts/graphs/ease.ts
@@ -64,7 +64,7 @@ export function prepareData(
     function makeQuery(data: HistogramData, binIdx: number): string {
         const bin = data.bins[binIdx];
         const start = bin.x0!;
-        const end = (bin.x1! - 1);
+        const end = bin.x1! - 1;
 
         if (start === end) {
             return `"prop:ease=${start / 100}"`;
@@ -85,7 +85,16 @@ export function prepareData(
     ];
 
     return [
-        { scale, bins, total, hoverText, makeQuery, colourScale, showArea: false, xTickFormat },
+        {
+            scale,
+            bins,
+            total,
+            hoverText,
+            makeQuery,
+            colourScale,
+            showArea: false,
+            xTickFormat,
+        },
         tableData,
     ];
 }

From 759ed17963ed148eb86cbb55a4874a62337c1815 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 25 Jan 2021 16:33:18 +0100
Subject: [PATCH 17/19] Move dispatch logic from Histogram to individual graphs

---
 qt/aqt/deckbrowser.py           |  2 +-
 rslib/backend.proto             |  2 +-
 rslib/src/stats/graphs.rs       |  2 +-
 ts/graphs/AddedGraph.svelte     |  5 ++++-
 ts/graphs/CardCounts.svelte     |  4 ++--
 ts/graphs/EaseGraph.svelte      |  5 ++++-
 ts/graphs/FutureDue.svelte      |  6 +++++-
 ts/graphs/IntervalsGraph.svelte |  5 ++++-
 ts/graphs/added.ts              | 34 +++++++++++++++++++--------------
 ts/graphs/calendar.ts           |  1 -
 ts/graphs/ease.ts               | 32 +++++++++++++++++--------------
 ts/graphs/future-due.ts         | 30 ++++++++++++++++-------------
 ts/graphs/histogram-graph.ts    |  9 +++------
 ts/graphs/intervals.ts          | 32 +++++++++++++++++--------------
 14 files changed, 98 insertions(+), 71 deletions(-)

diff --git a/qt/aqt/deckbrowser.py b/qt/aqt/deckbrowser.py
index a3641fd95..3b0b16666 100644
--- a/qt/aqt/deckbrowser.py
+++ b/qt/aqt/deckbrowser.py
@@ -65,7 +65,7 @@ class DeckBrowser:
 
     def _linkHandler(self, url):
         if ":" in url:
-            (cmd, arg) = url.split(":")
+            (cmd, arg) = url.split(":", 1)
         else:
             cmd = url
         if cmd == "open":
diff --git a/rslib/backend.proto b/rslib/backend.proto
index 392ed3388..1dcb9dac5 100644
--- a/rslib/backend.proto
+++ b/rslib/backend.proto
@@ -1092,7 +1092,6 @@ message GraphsOut {
   uint32 scheduler_version = 5;
   /// Seconds to add to UTC timestamps to get local time.
   int32 local_offset_secs = 7;
-  bool bridge_commands_supported = 8;
 }
 
 message GraphPreferences {
@@ -1104,6 +1103,7 @@ message GraphPreferences {
   }
   Weekday calendar_first_day_of_week = 1;
   bool card_counts_separate_inactive = 2;
+  bool browser_links_supported = 3;
 }
 
 message RevlogEntry {
diff --git a/rslib/src/stats/graphs.rs b/rslib/src/stats/graphs.rs
index 73ae77836..704625575 100644
--- a/rslib/src/stats/graphs.rs
+++ b/rslib/src/stats/graphs.rs
@@ -44,7 +44,6 @@ impl Collection {
             next_day_at_secs: timing.next_day_at as u32,
             scheduler_version: self.sched_ver() as u32,
             local_offset_secs: local_offset_secs as i32,
-            bridge_commands_supported: true,
         })
     }
 
@@ -52,6 +51,7 @@ impl Collection {
         Ok(pb::GraphPreferences {
             calendar_first_day_of_week: self.get_first_day_of_week() as i32,
             card_counts_separate_inactive: self.get_card_counts_separate_inactive(),
+            browser_links_supported: true,
         })
     }
 
diff --git a/ts/graphs/AddedGraph.svelte b/ts/graphs/AddedGraph.svelte
index 5ff7af8b9..ed30aec2b 100644
--- a/ts/graphs/AddedGraph.svelte
+++ b/ts/graphs/AddedGraph.svelte
@@ -9,6 +9,7 @@
     import HistogramGraph from "./HistogramGraph.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
+    import { createEventDispatcher } from "svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
@@ -17,13 +18,15 @@
     let tableData: TableDatum[] = [];
     let graphRange: GraphRange = GraphRange.Month;
 
+    const dispatch = createEventDispatcher();
+
     let addedData: GraphData | null = null;
     $: if (sourceData) {
         addedData = gatherData(sourceData);
     }
 
     $: if (addedData) {
-        [histogramData, tableData] = buildHistogram(addedData, graphRange, i18n);
+        [histogramData, tableData] = buildHistogram(addedData, graphRange, i18n, dispatch);
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
diff --git a/ts/graphs/CardCounts.svelte b/ts/graphs/CardCounts.svelte
index 55b1ea47f..6434de646 100644
--- a/ts/graphs/CardCounts.svelte
+++ b/ts/graphs/CardCounts.svelte
@@ -11,7 +11,7 @@
     export let i18n: I18n;
     export let preferences: PreferenceStore;
 
-    let { cardCountsSeparateInactive } = preferences;
+    let { cardCountsSeparateInactive, browserLinksSupported } = preferences;
     const dispatch = createEventDispatcher();
 
     let svg = null as HTMLElement | SVGElement | null;
@@ -89,7 +89,7 @@
                         <!-- prettier-ignore -->
                         <td>
                             <span style="color: {d.colour};">■&nbsp;</span>
-                            {#if sourceData.bridgeCommandsSupported}
+                            {#if browserLinksSupported}
                                 <span class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</span>
                             {:else}
                                 <span>{d.label}</span>
diff --git a/ts/graphs/EaseGraph.svelte b/ts/graphs/EaseGraph.svelte
index 89c728b44..559334e9f 100644
--- a/ts/graphs/EaseGraph.svelte
+++ b/ts/graphs/EaseGraph.svelte
@@ -6,15 +6,18 @@
     import type { I18n } from "anki/i18n";
     import type { TableDatum } from "./graph-helpers";
     import TableData from "./TableData.svelte";
+    import { createEventDispatcher } from "svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
 
+    const dispatch = createEventDispatcher();
+
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
 
     $: if (sourceData) {
-        [histogramData, tableData] = prepareData(gatherData(sourceData), i18n);
+        [histogramData, tableData] = prepareData(gatherData(sourceData), i18n, dispatch);
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
diff --git a/ts/graphs/FutureDue.svelte b/ts/graphs/FutureDue.svelte
index a10560b8f..ffb27fe75 100644
--- a/ts/graphs/FutureDue.svelte
+++ b/ts/graphs/FutureDue.svelte
@@ -9,10 +9,13 @@
     import HistogramGraph from "./HistogramGraph.svelte";
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
+    import { createEventDispatcher } from "svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
 
+    const dispatch = createEventDispatcher();
+
     let graphData = null as GraphData | null;
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [] as any;
@@ -28,7 +31,8 @@
             graphData,
             graphRange,
             backlog,
-            i18n
+            i18n,
+            dispatch,
         ));
     }
 
diff --git a/ts/graphs/IntervalsGraph.svelte b/ts/graphs/IntervalsGraph.svelte
index aca20542b..50d979be4 100644
--- a/ts/graphs/IntervalsGraph.svelte
+++ b/ts/graphs/IntervalsGraph.svelte
@@ -12,10 +12,13 @@
     import HistogramGraph from "./HistogramGraph.svelte";
     import type { TableDatum } from "./graph-helpers";
     import TableData from "./TableData.svelte";
+    import { createEventDispatcher } from "svelte";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
 
+    const dispatch = createEventDispatcher();
+
     let intervalData: IntervalGraphData | null = null;
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
@@ -26,7 +29,7 @@
     }
 
     $: if (intervalData) {
-        [histogramData, tableData] = prepareIntervalData(intervalData, range, i18n);
+        [histogramData, tableData] = prepareIntervalData(intervalData, range, i18n, dispatch);
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts
index c22ea73a7..3574cf959 100644
--- a/ts/graphs/added.ts
+++ b/ts/graphs/added.ts
@@ -7,7 +7,7 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, sum } from "d3-array";
+import { extent, histogram, sum, Bin } from "d3-array";
 import { scaleLinear, scaleSequential } from "d3-scale";
 import type { HistogramData } from "./histogram-graph";
 import { interpolateBlues } from "d3-scale-chromatic";
@@ -28,10 +28,22 @@ export function gatherData(data: pb.BackendProto.GraphsOut): GraphData {
     return { daysAdded };
 }
 
+function makeQuery(start: number, end: number): string {
+    const include = `"added:${start}"`;
+
+    if (start === 1) {
+        return include;
+    }
+
+    const exclude = `-"added:${end}"`;
+    return `${include} AND ${exclude}`;
+}
+
 export function buildHistogram(
     data: GraphData,
     range: GraphRange,
-    i18n: I18n
+    i18n: I18n,
+    dispatch: any,
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const total = data.daysAdded.length;
@@ -102,17 +114,11 @@ export function buildHistogram(
         return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
     }
 
-    function makeQuery(data: HistogramData, binIdx: number): string {
-        const start = Math.abs(data.bins[binIdx].x0!) + 1;
-        const include = `"added:${start}"`;
-
-        if (start === 1) {
-            return include;
-        }
-
-        const end = Math.abs(data.bins[binIdx].x1!) + 1;
-        const exclude = `-"added:${end}"`;
-        return `${include} AND ${exclude}`;
+    function onClick(bin: Bin<number, number>): void {
+        const start = Math.abs(bin.x0!) + 1;
+        const end = Math.abs(bin.x1!) + 1;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
     }
 
     return [
@@ -121,7 +127,7 @@ export function buildHistogram(
             bins,
             total: totalInPeriod,
             hoverText,
-            makeQuery,
+            onClick,
             colourScale,
             showArea: true,
         },
diff --git a/ts/graphs/calendar.ts b/ts/graphs/calendar.ts
index fbc2fe964..0dae1a530 100644
--- a/ts/graphs/calendar.ts
+++ b/ts/graphs/calendar.ts
@@ -114,7 +114,6 @@ export function renderCalendar(
             maxCount = count;
         }
     }
-    console.log("sourceData", sourceData, dayMap);
 
     if (!maxCount) {
         setDataAvailable(svg, false);
diff --git a/ts/graphs/ease.ts b/ts/graphs/ease.ts
index 4f13e200f..a083960d4 100644
--- a/ts/graphs/ease.ts
+++ b/ts/graphs/ease.ts
@@ -7,7 +7,7 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, sum } from "d3-array";
+import { extent, histogram, sum, Bin } from "d3-array";
 import { scaleLinear, scaleSequential } from "d3-scale";
 import { CardType } from "anki/cards";
 import type { HistogramData } from "./histogram-graph";
@@ -26,9 +26,21 @@ export function gatherData(data: pb.BackendProto.GraphsOut): GraphData {
     return { eases };
 }
 
+function makeQuery(start: number, end: number): string {
+    if (start === end) {
+        return `"prop:ease=${start / 100}"`;
+    }
+
+    const fromQuery = `"prop:ease>=${start / 100}"`;
+    const tillQuery = `"prop:ease<${end / 100}"`;
+
+    return `${fromQuery} AND ${tillQuery}`;
+}
+
 export function prepareData(
     data: GraphData,
-    i18n: I18n
+    i18n: I18n,
+    dispatch: any,
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const allEases = data.eases;
@@ -61,19 +73,11 @@ export function prepareData(
         });
     }
 
-    function makeQuery(data: HistogramData, binIdx: number): string {
-        const bin = data.bins[binIdx];
+    function onClick(bin: Bin<number, number>): void {
         const start = bin.x0!;
         const end = bin.x1! - 1;
-
-        if (start === end) {
-            return `"prop:ease=${start / 100}"`;
-        }
-
-        const fromQuery = `"prop:ease>=${start / 100}"`;
-        const tillQuery = `"prop:ease<${end / 100}"`;
-
-        return `${fromQuery} AND ${tillQuery}`;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
     }
 
     const xTickFormat = (num: number): string => `${num.toFixed(0)}%`;
@@ -90,7 +94,7 @@ export function prepareData(
             bins,
             total,
             hoverText,
-            makeQuery,
+            onClick,
             colourScale,
             showArea: false,
             xTickFormat,
diff --git a/ts/graphs/future-due.ts b/ts/graphs/future-due.ts
index d1f09018e..498e8dff9 100644
--- a/ts/graphs/future-due.ts
+++ b/ts/graphs/future-due.ts
@@ -72,11 +72,23 @@ export interface FutureDueOut {
     tableData: TableDatum[];
 }
 
+function makeQuery(start: number, end: number): string {
+    if (start === end) {
+        return `"prop:due=${start}"`;
+    }
+    else {
+        const fromQuery = `"prop:due>=${start}"`;
+        const tillQuery = `"prop:due<=${end}"`;
+        return `${fromQuery} AND ${tillQuery}`;
+    }
+}
+
 export function buildHistogram(
     sourceData: GraphData,
     range: GraphRange,
     backlog: boolean,
-    i18n: I18n
+    i18n: I18n,
+    dispatch: any,
 ): FutureDueOut {
     const output = { histogramData: null, tableData: [] };
     // get min/max
@@ -145,19 +157,11 @@ export function buildHistogram(
         return `${days}:<br>${cards}<br>${totalLabel}: ${cumulative}`;
     }
 
-    function makeQuery(data: HistogramData, binIdx: number): string {
-        const bin = data.bins[binIdx];
+    function onClick(bin: Bin<number, number>): void {
         const start = bin.x0!;
         const end = bin.x1! - 1;
-
-        if (start === end) {
-            return `"prop:due=${start}"`;
-        }
-
-        const fromQuery = `"prop:due>=${start}"`;
-        const tillQuery = `"prop:due<=${end}"`;
-
-        return `${fromQuery} AND ${tillQuery}`;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
     }
 
     const periodDays = xMax! - xMin!;
@@ -186,7 +190,7 @@ export function buildHistogram(
             bins,
             total,
             hoverText,
-            makeQuery,
+            onClick,
             showArea: true,
             colourScale,
             binValue,
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index 93f5ddad9..f22b31850 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -25,7 +25,7 @@ export interface HistogramData {
         cumulative: number,
         percent: number
     ) => string;
-    makeQuery?: (data: HistogramData, binIdx: number) => string;
+    onClick?: (data: Bin<number, number>) => void;
     showArea: boolean;
     colourScale: ScaleSequential<string>;
     binValue?: (bin: Bin<any, any>) => number;
@@ -36,7 +36,6 @@ export function histogramGraph(
     svgElem: SVGElement,
     bounds: GraphBounds,
     data: HistogramData | null,
-    dispatch: any
 ): void {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
@@ -162,11 +161,9 @@ export function histogramGraph(
         })
         .on("mouseout", hideTooltip);
 
-    if (data.makeQuery) {
+    if (data.onClick) {
         hoverzone
             .attr("class", "clickable")
-            .on("click", function (this: any, _d: any, idx: number) {
-                dispatch("search", { query: data.makeQuery!(data, idx) });
-            });
+            .on("click", data.onClick);
     }
 }
diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index b31f88def..9d652eb2f 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -7,7 +7,7 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, quantile, sum, mean } from "d3-array";
+import { extent, histogram, quantile, sum, mean, Bin } from "d3-array";
 import { scaleLinear, scaleSequential } from "d3-scale";
 import { CardType } from "anki/cards";
 import type { HistogramData } from "./histogram-graph";
@@ -56,10 +56,22 @@ export function intervalLabel(
     }
 }
 
+function makeQuery(start: number, end: number): string {
+    if (start === end) {
+        return `"prop:ivl=${start}"`;
+    }
+
+    const fromQuery = `"prop:ivl>=${start}"`;
+    const tillQuery = `"prop:ivl<=${end}"`;
+
+    return `${fromQuery} AND ${tillQuery}`;
+}
+
 export function prepareIntervalData(
     data: IntervalGraphData,
     range: IntervalRange,
-    i18n: I18n
+    i18n: I18n,
+    dispatch: any,
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const allIntervals = data.intervals;
@@ -134,19 +146,11 @@ export function prepareIntervalData(
         return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`;
     }
 
-    function makeQuery(data: HistogramData, binIdx: number): string {
-        const bin = data.bins[binIdx];
+    function onClick(bin: Bin<number, number>): void {
         const start = bin.x0!;
         const end = bin.x1! - 1;
-
-        if (start === end) {
-            return `"prop:ivl=${start}"`;
-        }
-
-        const fromQuery = `"prop:ivl>=${start}"`;
-        const tillQuery = `"prop:ivl<=${end}"`;
-
-        return `${fromQuery} AND ${tillQuery}`;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
     }
 
     const meanInterval = Math.round(mean(allIntervals) ?? 0);
@@ -163,7 +167,7 @@ export function prepareIntervalData(
             bins,
             total: totalInPeriod,
             hoverText,
-            makeQuery,
+            onClick,
             colourScale,
             showArea: true,
         },

From 5a987d77b2b8719ea6b4f349a6f88c55c83a1ea3 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 25 Jan 2021 17:36:04 +0100
Subject: [PATCH 18/19] Use browserLinksSupported preference

---
 ts/graphs/AddedGraph.svelte     | 13 +++++++++++--
 ts/graphs/EaseGraph.svelte      | 12 ++++++++++--
 ts/graphs/FutureDue.svelte      |  6 +++++-
 ts/graphs/HistogramGraph.svelte |  5 +----
 ts/graphs/IntervalsGraph.svelte | 13 +++++++++++--
 ts/graphs/added.ts              |  3 ++-
 ts/graphs/ease.ts               |  3 ++-
 ts/graphs/future-due.ts         |  6 +++---
 ts/graphs/histogram-graph.ts    |  8 +++-----
 ts/graphs/intervals.ts          |  4 +++-
 10 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/ts/graphs/AddedGraph.svelte b/ts/graphs/AddedGraph.svelte
index ed30aec2b..1f541fd99 100644
--- a/ts/graphs/AddedGraph.svelte
+++ b/ts/graphs/AddedGraph.svelte
@@ -10,13 +10,16 @@
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
     import { createEventDispatcher } from "svelte";
+    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
+    export let preferences: PreferenceStore;
 
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
     let graphRange: GraphRange = GraphRange.Month;
+    let { browserLinksSupported } = preferences;
 
     const dispatch = createEventDispatcher();
 
@@ -26,7 +29,13 @@
     }
 
     $: if (addedData) {
-        [histogramData, tableData] = buildHistogram(addedData, graphRange, i18n, dispatch);
+        [histogramData, tableData] = buildHistogram(
+            addedData,
+            graphRange,
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
@@ -42,7 +51,7 @@
         <GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} on:search />
+    <HistogramGraph data={histogramData} {i18n} />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/EaseGraph.svelte b/ts/graphs/EaseGraph.svelte
index 559334e9f..7a6e24c83 100644
--- a/ts/graphs/EaseGraph.svelte
+++ b/ts/graphs/EaseGraph.svelte
@@ -7,17 +7,25 @@
     import type { TableDatum } from "./graph-helpers";
     import TableData from "./TableData.svelte";
     import { createEventDispatcher } from "svelte";
+    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
+    export let preferences: PreferenceStore;
 
     const dispatch = createEventDispatcher();
 
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
+    let { browserLinksSupported } = preferences;
 
     $: if (sourceData) {
-        [histogramData, tableData] = prepareData(gatherData(sourceData), i18n, dispatch);
+        [histogramData, tableData] = prepareData(
+            gatherData(sourceData),
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
@@ -29,7 +37,7 @@
 
     <div class="subtitle">{subtitle}</div>
 
-    <HistogramGraph data={histogramData} {i18n} on:search />
+    <HistogramGraph data={histogramData} {i18n} />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/FutureDue.svelte b/ts/graphs/FutureDue.svelte
index ffb27fe75..e7b504eda 100644
--- a/ts/graphs/FutureDue.svelte
+++ b/ts/graphs/FutureDue.svelte
@@ -10,9 +10,11 @@
     import GraphRangeRadios from "./GraphRangeRadios.svelte";
     import TableData from "./TableData.svelte";
     import { createEventDispatcher } from "svelte";
+    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
+    export let preferences: PreferenceStore;
 
     const dispatch = createEventDispatcher();
 
@@ -21,6 +23,7 @@
     let tableData: TableDatum[] = [] as any;
     let backlog: boolean = true;
     let graphRange: GraphRange = GraphRange.Month;
+    let { browserLinksSupported } = preferences;
 
     $: if (sourceData) {
         graphData = gatherData(sourceData);
@@ -33,6 +36,7 @@
             backlog,
             i18n,
             dispatch,
+            $browserLinksSupported
         ));
     }
 
@@ -57,7 +61,7 @@
         <GraphRangeRadios bind:graphRange {i18n} revlogRange={RevlogRange.All} />
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} on:search />
+    <HistogramGraph data={histogramData} {i18n} />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/HistogramGraph.svelte b/ts/graphs/HistogramGraph.svelte
index 86347ad58..d178d33af 100644
--- a/ts/graphs/HistogramGraph.svelte
+++ b/ts/graphs/HistogramGraph.svelte
@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import { createEventDispatcher } from "svelte";
     import type { HistogramData } from "./histogram-graph";
     import { histogramGraph } from "./histogram-graph";
     import AxisTicks from "./AxisTicks.svelte";
@@ -10,12 +9,10 @@
     export let data: HistogramData | null = null;
     export let i18n: I18n;
 
-    const dispatch = createEventDispatcher();
-
     let bounds = defaultGraphBounds();
     let svg = null as HTMLElement | SVGElement | null;
 
-    $: histogramGraph(svg as SVGElement, bounds, data, dispatch);
+    $: histogramGraph(svg as SVGElement, bounds, data);
 </script>
 
 <svg bind:this={svg} viewBox={`0 0 ${bounds.width} ${bounds.height}`}>
diff --git a/ts/graphs/IntervalsGraph.svelte b/ts/graphs/IntervalsGraph.svelte
index 50d979be4..f77348bae 100644
--- a/ts/graphs/IntervalsGraph.svelte
+++ b/ts/graphs/IntervalsGraph.svelte
@@ -13,9 +13,11 @@
     import type { TableDatum } from "./graph-helpers";
     import TableData from "./TableData.svelte";
     import { createEventDispatcher } from "svelte";
+    import type { PreferenceStore } from "./preferences";
 
     export let sourceData: pb.BackendProto.GraphsOut | null = null;
     export let i18n: I18n;
+    export let preferences: PreferenceStore;
 
     const dispatch = createEventDispatcher();
 
@@ -23,13 +25,20 @@
     let histogramData = null as HistogramData | null;
     let tableData: TableDatum[] = [];
     let range = IntervalRange.Percentile95;
+    let { browserLinksSupported } = preferences;
 
     $: if (sourceData) {
         intervalData = gatherIntervalData(sourceData);
     }
 
     $: if (intervalData) {
-        [histogramData, tableData] = prepareIntervalData(intervalData, range, i18n, dispatch);
+        [histogramData, tableData] = prepareIntervalData(
+            intervalData,
+            range,
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
     }
 
     const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
@@ -62,7 +71,7 @@
         </label>
     </div>
 
-    <HistogramGraph data={histogramData} {i18n} on:search />
+    <HistogramGraph data={histogramData} {i18n} />
 
     <TableData {i18n} {tableData} />
 </div>
diff --git a/ts/graphs/added.ts b/ts/graphs/added.ts
index 3574cf959..a68fd875f 100644
--- a/ts/graphs/added.ts
+++ b/ts/graphs/added.ts
@@ -44,6 +44,7 @@ export function buildHistogram(
     range: GraphRange,
     i18n: I18n,
     dispatch: any,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const total = data.daysAdded.length;
@@ -127,7 +128,7 @@ export function buildHistogram(
             bins,
             total: totalInPeriod,
             hoverText,
-            onClick,
+            onClick: browserLinksSupported ? onClick : null,
             colourScale,
             showArea: true,
         },
diff --git a/ts/graphs/ease.ts b/ts/graphs/ease.ts
index a083960d4..9468f7c04 100644
--- a/ts/graphs/ease.ts
+++ b/ts/graphs/ease.ts
@@ -41,6 +41,7 @@ export function prepareData(
     data: GraphData,
     i18n: I18n,
     dispatch: any,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const allEases = data.eases;
@@ -94,7 +95,7 @@ export function prepareData(
             bins,
             total,
             hoverText,
-            onClick,
+            onClick: browserLinksSupported ? onClick : null,
             colourScale,
             showArea: false,
             xTickFormat,
diff --git a/ts/graphs/future-due.ts b/ts/graphs/future-due.ts
index 498e8dff9..fbd0f880f 100644
--- a/ts/graphs/future-due.ts
+++ b/ts/graphs/future-due.ts
@@ -75,8 +75,7 @@ export interface FutureDueOut {
 function makeQuery(start: number, end: number): string {
     if (start === end) {
         return `"prop:due=${start}"`;
-    }
-    else {
+    } else {
         const fromQuery = `"prop:due>=${start}"`;
         const tillQuery = `"prop:due<=${end}"`;
         return `${fromQuery} AND ${tillQuery}`;
@@ -89,6 +88,7 @@ export function buildHistogram(
     backlog: boolean,
     i18n: I18n,
     dispatch: any,
+    browserLinksSupported: boolean
 ): FutureDueOut {
     const output = { histogramData: null, tableData: [] };
     // get min/max
@@ -190,7 +190,7 @@ export function buildHistogram(
             bins,
             total,
             hoverText,
-            onClick,
+            onClick: browserLinksSupported ? onClick : null,
             showArea: true,
             colourScale,
             binValue,
diff --git a/ts/graphs/histogram-graph.ts b/ts/graphs/histogram-graph.ts
index f22b31850..4cf1a0d76 100644
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@@ -25,7 +25,7 @@ export interface HistogramData {
         cumulative: number,
         percent: number
     ) => string;
-    onClick?: (data: Bin<number, number>) => void;
+    onClick: ((data: Bin<number, number>) => void) | null;
     showArea: boolean;
     colourScale: ScaleSequential<string>;
     binValue?: (bin: Bin<any, any>) => number;
@@ -35,7 +35,7 @@ export interface HistogramData {
 export function histogramGraph(
     svgElem: SVGElement,
     bounds: GraphBounds,
-    data: HistogramData | null,
+    data: HistogramData | null
 ): void {
     const svg = select(svgElem);
     const trans = svg.transition().duration(600) as any;
@@ -162,8 +162,6 @@ export function histogramGraph(
         .on("mouseout", hideTooltip);
 
     if (data.onClick) {
-        hoverzone
-            .attr("class", "clickable")
-            .on("click", data.onClick);
+        hoverzone.attr("class", "clickable").on("click", data.onClick);
     }
 }
diff --git a/ts/graphs/intervals.ts b/ts/graphs/intervals.ts
index 9d652eb2f..91741e3dc 100644
--- a/ts/graphs/intervals.ts
+++ b/ts/graphs/intervals.ts
@@ -72,6 +72,7 @@ export function prepareIntervalData(
     range: IntervalRange,
     i18n: I18n,
     dispatch: any,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
     // get min/max
     const allIntervals = data.intervals;
@@ -161,13 +162,14 @@ export function prepareIntervalData(
             value: meanIntervalString,
         },
     ];
+
     return [
         {
             scale,
             bins,
             total: totalInPeriod,
             hoverText,
-            onClick,
+            onClick: browserLinksSupported ? onClick : null,
             colourScale,
             showArea: true,
         },

From 5abd7ae6f3fdb7d9736a0f2993617df0a086670d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 26 Jan 2021 01:25:22 +0100
Subject: [PATCH 19/19] Add bridgeCommand helper function

---
 ts/graphs/GraphsPage.svelte |  1 +
 ts/lib/bridgecommand.ts     | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index f26aae9fa..2597a09f0 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -8,6 +8,7 @@
     import type pb from "anki/backend_proto";
     import { getGraphData, RevlogRange, daysToRevlogRange } from "./graph-helpers";
     import { getPreferences } from "./preferences";
+    import { bridgeCommand } from "anki/bridgecommand";
 
     export let i18n: I18n;
     export let nightMode: boolean;
diff --git a/ts/lib/bridgecommand.ts b/ts/lib/bridgecommand.ts
index b7a0f721b..927e7dd03 100644
--- a/ts/lib/bridgecommand.ts
+++ b/ts/lib/bridgecommand.ts
@@ -1,7 +1,17 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+declare global {
+    interface Window {
+        bridgeCommand<T>(command: string, callback?: (value: T) => void): void;
+    }
+}
+
 /// HTML <a> tag pointing to a bridge command.
 export function bridgeLink(command: string, label: string): string {
     return `<a href="javascript:bridgeCommand('${command}')">${label}</a>`;
 }
+
+export function bridgeCommand<T>(command: string, callback?: (value: T) => void): void {
+    window.bridgeCommand<T>(command, callback);
+}