From 887aa1c8b7461c7eb2c00ba05bf2b90b31eae034 Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Wed, 14 Aug 2024 15:34:24 +0300
Subject: [PATCH] Fix graph tooltips

---
 ts/routes/graphs/buttons.ts                   |  2 +-
 ts/routes/graphs/calendar.ts                  |  2 +-
 ts/routes/graphs/histogram-graph.ts           |  2 +-
 ts/routes/graphs/hours.ts                     |  2 +-
 ts/routes/graphs/reviews.ts                   |  2 +-
 .../{tooltip.ts => tooltip-utils.svelte.ts}   | 33 +++++++++++++------
 6 files changed, 28 insertions(+), 15 deletions(-)
 rename ts/routes/graphs/{tooltip.ts => tooltip-utils.svelte.ts} (51%)

diff --git a/ts/routes/graphs/buttons.ts b/ts/routes/graphs/buttons.ts
index 5da839945..85755085a 100644
--- a/ts/routes/graphs/buttons.ts
+++ b/ts/routes/graphs/buttons.ts
@@ -23,7 +23,7 @@ import {
 import type { GraphBounds } from "./graph-helpers";
 import { GraphRange } from "./graph-helpers";
 import { setDataAvailable } from "./graph-helpers";
-import { hideTooltip, showTooltip } from "./tooltip";
+import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
 
 /** 4 element array */
 type ButtonCounts = number[];
diff --git a/ts/routes/graphs/calendar.ts b/ts/routes/graphs/calendar.ts
index 723a8b561..a121eba2c 100644
--- a/ts/routes/graphs/calendar.ts
+++ b/ts/routes/graphs/calendar.ts
@@ -25,7 +25,7 @@ import {
 import type { GraphBounds, SearchDispatch } from "./graph-helpers";
 import { RevlogRange, setDataAvailable } from "./graph-helpers";
 import { clickableClass } from "./graph-styles";
-import { hideTooltip, showTooltip } from "./tooltip";
+import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
 
 export interface GraphData {
     // indexed by day, where day is relative to today
diff --git a/ts/routes/graphs/histogram-graph.ts b/ts/routes/graphs/histogram-graph.ts
index f05f5eb4e..da650c6ca 100644
--- a/ts/routes/graphs/histogram-graph.ts
+++ b/ts/routes/graphs/histogram-graph.ts
@@ -12,7 +12,7 @@ import { area, axisBottom, axisLeft, axisRight, cumsum, curveBasis, max, pointer
 import type { GraphBounds } from "./graph-helpers";
 import { setDataAvailable } from "./graph-helpers";
 import { clickableClass } from "./graph-styles";
-import { hideTooltip, showTooltip } from "./tooltip";
+import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
 
 export interface HistogramData {
     scale: ScaleLinear<number, number>;
diff --git a/ts/routes/graphs/hours.ts b/ts/routes/graphs/hours.ts
index 34684da1c..3f3b07771 100644
--- a/ts/routes/graphs/hours.ts
+++ b/ts/routes/graphs/hours.ts
@@ -26,7 +26,7 @@ import {
 import type { GraphBounds } from "./graph-helpers";
 import { GraphRange, setDataAvailable } from "./graph-helpers";
 import { oddTickClass } from "./graph-styles";
-import { hideTooltip, showTooltip } from "./tooltip";
+import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
 
 interface Hour {
     hour: number;
diff --git a/ts/routes/graphs/reviews.ts b/ts/routes/graphs/reviews.ts
index c5edfc9ff..8304371ff 100644
--- a/ts/routes/graphs/reviews.ts
+++ b/ts/routes/graphs/reviews.ts
@@ -33,7 +33,7 @@ import {
 
 import type { GraphBounds, TableDatum } from "./graph-helpers";
 import { GraphRange, numericMap, setDataAvailable } from "./graph-helpers";
-import { hideTooltip, showTooltip } from "./tooltip";
+import { hideTooltip, showTooltip } from "./tooltip-utils.svelte";
 
 interface Reviews {
     learn: number;
diff --git a/ts/routes/graphs/tooltip.ts b/ts/routes/graphs/tooltip-utils.svelte.ts
similarity index 51%
rename from ts/routes/graphs/tooltip.ts
rename to ts/routes/graphs/tooltip-utils.svelte.ts
index 1f94a029b..acb0c5b8f 100644
--- a/ts/routes/graphs/tooltip.ts
+++ b/ts/routes/graphs/tooltip-utils.svelte.ts
@@ -3,33 +3,46 @@
 
 import type { DebouncedFunc } from "lodash-es";
 import { throttle } from "lodash-es";
+import { mount } from "svelte";
 
 import Tooltip from "./Tooltip.svelte";
 
-let tooltip: Tooltip | null = null;
+type TooltipProps = {
+    html: string;
+    x: number;
+    y: number;
+    show: boolean;
+};
+let tooltip: Record<string, any> | null = null;
+let props: TooltipProps = { html: "", x: 0, y: 0, show: false };
 
-function getOrCreateTooltip(): Tooltip {
+function getOrCreateTooltip(): TooltipProps {
     if (tooltip) {
-        return tooltip;
+        return props;
     }
 
     const target = document.createElement("div");
-    tooltip = new Tooltip({ target });
+    const p = $state(props);
+    props = p;
+    tooltip = mount(Tooltip, { target, props });
+
     document.body.appendChild(target);
 
-    return tooltip;
+    return props;
 }
 
 function showTooltipInner(msg: string, x: number, y: number): void {
-    const tooltip = getOrCreateTooltip();
-
-    tooltip.$set({ html: msg, x, y, show: true });
+    const props = getOrCreateTooltip();
+    props.html = msg;
+    props.x = x;
+    props.y = y;
+    props.show = true;
 }
 
 export const showTooltip: DebouncedFunc<(msg: string, x: number, y: number) => void> = throttle(showTooltipInner, 16);
 
 export function hideTooltip(): void {
-    const tooltip = getOrCreateTooltip();
+    const props = getOrCreateTooltip();
     showTooltip.cancel();
-    tooltip.$set({ show: false });
+    props.show = false;
 }