fix: resolve Temporal Dead Zone error on calendarGrid and wrap in ErrorBoundary
This commit is contained in:
parent
0a4ae66c92
commit
7cb4ec6282
3 changed files with 125 additions and 18 deletions
|
|
@ -62,7 +62,7 @@ var DEEPSEEK_LEVELS = [
|
|||
"#4f85ff"
|
||||
// Level 4: Bright electric DeepSeek blue
|
||||
];
|
||||
function HeatmapView() {
|
||||
function HeatmapInnerView() {
|
||||
const [data, setData] = (0, import_react.useState)(null);
|
||||
const [loading, setLoading] = (0, import_react.useState)(true);
|
||||
const [error, setError] = (0, import_react.useState)(null);
|
||||
|
|
@ -70,7 +70,7 @@ function HeatmapView() {
|
|||
const [selectedDate, setSelectedDate] = (0, import_react.useState)(null);
|
||||
const [hoveredDay, setHoveredDay] = (0, import_react.useState)(null);
|
||||
const [tooltipPos, setTooltipPos] = (0, import_react.useState)(null);
|
||||
const scrollContainerRef = import_react.default.useRef(null);
|
||||
const scrollContainerRef = (0, import_react.useRef)(null);
|
||||
const fetchStats = () => {
|
||||
setLoading(true);
|
||||
fetch("/api/dsh-token-heatmap/stats").then((r) => {
|
||||
|
|
@ -87,11 +87,6 @@ function HeatmapView() {
|
|||
(0, import_react.useEffect)(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
(0, import_react.useEffect)(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
|
||||
}
|
||||
}, [calendarGrid]);
|
||||
const activeView = (0, import_react.useMemo)(() => {
|
||||
if (!data) return null;
|
||||
if (selectedSessionId === "all") {
|
||||
|
|
@ -210,6 +205,11 @@ function HeatmapView() {
|
|||
});
|
||||
return headers;
|
||||
}, [calendarGrid]);
|
||||
(0, import_react.useEffect)(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
|
||||
}
|
||||
}, [calendarGrid]);
|
||||
if (loading && !data) {
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" } }, "Loading token usage statistics...");
|
||||
}
|
||||
|
|
@ -664,6 +664,54 @@ function HeatmapView() {
|
|||
)
|
||||
);
|
||||
}
|
||||
var HeatmapErrorBoundary = class extends import_react.default.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
static getDerivedStateFromError(error) {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
componentDidCatch(error, info) {
|
||||
console.error("Heatmap rendering error:", error, info);
|
||||
}
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "30px 20px", color: "var(--dsw-alias-state-error-primary, #ef4444)" } }, /* @__PURE__ */ import_react.default.createElement("h3", { style: { margin: "0 0 10px 0" } }, "Token Heatmap Encountered an Error"), /* @__PURE__ */ import_react.default.createElement(
|
||||
"pre",
|
||||
{
|
||||
style: {
|
||||
fontSize: 12,
|
||||
background: "rgba(0,0,0,0.3)",
|
||||
padding: 12,
|
||||
borderRadius: 8,
|
||||
overflowX: "auto"
|
||||
}
|
||||
},
|
||||
String(this.state.error?.message || this.state.error)
|
||||
), /* @__PURE__ */ import_react.default.createElement(
|
||||
"button",
|
||||
{
|
||||
onClick: () => this.setState({ hasError: false, error: null }),
|
||||
style: {
|
||||
marginTop: 12,
|
||||
padding: "6px 14px",
|
||||
background: "var(--dsw-alias-brand-primary, #3964fe)",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
cursor: "pointer"
|
||||
}
|
||||
},
|
||||
"Retry"
|
||||
));
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
};
|
||||
function HeatmapView() {
|
||||
return /* @__PURE__ */ import_react.default.createElement(HeatmapErrorBoundary, null, /* @__PURE__ */ import_react.default.createElement(HeatmapInnerView, null));
|
||||
}
|
||||
|
||||
// src/client/HeatmapModal.tsx
|
||||
var import_react2 = __toESM(require("react"), 1);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState, useMemo } from "react";
|
||||
import React, { useEffect, useState, useMemo, useRef } from "react";
|
||||
|
||||
export interface DaySessionDetail {
|
||||
sessionId: string;
|
||||
|
|
@ -78,7 +78,7 @@ const DEEPSEEK_LEVELS = [
|
|||
"#4f85ff", // Level 4: Bright electric DeepSeek blue
|
||||
];
|
||||
|
||||
export function HeatmapView() {
|
||||
function HeatmapInnerView() {
|
||||
const [data, setData] = useState<HeatmapResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
|
@ -86,7 +86,7 @@ export function HeatmapView() {
|
|||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||
const [hoveredDay, setHoveredDay] = useState<{ date: string; stats: DayStats } | null>(null);
|
||||
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null);
|
||||
const scrollContainerRef = React.useRef<HTMLDivElement>(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const fetchStats = () => {
|
||||
setLoading(true);
|
||||
|
|
@ -109,12 +109,6 @@ export function HeatmapView() {
|
|||
fetchStats();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
|
||||
}
|
||||
}, [calendarGrid]);
|
||||
|
||||
// Compute active days & stats based on session filter
|
||||
const activeView = useMemo(() => {
|
||||
if (!data) return null;
|
||||
|
|
@ -259,6 +253,12 @@ export function HeatmapView() {
|
|||
return headers;
|
||||
}, [calendarGrid]);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
|
||||
}
|
||||
}, [calendarGrid]);
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<div style={{ padding: "40px 20px", textAlign: "center", color: "var(--dsw-alias-label-secondary)" }}>
|
||||
|
|
@ -873,3 +873,62 @@ export function HeatmapView() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
class HeatmapErrorBoundary extends React.Component<
|
||||
{ children: React.ReactNode },
|
||||
{ hasError: boolean; error: any }
|
||||
> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
static getDerivedStateFromError(error: any) {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
componentDidCatch(error: any, info: any) {
|
||||
console.error("Heatmap rendering error:", error, info);
|
||||
}
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div style={{ padding: "30px 20px", color: "var(--dsw-alias-state-error-primary, #ef4444)" }}>
|
||||
<h3 style={{ margin: "0 0 10px 0" }}>Token Heatmap Encountered an Error</h3>
|
||||
<pre
|
||||
style={{
|
||||
fontSize: 12,
|
||||
background: "rgba(0,0,0,0.3)",
|
||||
padding: 12,
|
||||
borderRadius: 8,
|
||||
overflowX: "auto",
|
||||
}}
|
||||
>
|
||||
{String(this.state.error?.message || this.state.error)}
|
||||
</pre>
|
||||
<button
|
||||
onClick={() => this.setState({ hasError: false, error: null })}
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: "6px 14px",
|
||||
background: "var(--dsw-alias-brand-primary, #3964fe)",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export function HeatmapView() {
|
||||
return (
|
||||
<HeatmapErrorBoundary>
|
||||
<HeatmapInnerView />
|
||||
</HeatmapErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue