Use browserLinksSupported preference

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>

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>

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>

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}`}>

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>

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,
         },

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,

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,

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
+        hoverzone.attr("class", "clickable").on("click", data.onClick);
-            .attr("class", "clickable")
-            .on("click", data.onClick);
     }
 }

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,
         },