|
| 1 | +"use client"; |
| 2 | +import React, { useEffect, useMemo, useRef, useState } from "react"; |
| 3 | +import { ChevronDown, Check, Search } from "lucide-react"; |
| 4 | +import VirtualMetricList from "@/components/pca/VirtualMetricList"; |
| 5 | + |
| 6 | +export type TimePreset = { |
| 7 | + id: string; |
| 8 | + label: string; |
| 9 | + active: boolean; |
| 10 | + disabled: boolean; |
| 11 | + description: string; |
| 12 | +}; |
| 13 | + |
| 14 | +export function BasicController(props: { |
| 15 | + timePresets: TimePreset[]; |
| 16 | + onSelectPreset: (id: string) => void; |
| 17 | + |
| 18 | + metrics: string[]; |
| 19 | + selectedMetrics: Set<string>; |
| 20 | + onToggleMetric: (m: string) => void; |
| 21 | + onSelectAllMetrics: () => void; |
| 22 | + onClearMetrics: () => void; |
| 23 | + |
| 24 | + collapsible?: boolean; |
| 25 | + defaultCollapsed?: boolean; |
| 26 | + metricsPreviewCount?: number; |
| 27 | +}) { |
| 28 | + const { |
| 29 | + timePresets, |
| 30 | + onSelectPreset, |
| 31 | + metrics, |
| 32 | + selectedMetrics, |
| 33 | + onToggleMetric, |
| 34 | + onSelectAllMetrics, |
| 35 | + onClearMetrics, |
| 36 | + collapsible = true, |
| 37 | + defaultCollapsed = false, |
| 38 | + metricsPreviewCount = 3, |
| 39 | + } = props; |
| 40 | + |
| 41 | + const [collapsed, setCollapsed] = useState(defaultCollapsed); |
| 42 | + const [openPreset, setOpenPreset] = useState(false); |
| 43 | + const [openMetrics, setOpenMetrics] = useState(false); |
| 44 | + const [metricFilter, setMetricFilter] = useState(""); |
| 45 | + |
| 46 | + const presetBtnRef = useRef<HTMLButtonElement | null>(null); |
| 47 | + const presetMenuRef = useRef<HTMLDivElement | null>(null); |
| 48 | + const metricsBtnRef = useRef<HTMLButtonElement | null>(null); |
| 49 | + const metricsMenuRef = useRef<HTMLDivElement | null>(null); |
| 50 | + |
| 51 | + // close menus on outside click / Escape |
| 52 | + useEffect(() => { |
| 53 | + const onDown = (e: MouseEvent) => { |
| 54 | + const t = e.target as Node; |
| 55 | + if ( |
| 56 | + openPreset && |
| 57 | + !presetBtnRef.current?.contains(t) && |
| 58 | + !presetMenuRef.current?.contains(t) |
| 59 | + ) { |
| 60 | + setOpenPreset(false); |
| 61 | + } |
| 62 | + if ( |
| 63 | + openMetrics && |
| 64 | + !metricsBtnRef.current?.contains(t) && |
| 65 | + !metricsMenuRef.current?.contains(t) |
| 66 | + ) { |
| 67 | + setOpenMetrics(false); |
| 68 | + } |
| 69 | + }; |
| 70 | + const onKey = (e: KeyboardEvent) => { |
| 71 | + if (e.key === "Escape") { |
| 72 | + setOpenPreset(false); |
| 73 | + setOpenMetrics(false); |
| 74 | + } |
| 75 | + }; |
| 76 | + document.addEventListener("mousedown", onDown, true); |
| 77 | + document.addEventListener("keydown", onKey); |
| 78 | + return () => { |
| 79 | + document.removeEventListener("mousedown", onDown, true); |
| 80 | + document.removeEventListener("keydown", onKey); |
| 81 | + }; |
| 82 | + }, [openPreset, openMetrics]); |
| 83 | + |
| 84 | + const activePreset = timePresets.find((p) => p.active); |
| 85 | + const filteredMetrics = useMemo( |
| 86 | + () => |
| 87 | + metrics.filter((m) => |
| 88 | + m.replaceAll("_", " ").toLowerCase().includes(metricFilter.toLowerCase()) |
| 89 | + ), |
| 90 | + [metrics, metricFilter] |
| 91 | + ); |
| 92 | + |
| 93 | + const summary = |
| 94 | + (activePreset?.label ?? "No preset") + |
| 95 | + ` • ${selectedMetrics.size}/${metrics.length} metrics`; |
| 96 | + |
| 97 | + |
| 98 | + // helpers (place above return) |
| 99 | + const formatName = (s: string) => s.replaceAll("_", " "); |
| 100 | + const selectedList = useMemo( |
| 101 | + () => metrics.filter((m) => selectedMetrics.has(m)), |
| 102 | + [metrics, selectedMetrics] |
| 103 | + ); |
| 104 | + const preview = selectedList.slice(0, metricsPreviewCount).map(formatName); |
| 105 | + const leftover = Math.max(0, selectedList.length - preview.length); |
| 106 | + const previewLine = |
| 107 | + selectedList.length === 0 |
| 108 | + ? "none selected" |
| 109 | + : preview.join(", ") + (leftover > 0 ? ` +${leftover} more` : ""); |
| 110 | + const fullTitle = selectedList.map(formatName).join(", "); |
| 111 | + |
| 112 | + return ( |
| 113 | + <div className="relative z-40 w-full rounded-2xl border bg-white/70 shadow-sm"> |
| 114 | + {/* Header / toggle */} |
| 115 | + <button |
| 116 | + type="button" |
| 117 | + className="w-full flex items-center justify-between px-4 py-3" |
| 118 | + onClick={() => collapsible && setCollapsed((v) => !v)} |
| 119 | + aria-expanded={!collapsed} |
| 120 | + aria-controls="basic-controller-body" |
| 121 | + > |
| 122 | + <div className="flex flex-col text-left"> |
| 123 | + <span className="text-sm font-semibold text-gray-800">Basic Controller</span> |
| 124 | + <span className="text-xs text-gray-500">{summary}</span> |
| 125 | + </div> |
| 126 | + {collapsible && ( |
| 127 | + <ChevronDown |
| 128 | + className={`size-4 transition-transform ${collapsed ? "" : "rotate-180"}`} |
| 129 | + /> |
| 130 | + )} |
| 131 | + </button> |
| 132 | + |
| 133 | + {/* Body */} |
| 134 | + {!collapsed && ( |
| 135 | + <div id="basic-controller-body" className="p-4 pt-0"> |
| 136 | + <div className="flex items-start gap-6 flex-col md:flex-row"> |
| 137 | + {/* Preset dropdown */} |
| 138 | + <div className="flex-1"> |
| 139 | + <label className="text-sm font-semibold text-gray-700">Selected preset</label> |
| 140 | + <div className="relative mt-2"> |
| 141 | + <button |
| 142 | + ref={presetBtnRef} |
| 143 | + className="w-full inline-flex items-center justify-between rounded-xl border px-3 py-2 text-left hover:bg-gray-50" |
| 144 | + onClick={() => setOpenPreset((v) => !v)} |
| 145 | + > |
| 146 | + <div> |
| 147 | + <div className="font-medium"> |
| 148 | + {activePreset ? activePreset.label : "Select a preset"} |
| 149 | + </div> |
| 150 | + <div className="text-xs text-gray-500 truncate max-w-[22rem]"> |
| 151 | + {activePreset?.description || ""} |
| 152 | + </div> |
| 153 | + </div> |
| 154 | + <ChevronDown |
| 155 | + className={`size-4 transition-transform ${openPreset ? "rotate-180" : ""}`} |
| 156 | + /> |
| 157 | + </button> |
| 158 | + |
| 159 | + {openPreset && ( |
| 160 | + <div |
| 161 | + ref={presetMenuRef} |
| 162 | + className="absolute z-50 mt-2 w-full rounded-xl border bg-white shadow-lg overflow-hidden" |
| 163 | + > |
| 164 | + {timePresets.map((p) => ( |
| 165 | + <button |
| 166 | + key={p.id} |
| 167 | + disabled={p.disabled} |
| 168 | + onClick={() => { |
| 169 | + if (!p.disabled) onSelectPreset(p.id); |
| 170 | + setOpenPreset(false); |
| 171 | + }} |
| 172 | + className={`w-full text-left px-3 py-2 hover:bg-gray-50 flex items-start gap-2 ${p.disabled ? "opacity-50 cursor-not-allowed" : "" |
| 173 | + }`} |
| 174 | + > |
| 175 | + <div className="mt-0.5"> |
| 176 | + {p.active ? <Check className="size-4" /> : <span className="inline-block size-4" />} |
| 177 | + </div> |
| 178 | + <div> |
| 179 | + <div className="font-medium">{p.label}</div> |
| 180 | + {p.description && ( |
| 181 | + <div className="text-xs text-gray-500">{p.description}</div> |
| 182 | + )} |
| 183 | + </div> |
| 184 | + </button> |
| 185 | + ))} |
| 186 | + </div> |
| 187 | + )} |
| 188 | + </div> |
| 189 | + </div> |
| 190 | + |
| 191 | + {/* Metrics dropdown (search + virtual list inside) */} |
| 192 | + <div className="flex-1"> |
| 193 | + <label className="text-sm font-semibold text-gray-700">Metrics</label> |
| 194 | + <div className="relative mt-2"> |
| 195 | + <button |
| 196 | + ref={metricsBtnRef} |
| 197 | + className="w-full inline-flex items-center justify-between rounded-xl border px-3 py-2 text-left hover:bg-gray-50" |
| 198 | + onClick={() => setOpenMetrics((v) => !v)} |
| 199 | + aria-expanded={openMetrics} |
| 200 | + aria-controls="metrics-menu" |
| 201 | + title={fullTitle} |
| 202 | + > |
| 203 | + <div className="min-w-0"> |
| 204 | + <div className="font-medium"> |
| 205 | + {selectedMetrics.size} / {metrics.length} selected |
| 206 | + </div> |
| 207 | + <div className="text-xs text-gray-500 truncate"> |
| 208 | + {previewLine} |
| 209 | + </div> |
| 210 | + </div> |
| 211 | + <ChevronDown |
| 212 | + className={`size-4 shrink-0 transition-transform ${openMetrics ? "rotate-180" : ""}`} |
| 213 | + /> |
| 214 | + </button> |
| 215 | + |
| 216 | + {openMetrics && ( |
| 217 | + <div |
| 218 | + id="metrics-menu" |
| 219 | + ref={metricsMenuRef} |
| 220 | + className="absolute z-50 mt-2 w-[min(32rem,calc(100vw-3rem))] max-w-full rounded-xl border bg-white shadow-lg p-3" |
| 221 | + > |
| 222 | + {/* toolbar */} |
| 223 | + <div className="flex items-center justify-between gap-2"> |
| 224 | + <div className="flex-1 flex items-center gap-2 rounded-lg border px-2 py-1"> |
| 225 | + <Search className="size-4 text-gray-500" /> |
| 226 | + <input |
| 227 | + value={metricFilter} |
| 228 | + onChange={(e) => setMetricFilter(e.target.value)} |
| 229 | + className="w-full bg-transparent outline-none text-sm" |
| 230 | + placeholder="Filter metrics..." |
| 231 | + /> |
| 232 | + </div> |
| 233 | + <div className="flex items-center gap-2"> |
| 234 | + <button |
| 235 | + className="text-xs rounded-lg border px-2 py-1 hover:bg-gray-50" |
| 236 | + onClick={() => { |
| 237 | + const next = new Set(selectedMetrics); |
| 238 | + filteredMetrics.forEach((m) => next.add(m)); |
| 239 | + // call your existing helper |
| 240 | + onSelectAllMetrics(); |
| 241 | + }} |
| 242 | + > |
| 243 | + Select all (filtered) |
| 244 | + </button> |
| 245 | + <button |
| 246 | + className="text-xs rounded-lg border px-2 py-1 hover:bg-gray-50" |
| 247 | + onClick={() => { |
| 248 | + const next = new Set(selectedMetrics); |
| 249 | + filteredMetrics.forEach((m) => next.delete(m)); |
| 250 | + onClearMetrics(); |
| 251 | + }} |
| 252 | + > |
| 253 | + Clear (filtered) |
| 254 | + </button> |
| 255 | + </div> |
| 256 | + </div> |
| 257 | + |
| 258 | + {/* list */} |
| 259 | + <div className="mt-2 rounded-lg border"> |
| 260 | + <VirtualMetricList |
| 261 | + items={filteredMetrics} |
| 262 | + isChecked={(m) => selectedMetrics.has(m)} |
| 263 | + onToggle={onToggleMetric} |
| 264 | + height={240} // keeps it compact |
| 265 | + rowHeight={34} |
| 266 | + /> |
| 267 | + </div> |
| 268 | + </div> |
| 269 | + )} |
| 270 | + </div> |
| 271 | + </div> |
| 272 | + </div> |
| 273 | + </div> |
| 274 | + )} |
| 275 | + </div> |
| 276 | + ); |
| 277 | +} |
0 commit comments