Merge pull request #897 from hgiesel/statssearch

Triggering searches from the stats screen.
2021-01-26 11:31:36 +10:00 · 2021-01-26 11:31:36 +10:00 · 644cc46dea
commit 644cc46dea
parent 0a0de2ce7b 5abd7ae6f3
20 changed files with 282 additions and 29 deletions
--- 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":
--- 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")

--- a/rslib/backend.proto
+++ b/rslib/backend.proto
@ -1103,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 {
--- a/rslib/src/stats/graphs.rs
+++ b/rslib/src/stats/graphs.rs
@ -51,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,
        })
    }

--- a/ts/graphs/AddedGraph.svelte
+++ b/ts/graphs/AddedGraph.svelte
@ -9,13 +9,19 @@
    import HistogramGraph from "./HistogramGraph.svelte";
    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();

    let addedData: GraphData | null = null;
    $: if (sourceData) {
@ -23,7 +29,13 @@
    }

    $: if (addedData) {
-        [histogramData, tableData] = buildHistogram(addedData, graphRange, i18n);
+        [histogramData, tableData] = buildHistogram(
+            addedData,
+            graphRange,
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
    }

    const title = i18n.tr(i18n.TR.STATISTICS_ADDED_TITLE);
--- 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,
--- 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";
@ -10,7 +11,9 @@
    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;

    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,12 @@
                    <tr>
                        <!-- prettier-ignore -->
                        <td>
-                            <span style="color: {d.colour};">■&nbsp;</span>{d.label}
+                            <span style="color: {d.colour};">■&nbsp;</span>
+                            {#if browserLinksSupported}
+                                <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>
--- a/ts/graphs/EaseGraph.svelte
+++ b/ts/graphs/EaseGraph.svelte
@ -6,15 +6,26 @@
    import type { I18n } from "anki/i18n";
    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);
+        [histogramData, tableData] = prepareData(
+            gatherData(sourceData),
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
    }

    const title = i18n.tr(i18n.TR.STATISTICS_CARD_EASE_TITLE);
--- a/ts/graphs/FutureDue.svelte
+++ b/ts/graphs/FutureDue.svelte
@ -9,15 +9,21 @@
    import HistogramGraph from "./HistogramGraph.svelte";
    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();

    let graphData = null as GraphData | null;
    let histogramData = null as HistogramData | null;
    let tableData: TableDatum[] = [] as any;
    let backlog: boolean = true;
    let graphRange: GraphRange = GraphRange.Month;
+    let { browserLinksSupported } = preferences;

    $: if (sourceData) {
        graphData = gatherData(sourceData);
@ -28,7 +34,9 @@
            graphData,
            graphRange,
            backlog,
-            i18n
+            i18n,
+            dispatch,
+            $browserLinksSupported
        ));
    }

--- 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;
@ -24,7 +25,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 +47,11 @@
    };

    refreshWith(search, days);
+
+    const browserSearch = (event: CustomEvent) => {
+        const query = `${search} ${event.detail.query}`;
+        bridgeCommand(`browserSearch:${query}`);
+    };
 </script>

 {#if controller}
@ -65,7 +73,8 @@
                {preferences}
                {revlogRange}
                {i18n}
-                {nightMode} />
+                {nightMode}
+                on:search={browserSearch} />
        {/each}
    </div>
 {/if}
--- a/ts/graphs/IntervalsGraph.svelte
+++ b/ts/graphs/IntervalsGraph.svelte
@ -12,21 +12,33 @@
    import HistogramGraph from "./HistogramGraph.svelte";
    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 intervalData: IntervalGraphData | null = null;
    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);
+        [histogramData, tableData] = prepareIntervalData(
+            intervalData,
+            range,
+            i18n,
+            dispatch,
+            $browserLinksSupported
+        );
    }

    const title = i18n.tr(i18n.TR.STATISTICS_INTERVALS_TITLE);
--- 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,23 @@ 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,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
    // get min/max
    const total = data.daysAdded.length;
@ -102,8 +115,23 @@ export function buildHistogram(
        return `${day}:<br>${cards}<br>${total}: ${totalCards}`;
    }

+    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 [
-        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        {
+            scale,
+            bins,
+            total: totalInPeriod,
+            hoverText,
+            onClick: browserLinksSupported ? onClick : null,
+            colourScale,
+            showArea: true,
+        },
        tableData,
    ];
 }
--- 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,
@ -205,6 +206,14 @@ 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) {
+            if (d.count > 0) {
+                dispatch("search", { query: `"prop:rated=${d.day}"` });
+            }
+        })
        .transition()
        .duration(800)
        .attr("fill", (d) => (d.count === 0 ? emptyColour : blues(d.count)!));
--- 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 ? 'AND -("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" AND "is:learn")${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_RELEARNING_CARDS),
+            relearn,
+            true,
+            `("is:review" AND "is:learn")${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_YOUNG_CARDS),
+            young,
+            true,
+            `("is:review" AND -"is:learn") AND "prop:ivl<21"${extraQuery}`,
+        ],
+        [
+            i18n.tr(i18n.TR.STATISTICS_COUNTS_MATURE_CARDS),
+            mature,
+            true,
+            `("is:review" -"is:learn") AND "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)
            : [];
    });
--- 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,22 @@ 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,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
    // get min/max
    const allEases = data.eases;
@ -61,6 +74,13 @@ export function prepareData(
        });
    }

+    function onClick(bin: Bin<number, number>): void {
+        const start = bin.x0!;
+        const end = bin.x1! - 1;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
+    }
+
    const xTickFormat = (num: number): string => `${num.toFixed(0)}%`;
    const tableData = [
        {
@ -70,7 +90,16 @@ export function prepareData(
    ];

    return [
-        { scale, bins, total, hoverText, colourScale, showArea: false, xTickFormat },
+        {
+            scale,
+            bins,
+            total,
+            hoverText,
+            onClick: browserLinksSupported ? onClick : null,
+            colourScale,
+            showArea: false,
+            xTickFormat,
+        },
        tableData,
    ];
 }
--- 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,
+    browserLinksSupported: boolean
 ): FutureDueOut {
    const output = { histogramData: null, tableData: [] };
    // get min/max
@ -145,6 +157,13 @@ export function buildHistogram(
        return `${days}:<br>${cards}<br>${totalLabel}: ${cumulative}`;
    }

+    function onClick(bin: Bin<number, number>): void {
+        const start = bin.x0!;
+        const end = bin.x1! - 1;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
+    }
+
    const periodDays = xMax! - xMin!;
    const tableData = [
        {
@ -171,6 +190,7 @@ export function buildHistogram(
            bins,
            total,
            hoverText,
+            onClick: browserLinksSupported ? onClick : null,
            showArea: true,
            colourScale,
            binValue,
--- a/ts/graphs/graphs.scss
+++ b/ts/graphs/graphs.scss
@ -197,3 +197,7 @@
 .no-focus-outline:focus {
    outline: 0;
 }
+
+.clickable {
+    cursor: pointer;
+}
--- a/ts/graphs/histogram-graph.ts
+++ b/ts/graphs/histogram-graph.ts
@ -25,6 +25,7 @@ export interface HistogramData {
        cumulative: number,
        percent: number
    ) => string;
+    onClick: ((data: Bin<number, number>) => void) | null;
    showArea: boolean;
    colourScale: ScaleSequential<string>;
    binValue?: (bin: Bin<any, any>) => number;
@ -131,7 +132,7 @@ export function histogramGraph(
                "d",
                area()
                    .curve(curveBasis)
-                    .x((d, idx) => {
+                    .x((_d, idx) => {
                        if (idx === 0) {
                            return x(data.bins[0].x0!)!;
                        } else {
@ -144,7 +145,8 @@ export function histogramGraph(
    }

    // hover/tooltip
-    svg.select("g.hoverzone")
+    const hoverzone = svg
+        .select("g.hoverzone")
        .selectAll("rect")
        .data(data.bins)
        .join("rect")
@ -152,10 +154,14 @@ export function histogramGraph(
        .attr("y", () => y(yMax!)!)
        .attr("width", barWidth)
        .attr("height", () => y(0)! - y(yMax!)!)
-        .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", hideTooltip);
+
+    if (data.onClick) {
+        hoverzone.attr("class", "clickable").on("click", data.onClick);
+    }
 }
--- 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,23 @@ 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,
+    browserLinksSupported: boolean
 ): [HistogramData | null, TableDatum[]] {
    // get min/max
    const allIntervals = data.intervals;
@ -134,6 +147,13 @@ export function prepareIntervalData(
        return `${interval}<br>${total}: \u200e${percent.toFixed(1)}%`;
    }

+    function onClick(bin: Bin<number, number>): void {
+        const start = bin.x0!;
+        const end = bin.x1! - 1;
+        const query = makeQuery(start, end);
+        dispatch("search", { query });
+    }
+
    const meanInterval = Math.round(mean(allIntervals) ?? 0);
    const meanIntervalString = timeSpan(i18n, meanInterval * 86400, false);
    const tableData = [
@ -142,8 +162,17 @@ export function prepareIntervalData(
            value: meanIntervalString,
        },
    ];
+
    return [
-        { scale, bins, total: totalInPeriod, hoverText, colourScale, showArea: true },
+        {
+            scale,
+            bins,
+            total: totalInPeriod,
+            hoverText,
+            onClick: browserLinksSupported ? onClick : null,
+            colourScale,
+            showArea: true,
+        },
        tableData,
    ];
 }
--- 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);
+}