7057 lines
247 KiB
TypeScript
7057 lines
247 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
||
import { invoke, IS_BROWSER_MODE } from "./tauriShim";
|
||
import { open, save } from "@tauri-apps/plugin-dialog";
|
||
|
||
const IMAGE_FOLDER_KEY = "kml_map_tool.image_folder";
|
||
const POPUP_SIZE_KEY = "kml_map_tool.popup_size";
|
||
const POPUP_ENABLED_KEY = "kml_map_tool.popup_enabled";
|
||
const BBOX_MODE_KEY = "kml_map_tool.bbox_mode";
|
||
const BBOX_OVERLAY_KEY = "kml_map_tool.bbox_overlay";
|
||
const POPUP_ASPECT_KEY = "kml_map_tool.popup_aspect";
|
||
const QUALITY_OFF_TRACK_KEY = "kml_map_tool.quality_off_track_m";
|
||
const PERF_MODE_KEY = "kml_map_tool.perf_mode";
|
||
|
||
type PopupSize = "S" | "M" | "L" | "XL";
|
||
const POPUP_WIDTH_PX: Record<PopupSize, number> = {
|
||
S: 220,
|
||
M: 330,
|
||
L: 440,
|
||
XL: 600,
|
||
};
|
||
type PopupAspect = "16:9" | "4:3" | "3:2" | "1:1";
|
||
const POPUP_ASPECT_VAL: Record<PopupAspect, number> = {
|
||
"16:9": 16 / 9,
|
||
"4:3": 4 / 3,
|
||
"3:2": 3 / 2,
|
||
"1:1": 1,
|
||
};
|
||
|
||
type Filters = {
|
||
videos: Set<string>; // empty = all
|
||
sides: Set<string>; // empty = all
|
||
types: Set<"fixed" | "range">; // empty = all
|
||
names: Set<string>; // empty = all (asset_name)
|
||
};
|
||
import {
|
||
MapView,
|
||
Viewport,
|
||
BoundsBox,
|
||
Vertex,
|
||
LayerVisibility,
|
||
OsmRoadFC,
|
||
} from "./MapView";
|
||
import { LensView } from "./LensView";
|
||
import { BASEMAPS, DEFAULT_BASEMAP_ID } from "./basemaps";
|
||
import type { ActionRow, Asset, ScopePolygon } from "./types";
|
||
import "./App.css";
|
||
import { LoginScreen } from "./LoginScreen";
|
||
|
||
const USER_KEY = "kml_map_tool.user";
|
||
const NA_VIDEO = "NA";
|
||
const NA_SENTINELS = new Set([
|
||
"",
|
||
"na",
|
||
"n/a",
|
||
"none",
|
||
"null",
|
||
"not available",
|
||
"unknown",
|
||
]);
|
||
const displayVideo = (v: string | null | undefined) => {
|
||
if (!v) return NA_VIDEO;
|
||
const t = v.trim();
|
||
if (t === "" || NA_SENTINELS.has(t.toLowerCase())) return NA_VIDEO;
|
||
return v;
|
||
};
|
||
|
||
const INITIAL_VIEWPORT: Viewport = {
|
||
center: [51.4, 25.5],
|
||
zoom: 9,
|
||
};
|
||
|
||
const BBOX_FETCH_DEBOUNCE_MS = 400;
|
||
|
||
type CurrentUser = { username: string; displayName: string };
|
||
|
||
export default function App() {
|
||
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(() => {
|
||
if (typeof window === "undefined") return null;
|
||
try {
|
||
const raw = window.localStorage.getItem(USER_KEY);
|
||
if (!raw) return null;
|
||
return JSON.parse(raw) as CurrentUser;
|
||
} catch {
|
||
return null;
|
||
}
|
||
});
|
||
// Re-establish backend session whenever we have a stored user.
|
||
useEffect(() => {
|
||
if (currentUser) {
|
||
invoke("set_current_user", { username: currentUser.username }).catch(
|
||
() => {},
|
||
);
|
||
}
|
||
}, [currentUser]);
|
||
if (!currentUser) {
|
||
return (
|
||
<LoginScreen
|
||
onLogin={(username, displayName) => {
|
||
const u = { username, displayName };
|
||
window.localStorage.setItem(USER_KEY, JSON.stringify(u));
|
||
setCurrentUser(u);
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
return <AppShell currentUser={currentUser} onLogout={() => {
|
||
window.localStorage.removeItem(USER_KEY);
|
||
setCurrentUser(null);
|
||
}} />;
|
||
}
|
||
|
||
// Diagnostic FPS overlay. Mounted only when Settings → Performance mode is on.
|
||
// Updates twice a second so the readout is stable enough to read while panning.
|
||
function FpsCounter() {
|
||
const [fps, setFps] = useState(0);
|
||
useEffect(() => {
|
||
let raf = 0;
|
||
let frames = 0;
|
||
let last = performance.now();
|
||
const tick = () => {
|
||
frames++;
|
||
const now = performance.now();
|
||
if (now - last >= 500) {
|
||
setFps(Math.round((frames * 1000) / (now - last)));
|
||
frames = 0;
|
||
last = now;
|
||
}
|
||
raf = requestAnimationFrame(tick);
|
||
};
|
||
raf = requestAnimationFrame(tick);
|
||
return () => cancelAnimationFrame(raf);
|
||
}, []);
|
||
return (
|
||
<div
|
||
style={{
|
||
position: "fixed",
|
||
top: 8,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
zIndex: 9000,
|
||
background: "rgba(0,0,0,0.75)",
|
||
color: fps >= 50 ? "#7CFC00" : fps >= 30 ? "#FFD700" : "#FF6B6B",
|
||
padding: "4px 10px",
|
||
borderRadius: 4,
|
||
fontFamily: "monospace",
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
pointerEvents: "none",
|
||
}}
|
||
>
|
||
{fps} fps · perf
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Lightweight indicator while the Overpass fetch is in flight. Single line,
|
||
// no animation, no fixed positioning — just a small chip in the corner so
|
||
// the user knows the click is doing something.
|
||
function OsmFetchIndicator() {
|
||
const [elapsed, setElapsed] = useState(0);
|
||
useEffect(() => {
|
||
const start = performance.now();
|
||
const id = window.setInterval(() => {
|
||
setElapsed(Math.floor((performance.now() - start) / 1000));
|
||
}, 500);
|
||
return () => window.clearInterval(id);
|
||
}, []);
|
||
return (
|
||
<div
|
||
style={{
|
||
position: "fixed",
|
||
bottom: 12,
|
||
right: 12,
|
||
zIndex: 9500,
|
||
background: "rgba(20, 20, 20, 0.8)",
|
||
color: "#fff",
|
||
padding: "6px 10px",
|
||
borderRadius: 4,
|
||
fontFamily: "system-ui, sans-serif",
|
||
fontSize: 12,
|
||
pointerEvents: "none",
|
||
}}
|
||
>
|
||
Fetching OSM… {elapsed}s
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function AppShell({
|
||
currentUser,
|
||
onLogout,
|
||
}: {
|
||
currentUser: CurrentUser;
|
||
onLogout: () => void;
|
||
}) {
|
||
const [viewport, setViewport] = useState<Viewport>(
|
||
IS_BROWSER_MODE
|
||
? { center: [78.347, 17.398], zoom: 14 }
|
||
: INITIAL_VIEWPORT,
|
||
);
|
||
const [bounds, setBounds] = useState<BoundsBox | null>(null);
|
||
const [primaryId, setPrimaryId] = useState<string>(DEFAULT_BASEMAP_ID);
|
||
const [secondaryId, setSecondaryId] = useState<string>("esri-imagery");
|
||
const [compare, setCompare] = useState<boolean>(false);
|
||
const [assets, setAssets] = useState<Asset[]>([]);
|
||
const [scopePolygons, setScopePolygons] = useState<ScopePolygon[]>([]);
|
||
const [dataCounts, setDataCounts] = useState<{
|
||
fixed_assets: number;
|
||
range_assets: number;
|
||
osm_roads: number;
|
||
scope_features: number;
|
||
video_metadata: number;
|
||
}>({
|
||
fixed_assets: 0,
|
||
range_assets: 0,
|
||
osm_roads: 0,
|
||
scope_features: 0,
|
||
video_metadata: 0,
|
||
});
|
||
const [recentActions, setRecentActions] = useState<ActionRow[]>([]);
|
||
const [status, setStatus] = useState<string>("");
|
||
const [busy, setBusy] = useState<boolean>(false);
|
||
const [selectedAssetId, setSelectedAssetId] = useState<number | null>(null);
|
||
// Ctrl/Cmd+click extends an additive selection that the Delete shortcut acts
|
||
// on in bulk. Plain click (single-select) clears it so the two paths don't
|
||
// mix and surprise the user with stale halos.
|
||
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<number>>(
|
||
() => new Set(),
|
||
);
|
||
const [bulkVideoName, setBulkVideoName] = useState<string>("");
|
||
const [mergePrimary, setMergePrimary] = useState<Asset | null>(null);
|
||
const [mergeSecondary, setMergeSecondary] = useState<Asset | null>(null);
|
||
const [panelOpen, setPanelOpen] = useState<boolean>(true);
|
||
const [placeMode, setPlaceMode] = useState<boolean>(false);
|
||
const [imageFolder, setImageFolder] = useState<string | null>(() =>
|
||
typeof window !== "undefined"
|
||
? window.localStorage.getItem(IMAGE_FOLDER_KEY)
|
||
: null,
|
||
);
|
||
const OSM_FOLDER_KEY = "kml_map_tool.osm_folder";
|
||
const [osmFolder, setOsmFolder] = useState<string | null>(() =>
|
||
typeof window !== "undefined"
|
||
? window.localStorage.getItem(OSM_FOLDER_KEY)
|
||
: null,
|
||
);
|
||
const [osmRoads, setOsmRoads] = useState<OsmRoadFC>({
|
||
type: "FeatureCollection",
|
||
features: [],
|
||
});
|
||
const [metadataTrack, setMetadataTrack] = useState<Array<[number, number]>>([]);
|
||
// Per-video metadata polylines loaded from a multi-video JSON. When set,
|
||
// snap-to-road and direction inference look up each asset's track by video.
|
||
// The single-track `metadataTrack` is still used as a fallback (e.g. when
|
||
// only one video is loaded via the legacy importer).
|
||
const [metadataByVideo, setMetadataByVideo] = useState<
|
||
Record<string, Array<[number, number]>>
|
||
>({});
|
||
const [selectedMetadataVideo, setSelectedMetadataVideo] = useState<
|
||
string | null
|
||
>(null);
|
||
const [layerVisibility, setLayerVisibility] = useState<LayerVisibility>({
|
||
scope: true,
|
||
metadata: true,
|
||
osm: true,
|
||
fixed: true,
|
||
range: true,
|
||
});
|
||
const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
|
||
// Cursor-following magnifier. Toggle from the right-side panel; ESC exits.
|
||
// While active, the main map fires onCursorWorld and we render LensView at
|
||
// (cursorScreen.x + offset, cursorScreen.y + offset) showing the world at
|
||
// viewport.zoom + LENS_ZOOM_DELTA.
|
||
const [lensActive, setLensActive] = useState<boolean>(false);
|
||
const [cursorWorld, setCursorWorld] = useState<{
|
||
lng: number;
|
||
lat: number;
|
||
} | null>(null);
|
||
const [cursorScreen, setCursorScreen] = useState<{
|
||
x: number;
|
||
y: number;
|
||
} | null>(null);
|
||
// rAF throttle: mousemove fires up to 60+ Hz; coalescing to one React state
|
||
// commit per animation frame keeps the lens setCenter cheap and avoids the
|
||
// App tree thrashing on every pixel of pointer movement.
|
||
const lensPendingRef = useRef<{
|
||
lng: number;
|
||
lat: number;
|
||
x: number;
|
||
y: number;
|
||
} | null>(null);
|
||
const lensRafRef = useRef<number | null>(null);
|
||
useEffect(() => {
|
||
return () => {
|
||
if (lensRafRef.current !== null)
|
||
cancelAnimationFrame(lensRafRef.current);
|
||
};
|
||
}, []);
|
||
const [qualityOffTrackM, setQualityOffTrackM] = useState<number>(() => {
|
||
if (typeof window === "undefined") return 30;
|
||
const v = window.localStorage.getItem(QUALITY_OFF_TRACK_KEY);
|
||
const n = v ? parseFloat(v) : NaN;
|
||
return Number.isFinite(n) && n > 0 ? n : 30;
|
||
});
|
||
const [popupSize, setPopupSize] = useState<PopupSize>(() => {
|
||
if (typeof window === "undefined") return "L";
|
||
const v = window.localStorage.getItem(POPUP_SIZE_KEY) as PopupSize | null;
|
||
return v && v in POPUP_WIDTH_PX ? v : "L";
|
||
});
|
||
const [popupEnabled, setPopupEnabled] = useState<boolean>(() => {
|
||
if (typeof window === "undefined") return true;
|
||
const v = window.localStorage.getItem(POPUP_ENABLED_KEY);
|
||
return v === null ? true : v === "1";
|
||
});
|
||
const [bboxMode, setBboxMode] = useState<boolean>(() => {
|
||
if (typeof window === "undefined") return false;
|
||
return window.localStorage.getItem(BBOX_MODE_KEY) === "1";
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(BBOX_MODE_KEY, bboxMode ? "1" : "0");
|
||
}, [bboxMode]);
|
||
// Independent of edit mode — whether the bbox rectangle/label is shown on
|
||
// the popup image at all. Default ON so users see annotations immediately.
|
||
const [bboxOverlay, setBboxOverlay] = useState<boolean>(() => {
|
||
if (typeof window === "undefined") return true;
|
||
const v = window.localStorage.getItem(BBOX_OVERLAY_KEY);
|
||
return v === null ? true : v === "1";
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(BBOX_OVERLAY_KEY, bboxOverlay ? "1" : "0");
|
||
}, [bboxOverlay]);
|
||
const [popupAspect, setPopupAspect] = useState<PopupAspect>(() => {
|
||
if (typeof window === "undefined") return "4:3";
|
||
const v = window.localStorage.getItem(POPUP_ASPECT_KEY) as PopupAspect | null;
|
||
return v && v in POPUP_ASPECT_VAL ? v : "4:3";
|
||
});
|
||
// Diagnostic: while pan/zoom is active, render only basemap + asset
|
||
// ScatterplotLayer + range PathLayer. Lets us isolate whether residual
|
||
// lag is from layer complexity vs the WebView itself.
|
||
const [perfMode, setPerfMode] = useState<boolean>(() => {
|
||
if (typeof window === "undefined") return false;
|
||
return window.localStorage.getItem(PERF_MODE_KEY) === "1";
|
||
});
|
||
const [osmFetchActive, setOsmFetchActive] = useState<boolean>(false);
|
||
// Data-quality dashboard. Counts + sample id lists per category. Refreshed
|
||
// on demand via the Quality panel (not auto-recomputed — too expensive at
|
||
// 50 k+ assets).
|
||
type QualityReport = {
|
||
moved_far: number[];
|
||
far_from_metadata: number[];
|
||
missing_side: number[];
|
||
moved_far_total: number;
|
||
far_from_metadata_total: number;
|
||
missing_side_total: number;
|
||
};
|
||
const [qualityReport, setQualityReport] = useState<QualityReport | null>(
|
||
null,
|
||
);
|
||
const [qualityLoading, setQualityLoading] = useState<boolean>(false);
|
||
const [qualityHighlight, setQualityHighlight] = useState<number[]>([]);
|
||
// Step-through state for the Quality View action: cycle one issue at a
|
||
// time, zoomed in tight, with Prev/Next buttons. The bbox-fit approach
|
||
// didn't work for issues 50 km apart — z=8 is unreadable.
|
||
const [qualityStep, setQualityStep] = useState<{
|
||
label: string;
|
||
coords: Array<{ id: number; lat: number; lng: number }>;
|
||
idx: number;
|
||
} | null>(null);
|
||
// Toast shown after a snap operation reporting whether the snap left
|
||
// the data clean. Total = sum of the three Quality categories.
|
||
const [snapQualityToast, setSnapQualityToast] = useState<{
|
||
label: string;
|
||
total: number;
|
||
breakdown: { moved: number; offTrack: number; missingSide: number };
|
||
} | null>(null);
|
||
const [filters, setFilters] = useState<Filters>({
|
||
videos: new Set(),
|
||
sides: new Set(),
|
||
types: new Set(),
|
||
names: new Set(),
|
||
});
|
||
const [videosExpanded, setVideosExpanded] = useState<boolean>(false);
|
||
const [namesExpanded, setNamesExpanded] = useState<boolean>(true);
|
||
const [filterPanelOpen, setFilterPanelOpen] = useState<boolean>(true);
|
||
const [videoSearch, setVideoSearch] = useState<string>("");
|
||
const [gotoQuery, setGotoQuery] = useState<string>("");
|
||
const [gotoPin, setGotoPin] = useState<{ lat: number; lng: number } | null>(
|
||
null,
|
||
);
|
||
const [markedVertices, setMarkedVertices] = useState<Set<number>>(new Set());
|
||
const [simplifyTolM, setSimplifyTolM] = useState<number>(2);
|
||
const [allAssetNames, setAllAssetNames] = useState<string[]>([]);
|
||
const [osmEditMode, setOsmEditMode] = useState<boolean>(false);
|
||
const [editingRoadId, setEditingRoadId] = useState<number | null>(null);
|
||
// Multi-select + temporary hide for the focused-video OSM workflow. Both
|
||
// sets are session-only: cleared when leaving OSM edit mode or switching
|
||
// the focused video.
|
||
const [selectedRoadIds, setSelectedRoadIds] = useState<Set<number>>(
|
||
new Set(),
|
||
);
|
||
const [hiddenRoadIds, setHiddenRoadIds] = useState<Set<number>>(new Set());
|
||
// Reset the marked-vertex set whenever the user switches roads or leaves
|
||
// OSM-edit mode. Indices are road-relative, so they're meaningless across
|
||
// roads.
|
||
useEffect(() => {
|
||
setMarkedVertices(new Set());
|
||
}, [editingRoadId, osmEditMode]);
|
||
useEffect(() => {
|
||
if (!osmEditMode) {
|
||
// Clear transient visual selection. Hidden roads and the undo ring
|
||
// buffer survive exit/re-entry so the user can pop into the layer to
|
||
// sanity-check elsewhere and come back without losing their work.
|
||
setSelectedRoadIds(new Set());
|
||
}
|
||
}, [osmEditMode]);
|
||
|
||
// Per-session OSM edit undo: ring buffer (last 3) covering flip / simplify
|
||
// / vertex-delete / drag-vertex / snap-ignore toggle, plus client-only hide
|
||
// and restore. Persists across OSM-mode toggles within a session so users
|
||
// can exit/re-enter without losing their last few edits. Merges aren't
|
||
// undoable here (they delete source rows; this ring buffer doesn't
|
||
// recreate them).
|
||
type OsmRoadSnap = {
|
||
id: number;
|
||
name: string | null;
|
||
geojson: string;
|
||
oneway: number;
|
||
highway: string | null;
|
||
snap_ignored: number;
|
||
};
|
||
type OsmUndoEntry =
|
||
| {
|
||
kind: "restore-roads";
|
||
snapshots: OsmRoadSnap[];
|
||
// Rows that were *created* by the operation (e.g. the right-half row
|
||
// from a section split). Undo deletes them before restoring snapshots,
|
||
// so the original geometry is the only survivor.
|
||
createdIds?: number[];
|
||
label: string;
|
||
}
|
||
| { kind: "unhide"; ids: number[]; label: string }
|
||
| { kind: "rehide"; ids: number[]; label: string };
|
||
const [osmUndoStack, setOsmUndoStack] = useState<OsmUndoEntry[]>([]);
|
||
const pushOsmUndo = (entry: OsmUndoEntry) => {
|
||
setOsmUndoStack((prev) => [...prev, entry].slice(-3));
|
||
};
|
||
async function snapshotRoadsForUndo(
|
||
ids: number[],
|
||
label: string,
|
||
): Promise<void> {
|
||
if (!osmEditMode || ids.length === 0) return;
|
||
try {
|
||
const snapshots = await invoke<OsmRoadSnap[]>("osm_road_snapshot", {
|
||
ids,
|
||
});
|
||
if (snapshots.length > 0) {
|
||
pushOsmUndo({ kind: "restore-roads", snapshots, label });
|
||
}
|
||
} catch (e) {
|
||
console.warn("osm_road_snapshot failed", e);
|
||
}
|
||
}
|
||
// For ops that mutate AND create new rows (delete_road_section split), the
|
||
// caller should snapshot first, run the op, then call this with the ids
|
||
// that were freshly inserted so undo can drop them on the way back.
|
||
function attachCreatedIdsToLastUndo(createdIds: number[]) {
|
||
if (createdIds.length === 0) return;
|
||
setOsmUndoStack((prev) => {
|
||
if (prev.length === 0) return prev;
|
||
const last = prev[prev.length - 1];
|
||
if (last.kind !== "restore-roads") return prev;
|
||
const next = prev.slice();
|
||
next[next.length - 1] = {
|
||
...last,
|
||
createdIds: [...(last.createdIds ?? []), ...createdIds],
|
||
};
|
||
return next;
|
||
});
|
||
}
|
||
async function performOsmUndo() {
|
||
if (osmUndoStack.length === 0) return;
|
||
const last = osmUndoStack[osmUndoStack.length - 1];
|
||
setOsmUndoStack((prev) => prev.slice(0, -1));
|
||
try {
|
||
if (last.kind === "restore-roads") {
|
||
// Delete any rows that the operation created before restoring the
|
||
// original geometry — otherwise a split-section undo leaves a stale
|
||
// duplicate alongside the resurrected original.
|
||
if (last.createdIds && last.createdIds.length > 0) {
|
||
for (const cid of last.createdIds) {
|
||
try {
|
||
await invoke("delete_osm_road", { id: cid });
|
||
} catch (e) {
|
||
console.warn(`undo: delete_osm_road(${cid}) failed`, e);
|
||
}
|
||
}
|
||
}
|
||
const n = await invoke<number>("restore_road_state", {
|
||
snapshots: last.snapshots,
|
||
});
|
||
await refreshOsmRoads();
|
||
setStatus(`Undid ${last.label} (${n} road${n === 1 ? "" : "s"} restored).`);
|
||
} else if (last.kind === "unhide") {
|
||
setHiddenRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const id of last.ids) next.delete(id);
|
||
return next;
|
||
});
|
||
setStatus(`Undid ${last.label} (${last.ids.length} road(s) restored from hidden).`);
|
||
} else {
|
||
setHiddenRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const id of last.ids) next.add(id);
|
||
return next;
|
||
});
|
||
setStatus(`Undid ${last.label} (${last.ids.length} road(s) hidden again).`);
|
||
}
|
||
} catch (e) {
|
||
setStatus(`Undo failed: ${e}`);
|
||
}
|
||
}
|
||
const [drawRoadMode, setDrawRoadMode] = useState<boolean>(false);
|
||
const [drawRoadCoords, setDrawRoadCoords] = useState<
|
||
Array<[number, number]>
|
||
>([]);
|
||
const [lassoMode, setLassoMode] = useState<boolean>(false);
|
||
const [lassoShape, setLassoShape] = useState<"circle" | "rect" | "polygon">(
|
||
"circle",
|
||
);
|
||
const [lassoSelected, setLassoSelected] = useState<{
|
||
ids: number[];
|
||
label: string;
|
||
} | null>(null);
|
||
const [lassoPolygonPoints, setLassoPolygonPoints] = useState<
|
||
Array<[number, number]> | null
|
||
>(null);
|
||
const [linkPickMode, setLinkPickMode] = useState<boolean>(false);
|
||
const [rightClickFirstId, setRightClickFirstId] = useState<number | null>(null);
|
||
const [selectedLink, setSelectedLink] = useState<[number, number] | null>(null);
|
||
// GPS-bias anchors: each anchor stashes the asset's lat/lng *at the time of
|
||
// marking* so we can compute the user's hand-drag delta later. Drags are
|
||
// committed to the DB normally; Distribute reads each asset's current position
|
||
// and compares to its origLat/origLng to derive Δ.
|
||
const [anchors, setAnchors] = useState<
|
||
Map<number, { origLat: number; origLng: number; rowId: string }>
|
||
>(new Map());
|
||
const [autoLinkMaxM, setAutoLinkMaxM] = useState<number>(() => {
|
||
if (typeof window === "undefined") return 30;
|
||
const v = window.localStorage.getItem("kml_map_tool.autolink_max_m");
|
||
const n = v ? parseFloat(v) : NaN;
|
||
return Number.isFinite(n) && n > 0 ? n : 30;
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(
|
||
"kml_map_tool.autolink_max_m",
|
||
String(autoLinkMaxM),
|
||
);
|
||
}, [autoLinkMaxM]);
|
||
const [lassoListOpen, setLassoListOpen] = useState<boolean>(false);
|
||
const [showDeleted, setShowDeleted] = useState<boolean>(false);
|
||
// "Only deleted" inverts the deleted-asset filter: live rows are hidden and
|
||
// the bbox fetch implicitly includes deleted rows. Useful for triaging the
|
||
// trash without scrolling through everything else.
|
||
const [onlyDeleted, setOnlyDeleted] = useState<boolean>(false);
|
||
const [showOutOfScope, setShowOutOfScope] = useState<boolean>(true);
|
||
const [showInScope, setShowInScope] = useState<boolean>(true);
|
||
const [visibilityOpen, setVisibilityOpen] = useState<boolean>(false);
|
||
const [allVideoNames, setAllVideoNames] = useState<string[]>([]);
|
||
// Some Save dialogs (notably GTK on Linux) hide the file-filter dropdown,
|
||
// so users couldn't tell they were even picking a format. We surface the
|
||
// choice directly in the side panel — this is the format the next Export
|
||
// click will use.
|
||
const [exportFormat, setExportFormat] = useState<
|
||
"source" | "geojson" | "kml" | "csv"
|
||
>("source");
|
||
const DUP_EPS_KEY = "kml_map_tool.dup_eps_m";
|
||
const [dupEpsM, setDupEpsM] = useState<number>(() => {
|
||
if (typeof window === "undefined") return 3;
|
||
const v = parseFloat(window.localStorage.getItem(DUP_EPS_KEY) ?? "");
|
||
return Number.isFinite(v) && v > 0 ? v : 3;
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(DUP_EPS_KEY, String(dupEpsM));
|
||
}, [dupEpsM]);
|
||
type DupMember = {
|
||
id: number;
|
||
row_id: string;
|
||
asset_name: string;
|
||
video_name: string;
|
||
side: string | null;
|
||
lat: number | null;
|
||
lng: number | null;
|
||
asset_type: string;
|
||
};
|
||
type DupCluster = { id: number; asset_name: string; members: DupMember[] };
|
||
const [dupClusters, setDupClusters] = useState<DupCluster[]>([]);
|
||
const [dupActive, setDupActive] = useState<number | null>(null);
|
||
const [dupKeep, setDupKeep] = useState<Map<number, number>>(new Map());
|
||
const [dupCrossOnly, setDupCrossOnly] = useState<boolean>(false);
|
||
const [classNames, setClassNames] = useState<string[]>([]);
|
||
const [renameOpen, setRenameOpen] = useState<
|
||
null | { ids: number[]; current: string }
|
||
>(null);
|
||
const [renameInput, setRenameInput] = useState<string>("");
|
||
// Auto-dismissing toast for transient confirmations (delete, rename, side
|
||
// flip). Separate from the persistent status bar at the top — toasts
|
||
// float at the bottom and disappear after ~2s.
|
||
const [toast, setToast] = useState<string | null>(null);
|
||
const toastTimerRef = useRef<number | null>(null);
|
||
const showToast = (text: string) => {
|
||
setToast(text);
|
||
if (toastTimerRef.current !== null) {
|
||
window.clearTimeout(toastTimerRef.current);
|
||
}
|
||
toastTimerRef.current = window.setTimeout(() => {
|
||
setToast(null);
|
||
toastTimerRef.current = null;
|
||
}, 2200);
|
||
};
|
||
const [osmToolsOpen, setOsmToolsOpen] = useState<boolean>(false);
|
||
const [importsOpen, setImportsOpen] = useState<boolean>(false);
|
||
const [osmToolPrune, setOsmToolPrune] = useState<boolean>(true);
|
||
const [osmToolPruneClasses, setOsmToolPruneClasses] = useState<string>(
|
||
"service,residential,unclassified,footway,path,track,cycleway,pedestrian,living_street,busway",
|
||
);
|
||
const savedVisRef = useRef<LayerVisibility | null>(null);
|
||
const CENTERLINE_NAMES_KEY = "kml_map_tool.centerline_names";
|
||
const [centerlineNames, setCenterlineNames] = useState<Set<string>>(() => {
|
||
if (typeof window === "undefined") return new Set();
|
||
try {
|
||
const raw = window.localStorage.getItem(CENTERLINE_NAMES_KEY);
|
||
return new Set<string>(raw ? (JSON.parse(raw) as string[]) : []);
|
||
} catch {
|
||
return new Set();
|
||
}
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(
|
||
CENTERLINE_NAMES_KEY,
|
||
JSON.stringify(Array.from(centerlineNames)),
|
||
);
|
||
}, [centerlineNames]);
|
||
const ROAD_OFFSET_KEY = "kml_map_tool.road_offset_m";
|
||
const [roadOffsetMeters, setRoadOffsetMeters] = useState<number>(() => {
|
||
if (typeof window === "undefined") return 4;
|
||
const v = parseFloat(window.localStorage.getItem(ROAD_OFFSET_KEY) ?? "");
|
||
return Number.isFinite(v) && v > 0 ? v : 4;
|
||
});
|
||
useEffect(() => {
|
||
window.localStorage.setItem(ROAD_OFFSET_KEY, String(roadOffsetMeters));
|
||
}, [roadOffsetMeters]);
|
||
// Per-road lane-offset overrides. The slider above sets the default; when
|
||
// one or more roads are selected, the slider writes an override into this
|
||
// map so each road's parallels can sit at its own width without dragging
|
||
// the rest of the network with it. In-memory only — overrides reset across
|
||
// reloads, but the default persists.
|
||
const [roadOffsetById, setRoadOffsetById] = useState<Map<number, number>>(
|
||
() => new Map(),
|
||
);
|
||
|
||
useEffect(() => {
|
||
const w = POPUP_WIDTH_PX[popupSize];
|
||
const h = Math.round(w / POPUP_ASPECT_VAL[popupAspect]);
|
||
document.documentElement.style.setProperty("--popup-img-w", `${w}px`);
|
||
document.documentElement.style.setProperty("--popup-img-h", `${h}px`);
|
||
window.localStorage.setItem(POPUP_SIZE_KEY, popupSize);
|
||
window.localStorage.setItem(POPUP_ASPECT_KEY, popupAspect);
|
||
}, [popupSize, popupAspect]);
|
||
useEffect(() => {
|
||
window.localStorage.setItem(POPUP_ENABLED_KEY, popupEnabled ? "1" : "0");
|
||
}, [popupEnabled]);
|
||
useEffect(() => {
|
||
window.localStorage.setItem(
|
||
QUALITY_OFF_TRACK_KEY,
|
||
String(qualityOffTrackM),
|
||
);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [qualityOffTrackM]);
|
||
useEffect(() => {
|
||
window.localStorage.setItem(PERF_MODE_KEY, perfMode ? "1" : "0");
|
||
}, [perfMode]);
|
||
// Auto-dismiss the post-snap quality toast after a few seconds. Fast
|
||
// enough not to linger; slow enough to read.
|
||
useEffect(() => {
|
||
if (!snapQualityToast) return;
|
||
const t = window.setTimeout(() => setSnapQualityToast(null), 8000);
|
||
return () => window.clearTimeout(t);
|
||
}, [snapQualityToast]);
|
||
|
||
// Counts on the current bbox slice (live update as user pans/zooms).
|
||
const counts = useMemo(() => {
|
||
const byVideo = new Map<string, number>();
|
||
const bySide = new Map<string, number>();
|
||
const byType = new Map<string, number>();
|
||
for (const a of assets) {
|
||
const vn = displayVideo(a.video_name);
|
||
byVideo.set(vn, (byVideo.get(vn) ?? 0) + 1);
|
||
const s = a.side ?? "(none)";
|
||
bySide.set(s, (bySide.get(s) ?? 0) + 1);
|
||
byType.set(a.asset_type, (byType.get(a.asset_type) ?? 0) + 1);
|
||
}
|
||
return { byVideo, bySide, byType };
|
||
}, [assets]);
|
||
|
||
const filteredAssets = useMemo(() => {
|
||
return assets.filter((a) => {
|
||
if (filters.videos.size && !filters.videos.has(displayVideo(a.video_name)))
|
||
return false;
|
||
if (filters.sides.size) {
|
||
const s = a.side ?? "(none)";
|
||
if (!filters.sides.has(s)) return false;
|
||
}
|
||
if (filters.types.size && !filters.types.has(a.asset_type)) return false;
|
||
if (filters.names.size && !filters.names.has(a.asset_name)) return false;
|
||
// Video filter: explicit list. If allVideoNames is loaded and the asset's
|
||
// video isn't in filters.videos, hide it.
|
||
if (
|
||
allVideoNames.length > 0 &&
|
||
!filters.videos.has(displayVideo(a.video_name))
|
||
)
|
||
return false;
|
||
if (onlyDeleted) {
|
||
if (a.deleted === 0) return false;
|
||
}
|
||
const inScope = a.in_scope !== 0;
|
||
if (!showOutOfScope && !inScope) return false;
|
||
if (!showInScope && inScope) return false;
|
||
return true;
|
||
});
|
||
}, [assets, filters, showOutOfScope, showInScope, onlyDeleted, allVideoNames]);
|
||
|
||
// Per-asset_name counts within the current video/side/type filter context
|
||
// (but ignoring the names filter itself, so toggling a name doesn't make the
|
||
// others disappear).
|
||
const namesCounts = useMemo(() => {
|
||
const m = new Map<string, number>();
|
||
for (const a of assets) {
|
||
if (filters.videos.size && !filters.videos.has(displayVideo(a.video_name)))
|
||
continue;
|
||
if (filters.sides.size) {
|
||
const s = a.side ?? "(none)";
|
||
if (!filters.sides.has(s)) continue;
|
||
}
|
||
if (filters.types.size && !filters.types.has(a.asset_type)) continue;
|
||
m.set(a.asset_name, (m.get(a.asset_name) ?? 0) + 1);
|
||
}
|
||
return m;
|
||
}, [assets, filters.videos, filters.sides, filters.types]);
|
||
|
||
function toggleSet<T>(set: Set<T>, value: T): Set<T> {
|
||
const next = new Set(set);
|
||
if (next.has(value)) next.delete(value);
|
||
else next.add(value);
|
||
return next;
|
||
}
|
||
|
||
function clearFilters() {
|
||
setFilters({
|
||
videos: new Set(),
|
||
sides: new Set(),
|
||
types: new Set(),
|
||
names: new Set(),
|
||
});
|
||
}
|
||
|
||
const NUDGE_METERS = 0.5;
|
||
|
||
const selectedAsset = useMemo(
|
||
() => assets.find((a) => a.id === selectedAssetId) ?? null,
|
||
[assets, selectedAssetId],
|
||
);
|
||
|
||
const navigableAssets = useMemo(() => {
|
||
return [...filteredAssets].sort((a, b) => {
|
||
const va = displayVideo(a.video_name).localeCompare(
|
||
displayVideo(b.video_name),
|
||
);
|
||
if (va !== 0) return va;
|
||
return a.id - b.id;
|
||
});
|
||
}, [filteredAssets]);
|
||
|
||
// Memoize colorBy decision — at 50k filtered assets, rebuilding two Sets on
|
||
// every parent render was burning meaningful CPU.
|
||
const colorBy = useMemo<"video" | "asset" | "side">(() => {
|
||
const vids = new Set<string>();
|
||
const names = new Set<string>();
|
||
for (const a of filteredAssets) {
|
||
vids.add(displayVideo(a.video_name));
|
||
names.add(a.asset_name);
|
||
if (vids.size > 1 && names.size > 1) break; // early-out: result will be "video"
|
||
}
|
||
// Single video visible → fall back to asset / side coloring so the user
|
||
// can tell individual assets apart instead of seeing one solid color.
|
||
if (vids.size <= 1 && names.size === 1) return "side";
|
||
if (vids.size <= 1) return "asset";
|
||
// Multiple videos visible → match each asset's color to its metadata
|
||
// polyline (when loaded) by coloring by video.
|
||
return "video";
|
||
}, [filteredAssets]);
|
||
|
||
// Video-focus filter: when the user picks a single video — either by tapping
|
||
// its metadata polyline on the map, or by leaving exactly one video checked
|
||
// in the sidebar filter — restrict the map to that video's track + OSM roads
|
||
// near it. Tap the line again (or pick more videos) to restore everything.
|
||
// Filter labels (collapsed via displayVideo — e.g. "Not available" → NA
|
||
// sentinel) → the raw `video_name` strings each label spans. Built from
|
||
// the DB-wide list of video_names (allVideoNames + metadataByVideo keys),
|
||
// not the viewport-bounded `assets`, so panning never drops focus. Used
|
||
// to resolve a user-picked filter label back to its single raw key for
|
||
// metadataByVideo lookup and any backend command that does
|
||
// `WHERE video_name = ?`. Returns null focus when the label spans more
|
||
// than one raw (ambiguous) or the chosen video isn't in either source.
|
||
const labelToRaws = useMemo(() => {
|
||
const m = new Map<string, string[]>();
|
||
const seen = new Set<string>();
|
||
const sources = [...allVideoNames, ...Object.keys(metadataByVideo)];
|
||
for (const raw of sources) {
|
||
if (seen.has(raw)) continue;
|
||
seen.add(raw);
|
||
const label = displayVideo(raw);
|
||
const arr = m.get(label);
|
||
if (arr) {
|
||
if (!arr.includes(raw)) arr.push(raw);
|
||
} else {
|
||
m.set(label, [raw]);
|
||
}
|
||
}
|
||
return m;
|
||
}, [allVideoNames, metadataByVideo]);
|
||
// Helper: resolve a user-supplied video string (could be a display label
|
||
// like the NA sentinel or a raw video_name) to a raw DB key. Returns the
|
||
// input unchanged if it already matches a raw; null when the resolution is
|
||
// ambiguous (label spans multiple raws). Centralised so every video-action
|
||
// call site routes through the same logic.
|
||
const resolveVideoToRaw = (s: string): { raw: string | null; ambiguous: boolean } => {
|
||
const t = s.trim();
|
||
if (!t) return { raw: null, ambiguous: false };
|
||
// Exact raw hit beats any label resolution — handles the case where a
|
||
// raw value happens to equal the NA sentinel string itself.
|
||
if (allVideoNames.includes(t) || metadataByVideo[t] !== undefined) {
|
||
return { raw: t, ambiguous: false };
|
||
}
|
||
const raws = labelToRaws.get(t);
|
||
if (!raws || raws.length === 0) return { raw: null, ambiguous: false };
|
||
if (raws.length === 1) return { raw: raws[0], ambiguous: false };
|
||
return { raw: null, ambiguous: true };
|
||
};
|
||
const focusedVideo = useMemo<string | null>(() => {
|
||
// selectedMetadataVideo arrives from the polyline-tap path with the raw
|
||
// key already (metadataByVideo is keyed raw), so pass through.
|
||
if (selectedMetadataVideo !== null) return selectedMetadataVideo;
|
||
if (filters.videos.size === 1) {
|
||
const label = filters.videos.values().next().value as string | undefined;
|
||
if (!label) return null;
|
||
const raws = labelToRaws.get(label);
|
||
if (raws && raws.length === 1) return raws[0];
|
||
// Multiple raw video_names collapse to the same display label
|
||
// (e.g. several NA-ish sentinels in one bucket) — focusing is
|
||
// ambiguous, so don't enter focus mode.
|
||
return null;
|
||
}
|
||
return null;
|
||
}, [selectedMetadataVideo, filters.videos, labelToRaws]);
|
||
const displayMetadataTracks = useMemo(() => {
|
||
if (focusedVideo === null) return metadataByVideo;
|
||
const t = metadataByVideo[focusedVideo];
|
||
return t ? { [focusedVideo]: t } : metadataByVideo;
|
||
}, [metadataByVideo, focusedVideo]);
|
||
const displayOsmRoads = useMemo<OsmRoadFC>(() => {
|
||
if (!osmRoads || osmRoads.features.length === 0) return osmRoads;
|
||
// Hidden roads: dropped from view in any mode. They're cleared on exit.
|
||
const dropHidden = (fc: OsmRoadFC): OsmRoadFC => {
|
||
if (hiddenRoadIds.size === 0) return fc;
|
||
return {
|
||
type: "FeatureCollection",
|
||
features: fc.features.filter((f) => !hiddenRoadIds.has(f.properties.id)),
|
||
};
|
||
};
|
||
if (focusedVideo === null) return dropHidden(osmRoads);
|
||
const track = metadataByVideo[focusedVideo];
|
||
if (!track || track.length < 2) return dropHidden(osmRoads);
|
||
// Coarse spatial hash: bucket the track into ~55m × 55m cells with one
|
||
// ring of neighbour padding, so a road vertex landing in any of those
|
||
// cells is within ~75m of some track point. This is far cheaper than
|
||
// O(roads × roadVerts × trackLen) point-to-point distance.
|
||
const cellDeg = 0.0005;
|
||
const cells = new Set<string>();
|
||
for (const [lng, lat] of track) {
|
||
if (!isFinite(lng) || !isFinite(lat)) continue;
|
||
const gx = Math.floor(lng / cellDeg);
|
||
const gy = Math.floor(lat / cellDeg);
|
||
for (let dy = -1; dy <= 1; dy++) {
|
||
for (let dx = -1; dx <= 1; dx++) {
|
||
cells.add(`${gx + dx},${gy + dy}`);
|
||
}
|
||
}
|
||
}
|
||
// Rasterize each road *segment* (not just the vertices) — a long sparse
|
||
// segment can pass through a track buffer cell without any vertex
|
||
// landing in one. We sample each segment at sub-cell intervals until any
|
||
// sample lands in a marked cell.
|
||
const features = osmRoads.features.filter((f) => {
|
||
if (hiddenRoadIds.has(f.properties.id)) return false;
|
||
const g = f.geometry as
|
||
| { type: string; coordinates: Array<[number, number]> }
|
||
| undefined;
|
||
if (!g || g.type !== "LineString" || !Array.isArray(g.coordinates))
|
||
return false;
|
||
const coords = g.coordinates;
|
||
// Quick check: any vertex inside?
|
||
for (const [lng, lat] of coords) {
|
||
if (!isFinite(lng) || !isFinite(lat)) continue;
|
||
const gx = Math.floor(lng / cellDeg);
|
||
const gy = Math.floor(lat / cellDeg);
|
||
if (cells.has(`${gx},${gy}`)) return true;
|
||
}
|
||
// Sub-sample each segment.
|
||
const stepDeg = cellDeg * 0.5;
|
||
for (let i = 1; i < coords.length; i++) {
|
||
const a = coords[i - 1];
|
||
const b = coords[i];
|
||
if (
|
||
!isFinite(a[0]) ||
|
||
!isFinite(a[1]) ||
|
||
!isFinite(b[0]) ||
|
||
!isFinite(b[1])
|
||
)
|
||
continue;
|
||
const dx = b[0] - a[0];
|
||
const dy = b[1] - a[1];
|
||
const len = Math.hypot(dx, dy);
|
||
const steps = Math.ceil(len / stepDeg);
|
||
if (steps <= 1) continue;
|
||
for (let s = 1; s < steps; s++) {
|
||
const t = s / steps;
|
||
const lng = a[0] + dx * t;
|
||
const lat = a[1] + dy * t;
|
||
const gx = Math.floor(lng / cellDeg);
|
||
const gy = Math.floor(lat / cellDeg);
|
||
if (cells.has(`${gx},${gy}`)) return true;
|
||
}
|
||
}
|
||
return false;
|
||
});
|
||
return { type: "FeatureCollection", features };
|
||
}, [osmRoads, metadataByVideo, focusedVideo, hiddenRoadIds]);
|
||
|
||
// Reset selection + hidden state whenever the focused video changes — sets
|
||
// are video-scoped, so they shouldn't leak across switches.
|
||
useEffect(() => {
|
||
setSelectedRoadIds(new Set());
|
||
setHiddenRoadIds(new Set());
|
||
}, [focusedVideo]);
|
||
|
||
// In focus mode, vertex-edit is implicit: it activates whenever exactly one
|
||
// road is multi-selected. The existing vertex-edit panel + simplify slider
|
||
// + flip/delete buttons all key off editingRoadId, so this single derivation
|
||
// gives the user inline access without a separate submode toggle.
|
||
useEffect(() => {
|
||
if (focusedVideo === null) return;
|
||
if (selectedRoadIds.size === 1) {
|
||
const id = selectedRoadIds.values().next().value as number;
|
||
setEditingRoadId(id);
|
||
} else {
|
||
setEditingRoadId(null);
|
||
}
|
||
}, [selectedRoadIds, focusedVideo]);
|
||
|
||
function gotoAdjacent(dir: -1 | 1) {
|
||
if (navigableAssets.length === 0) return;
|
||
let idx = -1;
|
||
if (selectedAssetId !== null) {
|
||
idx = navigableAssets.findIndex((a) => a.id === selectedAssetId);
|
||
}
|
||
const next =
|
||
idx === -1
|
||
? navigableAssets[0]
|
||
: navigableAssets[
|
||
(idx + dir + navigableAssets.length) % navigableAssets.length
|
||
];
|
||
setSelectedAssetId(next.id);
|
||
if (next.lat !== null && next.lng !== null) {
|
||
setViewport((v) => ({
|
||
center: [next.lng as number, next.lat as number],
|
||
zoom: Math.max(v.zoom, 16),
|
||
}));
|
||
}
|
||
setStatus(
|
||
`Selected ${next.asset_name} · ${next.row_id} (${navigableAssets.indexOf(next) + 1}/${navigableAssets.length})`,
|
||
);
|
||
}
|
||
|
||
const debounceRef = useRef<number | null>(null);
|
||
const fetchSeqRef = useRef<number>(0);
|
||
const boundsRef = useRef<BoundsBox | null>(null);
|
||
|
||
async function fetchBboxAssets(b: BoundsBox) {
|
||
const seq = ++fetchSeqRef.current;
|
||
const list = await invoke<Asset[]>("get_assets_in_bbox", {
|
||
minLat: b.south,
|
||
maxLat: b.north,
|
||
minLng: b.west,
|
||
maxLng: b.east,
|
||
includeDeleted: showDeleted || onlyDeleted,
|
||
});
|
||
if (seq === fetchSeqRef.current) {
|
||
setAssets(list);
|
||
}
|
||
return list;
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!bounds) return;
|
||
boundsRef.current = bounds;
|
||
// Skip fetch when assets are hidden — OSM edit mode hides the asset layers,
|
||
// and lasso/draw modes intercept all pointer events. Refetching would just
|
||
// burn CPU rebuilding deck layers that nobody can see or interact with.
|
||
if (osmEditMode || lassoMode || drawRoadMode) return;
|
||
if (debounceRef.current !== null) {
|
||
window.clearTimeout(debounceRef.current);
|
||
}
|
||
debounceRef.current = window.setTimeout(() => {
|
||
fetchBboxAssets(bounds).catch((e) => setStatus(`Fetch failed: ${e}`));
|
||
}, BBOX_FETCH_DEBOUNCE_MS);
|
||
void showDeleted;
|
||
void onlyDeleted;
|
||
return () => {
|
||
if (debounceRef.current !== null) {
|
||
window.clearTimeout(debounceRef.current);
|
||
debounceRef.current = null;
|
||
}
|
||
};
|
||
}, [bounds, showDeleted, onlyDeleted, osmEditMode, lassoMode, drawRoadMode]);
|
||
|
||
async function handlePositionChange(
|
||
id: number,
|
||
vertex: Vertex,
|
||
lat: number,
|
||
lng: number,
|
||
) {
|
||
try {
|
||
await invoke("update_asset_position", { id, vertex, lat, lng });
|
||
setStatus(`Moved ${vertex} to ${lat.toFixed(6)}, ${lng.toFixed(6)}`);
|
||
showToast(`Moved ${vertex} point`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Move failed: ${e}`);
|
||
showToast(`Move failed`);
|
||
}
|
||
}
|
||
|
||
function defaultVertex(a: Asset): Vertex {
|
||
return a.asset_type === "fixed" ? "fixed" : "mid";
|
||
}
|
||
|
||
async function handlePlaceAt(lat: number, lng: number) {
|
||
if (!selectedAsset) return;
|
||
setPlaceMode(false);
|
||
await handlePositionChange(
|
||
selectedAsset.id,
|
||
defaultVertex(selectedAsset),
|
||
lat,
|
||
lng,
|
||
);
|
||
}
|
||
|
||
// ESC: deselect editing road (or cancel a draw-in-progress).
|
||
useEffect(() => {
|
||
const handler = (e: KeyboardEvent) => {
|
||
// Vertex delete wins over bulk-hide whenever the user has marked
|
||
// vertices on an actively-edited road. Without this order, Del in
|
||
// focus + vertex-edit submode would hide the whole road instead of
|
||
// dropping the marked vertices.
|
||
if (
|
||
(e.key === "Delete" || e.key === "Backspace") &&
|
||
osmEditMode &&
|
||
editingRoadId !== null &&
|
||
markedVertices.size > 0
|
||
) {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
e.preventDefault();
|
||
const idx = Array.from(markedVertices);
|
||
const roadId = editingRoadId;
|
||
snapshotRoadsForUndo([roadId], "delete vertices")
|
||
.then(() =>
|
||
invoke<number>("delete_road_vertices", { id: roadId, indices: idx }),
|
||
)
|
||
.then((nn) => {
|
||
setStatus(`Removed ${nn} vertex(s) from road #${roadId}`);
|
||
setMarkedVertices(new Set());
|
||
return refreshOsmRoads();
|
||
})
|
||
.catch((err) => setStatus(`Vertex delete failed: ${err}`));
|
||
return;
|
||
}
|
||
// Bulk action on selected roads in OSM mode (not in vertex-edit submode):
|
||
// focusedVideo != null → hide (non-destructive, video-scoped)
|
||
// focusedVideo == null → real DB delete with snapshot-based undo
|
||
if (
|
||
(e.key === "Delete" || e.key === "Backspace") &&
|
||
osmEditMode &&
|
||
editingRoadId === null &&
|
||
selectedRoadIds.size > 0
|
||
) {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
e.preventDefault();
|
||
const ids = Array.from(selectedRoadIds);
|
||
if (focusedVideo !== null) {
|
||
setHiddenRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const id of ids) next.add(id);
|
||
return next;
|
||
});
|
||
setSelectedRoadIds(new Set());
|
||
pushOsmUndo({ kind: "unhide", ids, label: "hide selected" });
|
||
setStatus(`${ids.length} road(s) hidden.`);
|
||
return;
|
||
}
|
||
// Global OSM mode: snapshot, delete each id, then refresh. Undo via
|
||
// the existing restore-roads upsert path resurrects them.
|
||
(async () => {
|
||
try {
|
||
await snapshotRoadsForUndo(ids, "delete selected roads");
|
||
for (const id of ids) {
|
||
await invoke("delete_osm_road", { id });
|
||
}
|
||
setSelectedRoadIds(new Set());
|
||
if (editingRoadId !== null && ids.includes(editingRoadId)) {
|
||
setEditingRoadId(null);
|
||
}
|
||
setMarkedVertices(new Set());
|
||
await refreshOsmRoads();
|
||
setStatus(`${ids.length} road(s) deleted. Use Undo to bring them back.`);
|
||
} catch (err) {
|
||
setStatus(`Bulk delete failed: ${err}`);
|
||
}
|
||
})();
|
||
return;
|
||
}
|
||
if ((e.key === "Delete" || e.key === "Backspace") && selectedLink) {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
e.preventDefault();
|
||
const [idA, idB] = selectedLink;
|
||
setSelectedLink(null);
|
||
invoke("clear_link", { id: idA })
|
||
.then(() => setStatus(`Unlinked #${idA} ↔ #${idB}`))
|
||
.then(refreshAfterMutation)
|
||
.catch((err) => setStatus(`Unlink failed: ${err}`));
|
||
return;
|
||
}
|
||
// 'O' / 'o' toggles OSM edit mode. Ignored while typing in inputs.
|
||
if (e.key === "o" || e.key === "O") {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
e.preventDefault();
|
||
toggleOsmEditModeRef.current();
|
||
return;
|
||
}
|
||
// 'R' / 'r' opens the rename modal for the currently selected asset.
|
||
// Input-guard pattern matches the other shortcuts.
|
||
if (e.key === "r" || e.key === "R") {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
if (!selectedAsset) return;
|
||
e.preventDefault();
|
||
setRenameOpen({
|
||
ids: [selectedAsset.id],
|
||
current: selectedAsset.asset_name ?? "",
|
||
});
|
||
setRenameInput(selectedAsset.asset_name ?? "");
|
||
return;
|
||
}
|
||
// Delete / Backspace: when an asset (or multi-selection) is active and
|
||
// we're not in any edit mode that already claims those keys (OSM
|
||
// vertex/road delete, link deletion handled above), delete and toast.
|
||
// Multi-selection (Ctrl/Cmd+click) wins over single-select so a stray
|
||
// single-selected asset isn't accidentally deleted alone.
|
||
if (
|
||
(e.key === "Delete" || e.key === "Backspace") &&
|
||
(multiSelectedIds.size > 0 || selectedAsset) &&
|
||
!osmEditMode &&
|
||
!selectedLink
|
||
) {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
e.preventDefault();
|
||
if (multiSelectedIds.size > 0) {
|
||
const ids = Array.from(multiSelectedIds);
|
||
(async () => {
|
||
try {
|
||
await invoke<number>("delete_assets_bulk", { ids });
|
||
setMultiSelectedIds(new Set());
|
||
const deletedSet = new Set(ids);
|
||
setAssets((prev) =>
|
||
prev.map((a) =>
|
||
deletedSet.has(a.id) ? { ...a, deleted: 1 } : a,
|
||
),
|
||
);
|
||
if (selectedAssetId !== null && deletedSet.has(selectedAssetId)) {
|
||
setSelectedAssetId(null);
|
||
}
|
||
showToast(`Deleted ${ids.length}`);
|
||
void Promise.all([
|
||
refreshActions().catch(() => {}),
|
||
refreshDataCounts().catch(() => {}),
|
||
]);
|
||
} catch (err) {
|
||
showToast(`Delete failed: ${err}`);
|
||
}
|
||
})();
|
||
return;
|
||
}
|
||
if (!selectedAsset) return;
|
||
const label = `${selectedAsset.asset_name} · ${selectedAsset.row_id}`;
|
||
(async () => {
|
||
try {
|
||
await invoke("delete_asset", { id: selectedAsset.id });
|
||
setSelectedAssetId(null);
|
||
// Surgical local update — drop the row instead of refetching
|
||
// everything, so the rest of the UI stays put.
|
||
const deletedId = selectedAsset.id;
|
||
setAssets((prev) =>
|
||
prev.map((a) =>
|
||
a.id === deletedId ? { ...a, deleted: 1 } : a,
|
||
),
|
||
);
|
||
showToast(`Deleted ${label}`);
|
||
void Promise.all([
|
||
refreshActions().catch(() => {}),
|
||
refreshDataCounts().catch(() => {}),
|
||
]);
|
||
} catch (err) {
|
||
showToast(`Delete failed: ${err}`);
|
||
}
|
||
})();
|
||
return;
|
||
}
|
||
// 'B' / 'b' toggles bbox editing. No-op when popups are disabled.
|
||
if (e.key === "b" || e.key === "B") {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
e.preventDefault();
|
||
if (!popupEnabled) {
|
||
setStatus("Enable image popup first to use BBox mode.");
|
||
return;
|
||
}
|
||
setBboxMode((v) => !v);
|
||
return;
|
||
}
|
||
// 'H' / 'h' toggles the asset image popup. Ctrl/Cmd+H is intentionally
|
||
// allowed (and preventDefault'd) so the user can hide the popup while
|
||
// multi-selecting — they're already holding Ctrl to extend the
|
||
// selection. Alt+H stays browser/menu-bound (no preventDefault).
|
||
if (e.key === "h" || e.key === "H") {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
if (e.altKey) return;
|
||
e.preventDefault();
|
||
setPopupEnabled((v) => !v);
|
||
return;
|
||
}
|
||
// 'C' / 'c': fit to focused video (focus mode) or all data (global).
|
||
if (e.key === "c" || e.key === "C") {
|
||
const target = e.target as HTMLElement | null;
|
||
const tag = target?.tagName;
|
||
if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
|
||
return;
|
||
}
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
e.preventDefault();
|
||
fitToFocusOrAllRef.current();
|
||
return;
|
||
}
|
||
if (e.key !== "Escape") return;
|
||
if (lensActive) {
|
||
e.preventDefault();
|
||
setLensActive(false);
|
||
setCursorWorld(null);
|
||
setCursorScreen(null);
|
||
return;
|
||
}
|
||
if (lassoMode) {
|
||
e.preventDefault();
|
||
setLassoMode(false);
|
||
setLassoSelected(null);
|
||
setLassoPolygonPoints(null);
|
||
setStatus("Lasso cancelled.");
|
||
return;
|
||
}
|
||
if (selectedMetadataVideo !== null) {
|
||
e.preventDefault();
|
||
setSelectedMetadataVideo(null);
|
||
setStatus("");
|
||
return;
|
||
}
|
||
if (gotoPin !== null) {
|
||
e.preventDefault();
|
||
setGotoPin(null);
|
||
setStatus("");
|
||
return;
|
||
}
|
||
if (linkPickMode) {
|
||
e.preventDefault();
|
||
setLinkPickMode(false);
|
||
} else if (rightClickFirstId !== null) {
|
||
e.preventDefault();
|
||
setRightClickFirstId(null);
|
||
setStatus("Pair link cancelled.");
|
||
} else if (drawRoadMode) {
|
||
e.preventDefault();
|
||
cancelDrawRoad();
|
||
} else if (editingRoadId !== null) {
|
||
e.preventDefault();
|
||
setEditingRoadId(null);
|
||
setStatus("Cleared road selection.");
|
||
}
|
||
};
|
||
window.addEventListener("keydown", handler);
|
||
return () => window.removeEventListener("keydown", handler);
|
||
}, [drawRoadMode, editingRoadId, linkPickMode, rightClickFirstId, lassoMode, selectedLink, selectedMetadataVideo, gotoPin, osmEditMode, markedVertices, focusedVideo, selectedRoadIds, lensActive, selectedAsset, selectedAssetId, popupEnabled, multiSelectedIds]);
|
||
|
||
// Image prefetch: when an asset is selected, warm the browser cache for its
|
||
// immediate neighbours so [/] navigation feels instant.
|
||
useEffect(() => {
|
||
if (!selectedAsset) return;
|
||
const idx = navigableAssets.findIndex((a) => a.id === selectedAsset.id);
|
||
if (idx === -1) return;
|
||
const targets = [
|
||
navigableAssets[idx - 1],
|
||
navigableAssets[idx + 1],
|
||
navigableAssets[idx + 2],
|
||
navigableAssets[idx - 2],
|
||
].filter(Boolean);
|
||
const handles: HTMLImageElement[] = [];
|
||
for (const a of targets) {
|
||
const urls = [
|
||
a.image_path,
|
||
a.image_path1,
|
||
a.image_path2,
|
||
a.image_path3,
|
||
].filter((u): u is string => !!u);
|
||
for (const u of urls) {
|
||
const i = new Image();
|
||
i.decoding = "async";
|
||
i.src = u; // bypass resolveImageSrc — http(s) URLs go direct anyway
|
||
handles.push(i);
|
||
}
|
||
}
|
||
return () => {
|
||
// Allow GC; aborting in-flight image fetches is best-effort.
|
||
for (const i of handles) {
|
||
i.src = "";
|
||
}
|
||
};
|
||
}, [selectedAsset, navigableAssets]);
|
||
|
||
// Global prev/next navigation: `[` and `]` cycle through filtered assets.
|
||
useEffect(() => {
|
||
const handler = (e: KeyboardEvent) => {
|
||
if (
|
||
e.target instanceof HTMLInputElement ||
|
||
e.target instanceof HTMLTextAreaElement ||
|
||
e.target instanceof HTMLSelectElement
|
||
) {
|
||
return;
|
||
}
|
||
if (e.key === "]" || e.key === "}") {
|
||
e.preventDefault();
|
||
gotoAdjacent(1);
|
||
} else if (e.key === "[" || e.key === "{") {
|
||
e.preventDefault();
|
||
gotoAdjacent(-1);
|
||
}
|
||
};
|
||
window.addEventListener("keydown", handler);
|
||
return () => window.removeEventListener("keydown", handler);
|
||
}, [navigableAssets, selectedAssetId]);
|
||
|
||
// Keyboard arrow nudge for the selected asset (mid for range, fixed for fixed).
|
||
useEffect(() => {
|
||
if (!selectedAsset) return;
|
||
const a = selectedAsset;
|
||
const handler = (e: KeyboardEvent) => {
|
||
if (
|
||
e.target instanceof HTMLInputElement ||
|
||
e.target instanceof HTMLTextAreaElement ||
|
||
e.target instanceof HTMLSelectElement
|
||
) {
|
||
return;
|
||
}
|
||
const arrows: Record<string, [number, number]> = {
|
||
ArrowUp: [1, 0],
|
||
ArrowDown: [-1, 0],
|
||
ArrowLeft: [0, -1],
|
||
ArrowRight: [0, 1],
|
||
};
|
||
const dir = arrows[e.key];
|
||
if (!dir) return;
|
||
const baseLat =
|
||
(a.asset_type === "fixed" ? a.lat : a.lat) ?? viewport.center[1];
|
||
const baseLng =
|
||
(a.asset_type === "fixed" ? a.lng : a.lng) ?? viewport.center[0];
|
||
if (baseLat === null || baseLng === null) return;
|
||
e.preventDefault();
|
||
const dLat = (dir[0] * NUDGE_METERS) / 111320;
|
||
const dLng =
|
||
(dir[1] * NUDGE_METERS) /
|
||
(111320 * Math.cos((baseLat * Math.PI) / 180));
|
||
handlePositionChange(
|
||
a.id,
|
||
defaultVertex(a),
|
||
(baseLat as number) + dLat,
|
||
(baseLng as number) + dLng,
|
||
).catch(() => {});
|
||
};
|
||
window.addEventListener("keydown", handler);
|
||
return () => window.removeEventListener("keydown", handler);
|
||
}, [selectedAsset, viewport.center]);
|
||
|
||
// Set an asset's side. Used both by the popup flip button and the auto-flip
|
||
// from bbox editing (when the bbox center is in the left vs right half of
|
||
// the image). Updates the local assets array in place so the popup tag
|
||
// and any downstream UI refresh without a full re-fetch.
|
||
async function handleSideChange(assetId: number, side: "Left" | "Right") {
|
||
const cur = assets.find((a) => a.id === assetId);
|
||
if (cur && cur.side === side) return;
|
||
try {
|
||
await invoke<number>("change_assets_side", {
|
||
ids: [assetId],
|
||
side,
|
||
});
|
||
setAssets((prev) =>
|
||
prev.map((a) => (a.id === assetId ? { ...a, side } : a)),
|
||
);
|
||
showToast(`Side → ${side}`);
|
||
} catch (e) {
|
||
showToast(`Side change failed: ${e}`);
|
||
}
|
||
}
|
||
|
||
async function handleDeleteSelected() {
|
||
if (!selectedAsset) return;
|
||
const label = `${selectedAsset.asset_name} · ${selectedAsset.row_id}`;
|
||
try {
|
||
await invoke("delete_asset", { id: selectedAsset.id });
|
||
setStatus(`Deleted ${label}`);
|
||
showToast(`Deleted ${label}`);
|
||
setSelectedAssetId(null);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Delete failed: ${e}`);
|
||
showToast(`Delete failed: ${e}`);
|
||
}
|
||
}
|
||
|
||
async function handleBulkDeleteByVideo() {
|
||
const typed = bulkVideoName.trim();
|
||
if (!typed) {
|
||
setStatus("Enter a video name first.");
|
||
return;
|
||
}
|
||
const r = resolveVideoToRaw(typed);
|
||
if (r.ambiguous) {
|
||
setStatus(
|
||
`"${typed}" matches multiple raw video names — pick a specific one from the suggestions.`,
|
||
);
|
||
return;
|
||
}
|
||
if (!r.raw) {
|
||
setStatus(`No video matches "${typed}".`);
|
||
return;
|
||
}
|
||
const name = r.raw;
|
||
try {
|
||
const count = await invoke<number>("delete_assets_by_video", {
|
||
videoName: name,
|
||
});
|
||
if (count === 0) {
|
||
setStatus(`No live assets matched video "${name}"`);
|
||
showToast(`No matches for "${name}"`);
|
||
} else {
|
||
setStatus(`Deleted ${count} assets from video "${name}"`);
|
||
showToast(`Deleted ${count} assets in "${name}"`);
|
||
setBulkVideoName("");
|
||
}
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Bulk delete failed: ${e}`);
|
||
showToast(`Bulk delete failed`);
|
||
}
|
||
}
|
||
|
||
async function handleSetImageFolder() {
|
||
if (busy) return;
|
||
try {
|
||
const picked = await open({ directory: true, multiple: false });
|
||
if (typeof picked !== "string") return;
|
||
setImageFolder(picked);
|
||
window.localStorage.setItem(IMAGE_FOLDER_KEY, picked);
|
||
setStatus(`Image folder: ${picked}`);
|
||
} catch (e) {
|
||
setStatus(`Folder pick failed: ${e}`);
|
||
}
|
||
}
|
||
|
||
function handleClearImageFolder() {
|
||
setImageFolder(null);
|
||
window.localStorage.removeItem(IMAGE_FOLDER_KEY);
|
||
setStatus("Cleared image folder; using image_path as-is.");
|
||
}
|
||
|
||
async function handleResetDatabase() {
|
||
if (busy) return;
|
||
const ok = window.confirm(
|
||
"Wipe ALL assets, scope polygons, OSM roads, per-video metadata, and action history?\n\nThis cannot be undone.",
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
await invoke("reset_database");
|
||
setAssets([]);
|
||
setScopePolygons([]);
|
||
setOsmRoads({ type: "FeatureCollection", features: [] });
|
||
setMetadataByVideo({});
|
||
setMetadataTrack([]);
|
||
setSelectedMetadataVideo(null);
|
||
setRecentActions([]);
|
||
setSelectedAssetId(null);
|
||
setMergePrimary(null);
|
||
setMergeSecondary(null);
|
||
setSelectedRoadIds(new Set());
|
||
setHiddenRoadIds(new Set());
|
||
setEditingRoadId(null);
|
||
setOsmUndoStack([]);
|
||
setQualityReport(null);
|
||
setSnapQualityToast(null);
|
||
await Promise.all([
|
||
refreshDataCounts().catch(() => {}),
|
||
refreshVideoNames().catch(() => {}),
|
||
refreshVideoEntries().catch(() => {}),
|
||
refreshAssetNames().catch(() => {}),
|
||
]);
|
||
setStatus("Database reset.");
|
||
showToast("Database reset");
|
||
} catch (e) {
|
||
setStatus(`Reset failed: ${e}`);
|
||
showToast(`Reset failed`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleUndo(actionId: number) {
|
||
try {
|
||
await invoke("undo_action", { actionId });
|
||
setStatus(`Undone action #${actionId}`);
|
||
showToast(`Undone #${actionId}`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Undo failed: ${e}`);
|
||
showToast(`Undo failed`);
|
||
}
|
||
}
|
||
|
||
async function handleRedo(actionId: number) {
|
||
try {
|
||
await invoke("redo_action", { actionId });
|
||
setStatus(`Redone action #${actionId}`);
|
||
showToast(`Redone #${actionId}`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Redo failed: ${e}`);
|
||
showToast(`Redo failed`);
|
||
}
|
||
}
|
||
|
||
function pickMergeSlot(slot: "primary" | "secondary") {
|
||
if (!selectedAsset) {
|
||
setStatus("Select a range asset first.");
|
||
return;
|
||
}
|
||
if (selectedAsset.asset_type !== "range") {
|
||
setStatus("Merge only works on range assets.");
|
||
return;
|
||
}
|
||
if (slot === "primary") setMergePrimary(selectedAsset);
|
||
else setMergeSecondary(selectedAsset);
|
||
}
|
||
|
||
async function handleMerge() {
|
||
if (!mergePrimary || !mergeSecondary) return;
|
||
if (mergePrimary.id === mergeSecondary.id) {
|
||
setStatus("Primary and secondary must differ.");
|
||
return;
|
||
}
|
||
try {
|
||
await invoke("merge_polylines", {
|
||
primaryId: mergePrimary.id,
|
||
secondaryId: mergeSecondary.id,
|
||
});
|
||
setStatus(
|
||
`Merged ${mergeSecondary.row_id} into ${mergePrimary.row_id}`,
|
||
);
|
||
showToast(
|
||
`Merged ${mergeSecondary.row_id} → ${mergePrimary.row_id}`,
|
||
);
|
||
setMergePrimary(null);
|
||
setMergeSecondary(null);
|
||
setSelectedAssetId(null);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Merge failed: ${e}`);
|
||
showToast(`Merge failed`);
|
||
}
|
||
}
|
||
|
||
function formatAction(a: ActionRow): string {
|
||
let count = 1;
|
||
try {
|
||
count = (JSON.parse(a.asset_ids) as number[]).length;
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
switch (a.action_type) {
|
||
case "move":
|
||
return `Moved asset (${count})`;
|
||
case "delete":
|
||
return `Deleted asset (${count})`;
|
||
case "delete_by_video":
|
||
return `Deleted ${count} assets by video`;
|
||
case "merge":
|
||
return `Merged ${count} polylines`;
|
||
case "bulk_snap":
|
||
return `Bulk-snapped ${count} to road`;
|
||
case "set_scope":
|
||
return `Set scope on ${count}`;
|
||
case "rename":
|
||
return `Renamed ${count}`;
|
||
case "change_side":
|
||
return `Side change on ${count}`;
|
||
case "link":
|
||
return a.scope === "single" ? `Link change` : `Auto-linked ${count}`;
|
||
case "restore":
|
||
return `Restored ${count}`;
|
||
case "reset_position":
|
||
return `Reset ${count} to original`;
|
||
case "bulk_translate":
|
||
return `Distributed correction across ${count}`;
|
||
default:
|
||
return `${a.action_type} (${count})`;
|
||
}
|
||
}
|
||
|
||
async function refreshScopePolygons() {
|
||
const list = await invoke<ScopePolygon[]>("get_scope_polygons");
|
||
setScopePolygons(list);
|
||
return list;
|
||
}
|
||
|
||
async function refreshOsmRoads() {
|
||
const list = await invoke<
|
||
Array<{
|
||
id: number;
|
||
name: string | null;
|
||
geojson: string;
|
||
snap_ignored?: boolean;
|
||
modified?: boolean;
|
||
}>
|
||
>("get_osm_roads");
|
||
let mnLat = Infinity;
|
||
let mxLat = -Infinity;
|
||
let mnLng = Infinity;
|
||
let mxLng = -Infinity;
|
||
const features = list.map((r) => {
|
||
const geom = JSON.parse(r.geojson) as {
|
||
type: string;
|
||
coordinates: Array<[number, number]>;
|
||
};
|
||
if (geom.type === "LineString" && Array.isArray(geom.coordinates)) {
|
||
for (const c of geom.coordinates) {
|
||
const lng = c[0];
|
||
const lat = c[1];
|
||
if (
|
||
typeof lat === "number" &&
|
||
typeof lng === "number" &&
|
||
isFinite(lat) &&
|
||
isFinite(lng)
|
||
) {
|
||
if (lat < mnLat) mnLat = lat;
|
||
if (lat > mxLat) mxLat = lat;
|
||
if (lng < mnLng) mnLng = lng;
|
||
if (lng > mxLng) mxLng = lng;
|
||
}
|
||
}
|
||
}
|
||
return {
|
||
type: "Feature" as const,
|
||
geometry: geom,
|
||
properties: {
|
||
id: r.id,
|
||
name: r.name,
|
||
snap_ignored: r.snap_ignored === true,
|
||
modified: r.modified === true,
|
||
},
|
||
};
|
||
});
|
||
setOsmRoads({ type: "FeatureCollection", features });
|
||
const bounds = Number.isFinite(mnLat)
|
||
? { minLat: mnLat, maxLat: mxLat, minLng: mnLng, maxLng: mxLng }
|
||
: null;
|
||
return { list, bounds };
|
||
}
|
||
|
||
async function refreshAssetNames() {
|
||
try {
|
||
const list = await invoke<string[]>("list_asset_names");
|
||
setAllAssetNames(list);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
|
||
// Annotated video list from the backend: raw names, deterministic numbers
|
||
// (timestamp + name sort), and completion flags shared across clients.
|
||
type VideoEntry = {
|
||
video_name: string;
|
||
video_number: number;
|
||
completed: boolean;
|
||
completed_at: string | null;
|
||
completed_by: string | null;
|
||
};
|
||
const [videoEntries, setVideoEntries] = useState<VideoEntry[]>([]);
|
||
const [completedVideosExpanded, setCompletedVideosExpanded] =
|
||
useState<boolean>(false);
|
||
async function refreshVideoEntries() {
|
||
try {
|
||
const list = await invoke<VideoEntry[]>("list_videos");
|
||
setVideoEntries(list);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
|
||
async function refreshVideoNames() {
|
||
try {
|
||
const raw = await invoke<string[]>("list_video_names");
|
||
const list = Array.from(new Set(raw.map(displayVideo))).sort();
|
||
// Auto-include only videos we haven't seen before, so user de-selections
|
||
// survive every mutation refresh.
|
||
setFilters((f) => {
|
||
const previouslyKnown = new Set(allVideoNames);
|
||
const next = new Set(f.videos);
|
||
if (allVideoNames.length === 0) {
|
||
// First run: include everything.
|
||
for (const v of list) next.add(v);
|
||
} else {
|
||
// Subsequent runs: only auto-include genuinely new entries.
|
||
for (const v of list) {
|
||
if (!previouslyKnown.has(v)) next.add(v);
|
||
}
|
||
}
|
||
return { ...f, videos: next };
|
||
});
|
||
setAllVideoNames(list);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
|
||
async function refreshClasses() {
|
||
try {
|
||
const list = await invoke<string[]>("list_classes");
|
||
setClassNames(list);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
|
||
async function refreshActions() {
|
||
const list = await invoke<ActionRow[]>("list_recent_actions", { limit: 10 });
|
||
setRecentActions(list);
|
||
return list;
|
||
}
|
||
|
||
async function refreshAfterMutation() {
|
||
const tasks: Promise<unknown>[] = [
|
||
refreshActions(),
|
||
refreshAssetNames(),
|
||
refreshVideoNames(),
|
||
refreshVideoEntries(),
|
||
refreshClasses(),
|
||
refreshDataCounts(),
|
||
];
|
||
if (boundsRef.current) tasks.push(fetchBboxAssets(boundsRef.current));
|
||
await Promise.all(tasks);
|
||
}
|
||
|
||
// Fly the map to a specific video (uses any combination of metadata polyline
|
||
// + asset bboxes, whichever exists).
|
||
// Fit the map to either the focused video or every loaded asset+track. The
|
||
// C shortcut and the on-map "Fit" button both call this. Held in a ref so
|
||
// the keydown handler always sees the current closure.
|
||
function fitToFocusOrAll() {
|
||
if (focusedVideo !== null) {
|
||
flyToVideo(focusedVideo);
|
||
return;
|
||
}
|
||
let mnLat = Infinity,
|
||
mxLat = -Infinity,
|
||
mnLng = Infinity,
|
||
mxLng = -Infinity;
|
||
for (const a of assets) {
|
||
if (a.deleted !== 0) continue;
|
||
const lats = [a.lat, a.start_lat, a.end_lat].filter(
|
||
(v): v is number => v !== null,
|
||
);
|
||
const lngs = [a.lng, a.start_lng, a.end_lng].filter(
|
||
(v): v is number => v !== null,
|
||
);
|
||
for (const v of lats) {
|
||
if (v < mnLat) mnLat = v;
|
||
if (v > mxLat) mxLat = v;
|
||
}
|
||
for (const v of lngs) {
|
||
if (v < mnLng) mnLng = v;
|
||
if (v > mxLng) mxLng = v;
|
||
}
|
||
}
|
||
for (const track of Object.values(metadataByVideo)) {
|
||
for (const [lng, lat] of track) {
|
||
if (lng < mnLng) mnLng = lng;
|
||
if (lng > mxLng) mxLng = lng;
|
||
if (lat < mnLat) mnLat = lat;
|
||
if (lat > mxLat) mxLat = lat;
|
||
}
|
||
}
|
||
if (!Number.isFinite(mnLat)) {
|
||
setStatus("No data loaded to fit.");
|
||
return;
|
||
}
|
||
setViewport({
|
||
center: [(mnLng + mxLng) / 2, (mnLat + mxLat) / 2],
|
||
zoom: 13,
|
||
});
|
||
setStatus("Fit to all data.");
|
||
}
|
||
const fitToFocusOrAllRef = useRef(fitToFocusOrAll);
|
||
fitToFocusOrAllRef.current = fitToFocusOrAll;
|
||
|
||
function flyToVideo(name: string) {
|
||
let mnLat = Infinity,
|
||
mxLat = -Infinity,
|
||
mnLng = Infinity,
|
||
mxLng = -Infinity;
|
||
const track = metadataByVideo[name];
|
||
if (track && track.length > 0) {
|
||
for (const [lng, lat] of track) {
|
||
if (lng < mnLng) mnLng = lng;
|
||
if (lng > mxLng) mxLng = lng;
|
||
if (lat < mnLat) mnLat = lat;
|
||
if (lat > mxLat) mxLat = lat;
|
||
}
|
||
}
|
||
for (const a of assets) {
|
||
if (a.deleted !== 0) continue;
|
||
if (displayVideo(a.video_name) !== name) continue;
|
||
const lats = [a.lat, a.start_lat, a.end_lat].filter(
|
||
(v): v is number => v !== null,
|
||
);
|
||
const lngs = [a.lng, a.start_lng, a.end_lng].filter(
|
||
(v): v is number => v !== null,
|
||
);
|
||
for (const v of lats) {
|
||
if (v < mnLat) mnLat = v;
|
||
if (v > mxLat) mxLat = v;
|
||
}
|
||
for (const v of lngs) {
|
||
if (v < mnLng) mnLng = v;
|
||
if (v > mxLng) mxLng = v;
|
||
}
|
||
}
|
||
if (!Number.isFinite(mnLat)) {
|
||
setStatus(`No location for "${name}" (load metadata or assets first).`);
|
||
return;
|
||
}
|
||
setViewport({
|
||
center: [(mnLng + mxLng) / 2, (mnLat + mxLat) / 2],
|
||
zoom: 14,
|
||
});
|
||
// If the video has a metadata track, select it so the user sees direction
|
||
// arrows + S/E markers + name badge — same effect as tapping the line.
|
||
if (metadataByVideo[name]) {
|
||
setSelectedMetadataVideo(name);
|
||
}
|
||
setStatus(name);
|
||
}
|
||
|
||
function handleGoto() {
|
||
const q = gotoQuery.trim();
|
||
if (q === "") return;
|
||
// Try lat,lng first.
|
||
const m = q.match(/^\s*(-?\d+(?:\.\d+)?)\s*[, ]\s*(-?\d+(?:\.\d+)?)\s*$/);
|
||
if (m) {
|
||
const lat = parseFloat(m[1]);
|
||
const lng = parseFloat(m[2]);
|
||
if (
|
||
Number.isFinite(lat) &&
|
||
Number.isFinite(lng) &&
|
||
lat >= -90 &&
|
||
lat <= 90 &&
|
||
lng >= -180 &&
|
||
lng <= 180
|
||
) {
|
||
setViewport({ center: [lng, lat], zoom: 18 });
|
||
setGotoPin({ lat, lng });
|
||
setStatus(`📍 ${lat.toFixed(6)}, ${lng.toFixed(6)}`);
|
||
return;
|
||
}
|
||
setStatus(`Out-of-range lat/lng: ${q}`);
|
||
return;
|
||
}
|
||
// Else treat as a video name — exact, then prefix, then substring (case-insensitive).
|
||
const videos = Object.keys(metadataByVideo).concat(allVideoNames);
|
||
const lower = q.toLowerCase();
|
||
const exact = videos.find((v) => v === q);
|
||
const prefix = videos.find((v) => v.toLowerCase().startsWith(lower));
|
||
const sub = videos.find((v) => v.toLowerCase().includes(lower));
|
||
const hit = exact ?? prefix ?? sub;
|
||
if (hit) {
|
||
flyToVideo(hit);
|
||
return;
|
||
}
|
||
setStatus(
|
||
`No match for "${q}". Use "lat,lng" (e.g. 17.398, 78.347) or a video name.`,
|
||
);
|
||
}
|
||
|
||
async function refreshDataCounts() {
|
||
try {
|
||
const c = await invoke<{
|
||
fixed_assets: number;
|
||
range_assets: number;
|
||
osm_roads: number;
|
||
scope_features: number;
|
||
video_metadata: number;
|
||
}>("data_source_counts");
|
||
setDataCounts(c);
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
refreshScopePolygons().catch((e) =>
|
||
setStatus(`Scope load failed: ${e}`),
|
||
);
|
||
// Surface OSM load failures — silent catch made startup look fine
|
||
// even when the roads table couldn't be read.
|
||
refreshOsmRoads().catch((e) =>
|
||
setStatus(`OSM roads load failed: ${e}`),
|
||
);
|
||
refreshActions().catch(() => {});
|
||
refreshAssetNames().catch(() => {});
|
||
refreshVideoNames().catch(() => {});
|
||
refreshVideoEntries().catch(() => {});
|
||
refreshClasses().catch(() => {});
|
||
refreshDataCounts().catch(() => {});
|
||
// Per-video metadata persists in DB; load it so users don't have to
|
||
// re-pick the JSON every session.
|
||
invoke<Record<string, Array<[number, number]>>>("get_video_metadata")
|
||
.then((map) => {
|
||
const keys = Object.keys(map);
|
||
if (keys.length === 0) return;
|
||
setMetadataByVideo(map);
|
||
const flat: Array<[number, number]> = [];
|
||
for (const k of keys) flat.push(...map[k]);
|
||
setMetadataTrack(flat);
|
||
})
|
||
.catch(() => {});
|
||
invoke<Asset[]>("list_assets")
|
||
.then((list) => {
|
||
if (list.length > 0) {
|
||
setStatus(`${list.length} assets in DB`);
|
||
const first = list.find((a) => a.lat !== null && a.lng !== null);
|
||
if (first) {
|
||
setViewport({
|
||
center: [first.lng as number, first.lat as number],
|
||
zoom: 13,
|
||
});
|
||
}
|
||
}
|
||
})
|
||
.catch((e) => setStatus(`Load failed: ${e}`));
|
||
}, []);
|
||
|
||
function toggleOsmEditMode() {
|
||
if (osmEditMode) {
|
||
// Exit: restore previous layer visibility.
|
||
if (savedVisRef.current) {
|
||
setLayerVisibility(savedVisRef.current);
|
||
savedVisRef.current = null;
|
||
}
|
||
setEditingRoadId(null);
|
||
setDrawRoadMode(false);
|
||
setDrawRoadCoords([]);
|
||
setOsmEditMode(false);
|
||
setStatus("Exited OSM edit mode.");
|
||
} else {
|
||
// Enter: snapshot visibility and hide non-OSM layers.
|
||
savedVisRef.current = layerVisibility;
|
||
setLayerVisibility({
|
||
scope: false,
|
||
metadata: false,
|
||
osm: true,
|
||
fixed: false,
|
||
range: false,
|
||
});
|
||
setSelectedAssetId(null);
|
||
setOsmEditMode(true);
|
||
setStatus("OSM edit mode: click a road to edit its vertices.");
|
||
}
|
||
}
|
||
// Ref so the keyboard handler always sees the latest closure (otherwise
|
||
// toggling via 'O' would capture stale layerVisibility / osmEditMode from
|
||
// whichever render the keydown effect last re-ran on).
|
||
const toggleOsmEditModeRef = useRef(toggleOsmEditMode);
|
||
toggleOsmEditModeRef.current = toggleOsmEditMode;
|
||
|
||
function startDrawRoad() {
|
||
setDrawRoadCoords([]);
|
||
setDrawRoadMode(true);
|
||
setEditingRoadId(null);
|
||
setStatus("Click on the map to add vertices. Finish to save.");
|
||
}
|
||
|
||
function cancelDrawRoad() {
|
||
setDrawRoadMode(false);
|
||
setDrawRoadCoords([]);
|
||
setStatus("Cancelled new road.");
|
||
}
|
||
|
||
function handleDrawRoadAddPoint(lat: number, lng: number) {
|
||
setDrawRoadCoords((prev) => [...prev, [lng, lat] as [number, number]]);
|
||
}
|
||
|
||
async function finishDrawRoad() {
|
||
if (drawRoadCoords.length < 2) {
|
||
setStatus("A road needs at least 2 vertices.");
|
||
return;
|
||
}
|
||
const name = window.prompt("Road name (optional):", "") || null;
|
||
try {
|
||
const newId = await invoke<number>("create_osm_road", {
|
||
name,
|
||
coords: drawRoadCoords,
|
||
});
|
||
await refreshOsmRoads();
|
||
await refreshDataCounts();
|
||
setDrawRoadMode(false);
|
||
setDrawRoadCoords([]);
|
||
setEditingRoadId(newId);
|
||
setStatus(
|
||
`Created road #${newId} with ${drawRoadCoords.length} vertices.`,
|
||
);
|
||
showToast(`Created road #${newId}`);
|
||
} catch (e) {
|
||
setStatus(`Create road failed: ${e}`);
|
||
showToast(`Create road failed`);
|
||
}
|
||
}
|
||
|
||
async function handleDeleteRoad() {
|
||
if (editingRoadId === null) return;
|
||
const ok = window.confirm(`Delete road #${editingRoadId}?`);
|
||
if (!ok) return;
|
||
const roadId = editingRoadId;
|
||
try {
|
||
await invoke("delete_osm_road", { id: roadId });
|
||
await refreshOsmRoads();
|
||
await refreshDataCounts();
|
||
setEditingRoadId(null);
|
||
setStatus(`Deleted road #${roadId}.`);
|
||
showToast(`Deleted road #${roadId}`);
|
||
} catch (e) {
|
||
setStatus(`Delete failed: ${e}`);
|
||
showToast(`Delete road failed`);
|
||
}
|
||
}
|
||
|
||
async function handleUpdateRoad(
|
||
id: number,
|
||
coords: Array<[number, number]>,
|
||
) {
|
||
try {
|
||
await snapshotRoadsForUndo([id], "vertex drag");
|
||
await invoke("update_osm_road", { id, coords });
|
||
await refreshOsmRoads();
|
||
setStatus(`Updated road #${id} (${coords.length} vertices).`);
|
||
} catch (e) {
|
||
setStatus(`Road update failed: ${e}`);
|
||
}
|
||
}
|
||
|
||
async function handleImportOsm() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking GeoJSON…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "GeoJSON", extensions: ["geojson", "json"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
const majorOnly = window.confirm(
|
||
"Import MAJOR roads only (motorway/trunk/primary/secondary/tertiary)?\n\nClick OK to filter; Cancel to import all road classes (warning: can be very slow on large GeoJSONs).",
|
||
);
|
||
const args: Record<string, unknown> = { path: picked };
|
||
if (majorOnly) {
|
||
args.highwayClasses = [
|
||
"motorway",
|
||
"motorway_link",
|
||
"trunk",
|
||
"trunk_link",
|
||
"primary",
|
||
"primary_link",
|
||
"secondary",
|
||
"secondary_link",
|
||
"tertiary",
|
||
"tertiary_link",
|
||
];
|
||
}
|
||
setStatus(`Importing OSM roads from ${picked.split(/[\\/]/).pop()}…`);
|
||
const count = await invoke<number>("import_osm_geojson", args);
|
||
const { bounds } = await refreshOsmRoads();
|
||
// Keep the sidebar Loaded-data card in sync. Without this the OSM
|
||
// count stayed at its last value, which made imports look like they
|
||
// hadn't done anything.
|
||
await refreshDataCounts();
|
||
// Auto-recentre the map on the imported road bbox. Without this, if
|
||
// the user's current viewport is far from the imported area, the
|
||
// roads render off-screen and the import looks silently broken.
|
||
if (count === 0) {
|
||
// Explicit message — silent "Loaded 0" looked like the import
|
||
// did nothing. Common cause: the major-only filter removed every
|
||
// road class in the file, or the GeoJSON had no LineStrings.
|
||
setStatus(
|
||
majorOnly
|
||
? `0 road segments matched the major-only filter. Re-import and click Cancel on the filter prompt to import all classes.`
|
||
: `0 road segments imported. Check that the GeoJSON has LineString features.`,
|
||
);
|
||
} else if (bounds) {
|
||
const center: [number, number] = [
|
||
(bounds.minLng + bounds.maxLng) / 2,
|
||
(bounds.minLat + bounds.maxLat) / 2,
|
||
];
|
||
const dLat = bounds.maxLat - bounds.minLat;
|
||
const dLng = bounds.maxLng - bounds.minLng;
|
||
const span = Math.max(dLat, dLng);
|
||
// Pick a zoom level that roughly fits the bbox in the viewport.
|
||
// Web Mercator: at z=0 the world spans 360°, so zoom for a span s
|
||
// is ~log2(360 / s) − a small margin for padding.
|
||
const zoom =
|
||
span > 0 ? Math.max(8, Math.min(17, Math.log2(360 / span) - 0.5)) : 14;
|
||
setViewport({ center, zoom });
|
||
setStatus(
|
||
`Loaded ${count} road segment(s). Centred on imported area.`,
|
||
);
|
||
} else {
|
||
setStatus(`Loaded ${count} road segment(s)`);
|
||
showToast(`Loaded ${count} road segment(s)`);
|
||
}
|
||
} catch (e) {
|
||
setStatus(`OSM import failed: ${e}`);
|
||
showToast(`OSM import failed`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function pickOsmFolder() {
|
||
const picked = await open({ directory: true, multiple: false });
|
||
if (typeof picked !== "string") return;
|
||
setOsmFolder(picked);
|
||
window.localStorage.setItem(OSM_FOLDER_KEY, picked);
|
||
setStatus(`OSM folder: ${picked}`);
|
||
}
|
||
|
||
async function ensureOsmFolder(): Promise<string | null> {
|
||
if (osmFolder) return osmFolder;
|
||
const picked = await open({ directory: true, multiple: false });
|
||
if (typeof picked !== "string") return null;
|
||
setOsmFolder(picked);
|
||
window.localStorage.setItem(OSM_FOLDER_KEY, picked);
|
||
return picked;
|
||
}
|
||
|
||
async function handleGenerateOsm() {
|
||
if (busy) return;
|
||
const folder = await ensureOsmFolder();
|
||
if (!folder) return;
|
||
const sep =
|
||
folder.endsWith("/") || folder.endsWith("\\") ? "" : "/";
|
||
const ts = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
|
||
const hasAssets = dataCounts.fixed_assets + dataCounts.range_assets > 0;
|
||
const hasMetadata = (dataCounts.video_metadata ?? 0) > 0
|
||
|| Object.keys(metadataByVideo).length > 0;
|
||
if (!hasAssets && !hasMetadata) {
|
||
setStatus(
|
||
"Import per-video metadata or assets first — the generator filters Overpass results against them.",
|
||
);
|
||
return;
|
||
}
|
||
// We need a bbox to query Overpass against. Prefer the current visible
|
||
// viewport (gives the user direct control over scope); fall back to the
|
||
// bbox of all loaded assets if the viewport isn't valid yet (e.g. user
|
||
// never panned the map). Either way the bbox is what Overpass filters
|
||
// on, and the post-filter then narrows by metadata + asset proximity.
|
||
let b = boundsRef.current;
|
||
if (!b) {
|
||
try {
|
||
const ab = await invoke<{
|
||
min_lat: number;
|
||
min_lng: number;
|
||
max_lat: number;
|
||
max_lng: number;
|
||
} | null>("assets_bbox");
|
||
if (ab) {
|
||
b = {
|
||
south: ab.min_lat,
|
||
north: ab.max_lat,
|
||
west: ab.min_lng,
|
||
east: ab.max_lng,
|
||
};
|
||
}
|
||
} catch {
|
||
/* fall through to error below */
|
||
}
|
||
}
|
||
if (!b) {
|
||
setStatus(
|
||
"No visible map bbox and no asset bbox available — pan/zoom the map or import assets first.",
|
||
);
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setOsmFetchActive(true);
|
||
try {
|
||
const sourceHint = hasMetadata && hasAssets
|
||
? "metadata + assets"
|
||
: hasMetadata
|
||
? "metadata"
|
||
: "assets";
|
||
setStatus(
|
||
`Fetching OSM for visible bbox from Overpass, then filtering by ${sourceHint}…`,
|
||
);
|
||
const path = `${folder}${sep}osm_on_asset_roads_${ts}.geojson`;
|
||
const r = await invoke<{
|
||
ways_kept: number;
|
||
source: string;
|
||
points_used: number;
|
||
videos_used: number;
|
||
}>("generate_osm_near_assets", {
|
||
minLat: b.south,
|
||
minLng: b.west,
|
||
maxLat: b.north,
|
||
maxLng: b.east,
|
||
keepThresholdM: 50,
|
||
path,
|
||
});
|
||
const refDesc =
|
||
r.videos_used > 0
|
||
? `${r.points_used} ref points (${r.videos_used} video track(s) + assets)`
|
||
: `${r.points_used} asset ref points`;
|
||
setStatus(
|
||
`Generated ${r.ways_kept} road(s) [bbox + ${r.source}, ${refDesc}] → ${path}. Use Import → OSM roads to load.`,
|
||
);
|
||
return;
|
||
} catch (e) {
|
||
setStatus(`Generate OSM failed: ${e}`);
|
||
return;
|
||
} finally {
|
||
setOsmFetchActive(false);
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleExportOsm() {
|
||
if (busy) return;
|
||
const folder = await ensureOsmFolder();
|
||
if (!folder) return;
|
||
const sep =
|
||
folder.endsWith("/") || folder.endsWith("\\") ? "" : "/";
|
||
const ts = new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
|
||
const path = `${folder}${sep}osm_export_${ts}.geojson`;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("export_osm_roads", { path });
|
||
setStatus(`Exported ${n} road(s) → ${path}`);
|
||
} catch (e) {
|
||
setStatus(`Export OSM failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function applyOsmTools() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
try {
|
||
const summary: string[] = [];
|
||
if (osmToolPrune) {
|
||
const classes = osmToolPruneClasses
|
||
.split(",")
|
||
.map((s) => s.trim())
|
||
.filter((s) => s !== "");
|
||
if (classes.length > 0) {
|
||
const n = await invoke<number>("delete_roads_by_highway", { classes });
|
||
summary.push(`pruned ${n}`);
|
||
}
|
||
}
|
||
await refreshOsmRoads();
|
||
// Sidebar count would otherwise show pre-prune total.
|
||
await refreshDataCounts();
|
||
setOsmToolsOpen(false);
|
||
setStatus(
|
||
summary.length > 0 ? `OSM tools: ${summary.join("; ")}.` : "Nothing selected.",
|
||
);
|
||
} catch (e) {
|
||
setStatus(`OSM tools failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleLoadMetadataPolyline() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking metadata polyline JSON…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
const track = await invoke<Array<[number, number]>>(
|
||
"read_metadata_polyline",
|
||
{ path: picked },
|
||
);
|
||
setMetadataTrack(track);
|
||
setStatus(`Loaded ${track.length}-point metadata polyline`);
|
||
} catch (e) {
|
||
setStatus(`Metadata polyline failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleSnapByVideo() {
|
||
if (busy) return;
|
||
const typed = bulkVideoName.trim();
|
||
if (!typed) {
|
||
setStatus("Pick a video name first (use the bulk-delete input).");
|
||
return;
|
||
}
|
||
const r = resolveVideoToRaw(typed);
|
||
if (r.ambiguous) {
|
||
setStatus(
|
||
`"${typed}" matches multiple raw video names — pick a specific one from the suggestions.`,
|
||
);
|
||
return;
|
||
}
|
||
if (!r.raw) {
|
||
setStatus(`No video matches "${typed}".`);
|
||
return;
|
||
}
|
||
const name = r.raw;
|
||
const ok = window.confirm(
|
||
`Snap every asset (fixed + range) from video "${name}" to the nearest OSM road?\n\n` +
|
||
`Single undoable action.`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const res = await invoke<{
|
||
snapped: number;
|
||
skipped_far: number;
|
||
skipped_no_geom: number;
|
||
}>("snap_assets_in_bbox", {
|
||
minLat: null,
|
||
maxLat: null,
|
||
minLng: null,
|
||
maxLng: null,
|
||
videoName: name,
|
||
maxDistanceM: 50,
|
||
offsetM: roadOffsetMeters,
|
||
centerlineNames: Array.from(centerlineNames),
|
||
metadataTrack:
|
||
metadataByVideo[name]?.length >= 2
|
||
? metadataByVideo[name]
|
||
: metadataTrack.length >= 2
|
||
? metadataTrack
|
||
: null,
|
||
});
|
||
setStatus(
|
||
`Snap by video: ${res.snapped} moved, ${res.skipped_far} too far, ${res.skipped_no_geom} skipped`,
|
||
);
|
||
await refreshAfterMutation();
|
||
await runPostSnapQualityCheck(`Snap by video (${name})`);
|
||
} catch (e) {
|
||
setStatus(`Snap by video failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
function handleLassoComplete(
|
||
shape: "circle" | "rect" | "polygon",
|
||
points: Array<[number, number]>,
|
||
) {
|
||
const R = 6371000;
|
||
const toRad = (d: number) => (d * Math.PI) / 180;
|
||
const haversine = (a: [number, number], b: [number, number]) => {
|
||
const dLat = toRad(b[1] - a[1]);
|
||
const dLng = toRad(b[0] - a[0]);
|
||
const s =
|
||
Math.sin(dLat / 2) ** 2 +
|
||
Math.cos(toRad(a[1])) *
|
||
Math.cos(toRad(b[1])) *
|
||
Math.sin(dLng / 2) ** 2;
|
||
return 2 * R * Math.asin(Math.sqrt(s));
|
||
};
|
||
// OSM-edit-mode lasso: convert shape → polygon and bulk-delete the road
|
||
// sections that fall inside it. Skips the asset-bulk-action flow below.
|
||
if (osmEditMode) {
|
||
const m_per_lat = 111_320;
|
||
let polygon: Array<[number, number]> = [];
|
||
if (shape === "circle") {
|
||
const c = points[0];
|
||
const edge = points[1];
|
||
const radius_m = haversine(c, edge);
|
||
if (radius_m < 1) {
|
||
setStatus("Lasso too small.");
|
||
return;
|
||
}
|
||
const m_per_lng = 111_320 * Math.cos(toRad(c[1]));
|
||
const N = 64;
|
||
for (let i = 0; i < N; i++) {
|
||
const a = (i / N) * Math.PI * 2;
|
||
polygon.push([
|
||
c[0] + (radius_m * Math.cos(a)) / m_per_lng,
|
||
c[1] + (radius_m * Math.sin(a)) / m_per_lat,
|
||
]);
|
||
}
|
||
} else if (shape === "rect") {
|
||
const [a, b] = points;
|
||
const minLng = Math.min(a[0], b[0]);
|
||
const maxLng = Math.max(a[0], b[0]);
|
||
const minLat = Math.min(a[1], b[1]);
|
||
const maxLat = Math.max(a[1], b[1]);
|
||
polygon = [
|
||
[minLng, minLat],
|
||
[maxLng, minLat],
|
||
[maxLng, maxLat],
|
||
[minLng, maxLat],
|
||
];
|
||
} else {
|
||
if (points.length < 3) {
|
||
setStatus("Need at least 3 polygon vertices.");
|
||
return;
|
||
}
|
||
polygon = points.map((p) => [p[0], p[1]] as [number, number]);
|
||
}
|
||
const ok = window.confirm(
|
||
`Bulk-delete OSM road sections inside this lasso?\n\n` +
|
||
`Roads fully inside are removed; roads partially inside are clipped at the lasso boundary — the inside portion is dropped, the outside portion(s) survive as separate roads. ` +
|
||
`Covered by OSM Undo: the original rows are restored and the split-out rows are deleted on undo.`,
|
||
);
|
||
if (!ok) {
|
||
setLassoMode(false);
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
invoke<{
|
||
roads_examined: number;
|
||
roads_deleted: number;
|
||
roads_split: number;
|
||
new_road_ids: number[];
|
||
before_snapshots: OsmRoadSnap[];
|
||
}>("delete_roads_in_lasso", { polygon })
|
||
.then(async (r) => {
|
||
setStatus(
|
||
`Lasso roads: examined ${r.roads_examined}, fully deleted ${r.roads_deleted}, split ${r.roads_split} (→ ${r.new_road_ids.length} new sub-road(s)).`,
|
||
);
|
||
// Push to the OSM undo ring: restore_road_state upserts the
|
||
// snapshots (re-inserts deleted rows by id) and the createdIds
|
||
// path drops the split-out children before that runs.
|
||
if (r.before_snapshots.length > 0 || r.new_road_ids.length > 0) {
|
||
pushOsmUndo({
|
||
kind: "restore-roads",
|
||
snapshots: r.before_snapshots,
|
||
createdIds: r.new_road_ids,
|
||
label: "lasso road delete",
|
||
});
|
||
}
|
||
// The currently-edited / selected / marked road(s) may have been
|
||
// deleted or split — drop those UI references so the next click
|
||
// doesn't act on a stale id.
|
||
setEditingRoadId(null);
|
||
setMarkedVertices(new Set());
|
||
setSelectedRoadIds(new Set());
|
||
await refreshOsmRoads();
|
||
})
|
||
.catch((e) => setStatus(`Bulk road delete failed: ${e}`))
|
||
.finally(() => {
|
||
setBusy(false);
|
||
setLassoMode(false);
|
||
});
|
||
return;
|
||
}
|
||
const ids: number[] = [];
|
||
let label = "";
|
||
if (shape === "circle") {
|
||
const center = points[0];
|
||
const edge = points[1];
|
||
const radius = haversine(center, edge);
|
||
if (radius < 1) {
|
||
setStatus("Lasso too small.");
|
||
return;
|
||
}
|
||
for (const a of filteredAssets) {
|
||
if (a.deleted !== 0) continue;
|
||
if (a.lat === null || a.lng === null) continue;
|
||
if (haversine(center, [a.lng, a.lat]) <= radius) ids.push(a.id);
|
||
}
|
||
label = `circle r=${radius.toFixed(0)} m`;
|
||
} else if (shape === "rect") {
|
||
const [a, b] = points;
|
||
const minLng = Math.min(a[0], b[0]);
|
||
const maxLng = Math.max(a[0], b[0]);
|
||
const minLat = Math.min(a[1], b[1]);
|
||
const maxLat = Math.max(a[1], b[1]);
|
||
if (maxLng - minLng < 1e-6 || maxLat - minLat < 1e-6) {
|
||
setStatus("Lasso too small.");
|
||
return;
|
||
}
|
||
for (const x of filteredAssets) {
|
||
if (x.deleted !== 0) continue;
|
||
if (x.lat === null || x.lng === null) continue;
|
||
if (
|
||
x.lng >= minLng &&
|
||
x.lng <= maxLng &&
|
||
x.lat >= minLat &&
|
||
x.lat <= maxLat
|
||
)
|
||
ids.push(x.id);
|
||
}
|
||
label = "bbox";
|
||
} else {
|
||
// polygon: ray-casting test
|
||
const verts = points;
|
||
if (verts.length < 3) {
|
||
setStatus("Need at least 3 polygon vertices.");
|
||
return;
|
||
}
|
||
setLassoPolygonPoints(verts);
|
||
const insidePoly = (lng: number, lat: number) => {
|
||
let inside = false;
|
||
for (let i = 0, j = verts.length - 1; i < verts.length; j = i++) {
|
||
const xi = verts[i][0],
|
||
yi = verts[i][1];
|
||
const xj = verts[j][0],
|
||
yj = verts[j][1];
|
||
const intersect =
|
||
yi > lat !== yj > lat &&
|
||
lng < ((xj - xi) * (lat - yi)) / (yj - yi + 1e-12) + xi;
|
||
if (intersect) inside = !inside;
|
||
}
|
||
return inside;
|
||
};
|
||
for (const x of filteredAssets) {
|
||
if (x.deleted !== 0) continue;
|
||
if (x.lat === null || x.lng === null) continue;
|
||
if (insidePoly(x.lng, x.lat)) ids.push(x.id);
|
||
}
|
||
label = `polygon (${verts.length})`;
|
||
}
|
||
if (ids.length === 0) {
|
||
setStatus(`Lasso (${label}) selected nothing.`);
|
||
return;
|
||
}
|
||
setLassoSelected({ ids, label });
|
||
setLassoMode(false);
|
||
setStatus(`Lasso (${label}) selected ${ids.length} asset(s)`);
|
||
}
|
||
|
||
function naturalCompare(a: string, b: string): number {
|
||
return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
|
||
}
|
||
|
||
// Run a quality scan immediately after a snap and surface the result
|
||
// as a toast. Shared by all three snap entrypoints (single asset,
|
||
// visible bulk, by-video). The Quality state is also updated so the
|
||
// sidebar panel reflects the post-snap counts without the user needing
|
||
// to click Refresh.
|
||
async function runPostSnapQualityCheck(label: string) {
|
||
try {
|
||
const r = await invoke<QualityReport>("quality_report", {
|
||
movedThresholdM: 50,
|
||
metadataThresholdM: qualityOffTrackM,
|
||
metadata: metadataByVideo,
|
||
cap: 500,
|
||
});
|
||
setQualityReport(r);
|
||
const total =
|
||
r.moved_far_total + r.far_from_metadata_total + r.missing_side_total;
|
||
setSnapQualityToast({
|
||
label,
|
||
total,
|
||
breakdown: {
|
||
moved: r.moved_far_total,
|
||
offTrack: r.far_from_metadata_total,
|
||
missingSide: r.missing_side_total,
|
||
},
|
||
});
|
||
} catch {
|
||
// Swallow — the snap itself succeeded; the quality scan is a
|
||
// post-flight check and shouldn't surface an error toast on top of
|
||
// the snap's own status message.
|
||
}
|
||
}
|
||
|
||
async function refreshQuality() {
|
||
setQualityLoading(true);
|
||
try {
|
||
const r = await invoke<QualityReport>("quality_report", {
|
||
movedThresholdM: 50,
|
||
// User-configurable via Settings → Quality. Default 30 m. Note:
|
||
// tightening below ~25 m produces noise on curved/sparse metadata
|
||
// polylines where the chord cuts a corner the asset is on.
|
||
metadataThresholdM: qualityOffTrackM,
|
||
// Send the loaded per-video metadata so the backend can flag assets
|
||
// that drifted off the actual GPS track. Videos without metadata
|
||
// are silently skipped — the check just doesn't fire for them.
|
||
metadata: metadataByVideo,
|
||
cap: 500,
|
||
});
|
||
setQualityReport(r);
|
||
} catch (e) {
|
||
setStatus(`Quality report failed: ${e}`);
|
||
} finally {
|
||
setQualityLoading(false);
|
||
}
|
||
}
|
||
|
||
// Set up step-through over a list of issue ids. Loads their coords and
|
||
// zooms tight (z=18) to the first one — Prev/Next buttons in the panel
|
||
// walk through the rest.
|
||
async function viewQualityIssues(ids: number[], label: string) {
|
||
if (ids.length === 0) return;
|
||
try {
|
||
const coordsRaw = await invoke<
|
||
Array<{ id: number; lat: number | null; lng: number | null }>
|
||
>("assets_coords_for_ids", { ids });
|
||
const coords = coordsRaw
|
||
.filter(
|
||
(c): c is { id: number; lat: number; lng: number } =>
|
||
c.lat !== null && c.lng !== null,
|
||
)
|
||
.map((c) => ({ id: c.id, lat: c.lat, lng: c.lng }));
|
||
if (coords.length === 0) {
|
||
setStatus(`${label}: no coords found.`);
|
||
return;
|
||
}
|
||
setQualityHighlight(ids);
|
||
setQualityStep({ label, coords, idx: 0 });
|
||
setSelectedAssetId(coords[0].id);
|
||
setViewport({ center: [coords[0].lng, coords[0].lat], zoom: 18 });
|
||
setStatus(
|
||
coords.length === 1
|
||
? `${label}: 1 issue (zoomed in).`
|
||
: `${label}: 1 of ${coords.length} (use Next to step through).`,
|
||
);
|
||
} catch (e) {
|
||
setStatus(`View failed: ${e}`);
|
||
}
|
||
}
|
||
|
||
function stepQualityBy(delta: number) {
|
||
setQualityStep((prev) => {
|
||
if (!prev || prev.coords.length === 0) return prev;
|
||
const next =
|
||
(prev.idx + delta + prev.coords.length) % prev.coords.length;
|
||
const c = prev.coords[next];
|
||
setSelectedAssetId(c.id);
|
||
setViewport({ center: [c.lng, c.lat], zoom: 18 });
|
||
setStatus(
|
||
`${prev.label}: ${next + 1} of ${prev.coords.length}`,
|
||
);
|
||
return { ...prev, idx: next };
|
||
});
|
||
}
|
||
|
||
async function handleDistribute() {
|
||
if (anchors.size === 0) return;
|
||
// Snapshot anchor deltas from the current DB state vs the captured originals.
|
||
type Anchor = {
|
||
id: number;
|
||
origLat: number;
|
||
origLng: number;
|
||
curLat: number;
|
||
curLng: number;
|
||
rowId: string;
|
||
dlat: number;
|
||
dlng: number;
|
||
};
|
||
const anchorList: Anchor[] = [];
|
||
for (const [id, info] of anchors) {
|
||
const cur = filteredAssets.find((a) => a.id === id);
|
||
if (!cur || cur.lat === null || cur.lng === null) continue;
|
||
anchorList.push({
|
||
id,
|
||
origLat: info.origLat,
|
||
origLng: info.origLng,
|
||
curLat: cur.lat,
|
||
curLng: cur.lng,
|
||
rowId: info.rowId,
|
||
dlat: cur.lat - info.origLat,
|
||
dlng: cur.lng - info.origLng,
|
||
});
|
||
}
|
||
if (anchorList.length === 0) {
|
||
setStatus("No usable anchors (assets may have been deleted).");
|
||
return;
|
||
}
|
||
const moved = anchorList.filter(
|
||
(a) => Math.abs(a.dlat) + Math.abs(a.dlng) > 1e-9,
|
||
);
|
||
if (moved.length === 0) {
|
||
setStatus(
|
||
"Anchors haven't been moved yet. Drag the gold-ringed asset(s) to where they belong, then click Distribute.",
|
||
);
|
||
return;
|
||
}
|
||
anchorList.sort((a, b) => naturalCompare(a.rowId, b.rowId));
|
||
const anchorIds = new Set(anchorList.map((a) => a.id));
|
||
|
||
// Build the corrections payload for every visible filtered asset that
|
||
// isn't itself an anchor (anchors already moved, no need to re-translate).
|
||
const targets = filteredAssets
|
||
.filter(
|
||
(a) =>
|
||
a.deleted === 0 &&
|
||
a.lat !== null &&
|
||
a.lng !== null &&
|
||
!anchorIds.has(a.id),
|
||
)
|
||
.slice()
|
||
.sort((a, b) => naturalCompare(a.row_id, b.row_id));
|
||
|
||
const corrections: Array<{ id: number; dlat: number; dlng: number }> = [];
|
||
|
||
if (anchorList.length === 1) {
|
||
const { dlat, dlng } = anchorList[0];
|
||
for (const t of targets) corrections.push({ id: t.id, dlat, dlng });
|
||
} else {
|
||
// Piecewise linear interp by row_id ordering. Build a single sorted
|
||
// sequence of {kind, rowId, payload} and assign each entry a rank.
|
||
type Entry =
|
||
| { kind: "anchor"; anchor: Anchor; rank: number }
|
||
| { kind: "target"; asset: Asset; rank: number };
|
||
const merged: Entry[] = [
|
||
...anchorList.map(
|
||
(a) => ({ kind: "anchor", anchor: a, rank: 0 }) as Entry,
|
||
),
|
||
...targets.map(
|
||
(t) => ({ kind: "target", asset: t, rank: 0 }) as Entry,
|
||
),
|
||
];
|
||
merged.sort((x, y) => {
|
||
const xr = x.kind === "anchor" ? x.anchor.rowId : x.asset.row_id;
|
||
const yr = y.kind === "anchor" ? y.anchor.rowId : y.asset.row_id;
|
||
return naturalCompare(xr, yr);
|
||
});
|
||
merged.forEach((e, i) => (e.rank = i));
|
||
const anchorByRank = merged.filter((e) => e.kind === "anchor") as Array<
|
||
Extract<Entry, { kind: "anchor" }>
|
||
>;
|
||
for (const e of merged) {
|
||
if (e.kind !== "target") continue;
|
||
// Find bracketing anchors using row_id ordering (rank in the merged list).
|
||
let left: (typeof anchorByRank)[number] | null = null;
|
||
let right: (typeof anchorByRank)[number] | null = null;
|
||
for (const a of anchorByRank) {
|
||
if (a.rank <= e.rank) left = a;
|
||
else {
|
||
right = a;
|
||
break;
|
||
}
|
||
}
|
||
let dlat: number;
|
||
let dlng: number;
|
||
if (left && right) {
|
||
// Interpolate by **geographic position** of the target projected
|
||
// onto the line segment between the bracketing anchors' original
|
||
// positions — i.e. along the road direction. This replaces the
|
||
// previous rank-based tt, which over-corrected clustered targets
|
||
// toward the next anchor regardless of how close they actually
|
||
// were geographically. Latitude is scaled by cos(centre_lat) so
|
||
// the projection isn't distorted by lat/lng's non-isotropic
|
||
// metric at the dataset's latitude (Hyderabad ≈ 17°: 1° lng is
|
||
// ~95 % of 1° lat there).
|
||
const lx = left.anchor.origLng;
|
||
const ly = left.anchor.origLat;
|
||
const rx = right.anchor.origLng;
|
||
const ry = right.anchor.origLat;
|
||
const lat0 = ((ly + ry) / 2) * (Math.PI / 180);
|
||
const cosLat = Math.cos(lat0);
|
||
const tx = (e.asset.lng as number) - lx;
|
||
const ty = (e.asset.lat as number) - ly;
|
||
const sx = rx - lx;
|
||
const sy = ry - ly;
|
||
// Scale lng deltas by cosLat so the dot product is in metres²-equiv.
|
||
const seg2 = sx * sx * cosLat * cosLat + sy * sy;
|
||
let tt: number;
|
||
if (seg2 > 0) {
|
||
const dot = tx * sx * cosLat * cosLat + ty * sy;
|
||
tt = Math.max(0, Math.min(1, dot / seg2));
|
||
} else {
|
||
// Degenerate: anchors coincide. Fall back to left's offset.
|
||
tt = 0;
|
||
}
|
||
dlat = left.anchor.dlat + (right.anchor.dlat - left.anchor.dlat) * tt;
|
||
dlng = left.anchor.dlng + (right.anchor.dlng - left.anchor.dlng) * tt;
|
||
} else {
|
||
// Asset is outside the [firstAnchor, lastAnchor] span. Leave it alone
|
||
// — multi-anchor mode only corrects what's between the bookends.
|
||
continue;
|
||
}
|
||
corrections.push({ id: e.asset.id, dlat, dlng });
|
||
}
|
||
}
|
||
|
||
if (corrections.length === 0) {
|
||
setStatus("Nothing to distribute (no other visible assets).");
|
||
return;
|
||
}
|
||
const ok = window.confirm(
|
||
`Distribute correction across ${corrections.length} asset(s) using ${moved.length} anchor(s)?`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("bulk_translate", { corrections });
|
||
setStatus(`Distributed correction across ${n} asset(s). Use Undo to revert.`);
|
||
setAnchors(new Map());
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Distribute failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleAutoLink(splitBy: "side" | "video" | "none") {
|
||
if (!lassoPolygonPoints || lassoPolygonPoints.length < 3) {
|
||
setStatus("Use the polygon lasso to define a region first.");
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
try {
|
||
const res = await invoke<{
|
||
linked: number;
|
||
leftover_a: number;
|
||
leftover_b: number;
|
||
}>("auto_link_in_polygon", {
|
||
polygon: lassoPolygonPoints,
|
||
splitBy,
|
||
maxDistanceM: autoLinkMaxM,
|
||
});
|
||
setStatus(
|
||
`Auto-linked ${res.linked} pair(s) by ${splitBy}; leftover ${res.leftover_a} + ${res.leftover_b}. Right-click pairs to correct, then re-run to rebalance.`,
|
||
);
|
||
// Keep lassoPolygonPoints + lassoSelected so the user can right-click to
|
||
// correct individual pairs and then re-run auto-link to rebalance the
|
||
// orphans. Locked manual links survive every re-run.
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Auto-link failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleSetLink(otherId: number) {
|
||
if (!selectedAsset) return;
|
||
setBusy(true);
|
||
try {
|
||
await invoke("set_link", { aId: selectedAsset.id, bId: otherId });
|
||
setStatus(`Linked ${selectedAsset.id} ↔ ${otherId} (locked)`);
|
||
setLinkPickMode(false);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Set link failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleClearLink() {
|
||
if (!selectedAsset) return;
|
||
setBusy(true);
|
||
try {
|
||
await invoke("clear_link", { id: selectedAsset.id });
|
||
setStatus(`Unlinked ${selectedAsset.id}`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Clear link failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleLassoChangeSide(side: "Left" | "Right") {
|
||
if (!lassoSelected) return;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("change_assets_side", {
|
||
ids: lassoSelected.ids,
|
||
side,
|
||
});
|
||
setStatus(`Set ${n} asset(s) to ${side}`);
|
||
setLassoSelected(null);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Side change failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleLassoSetScope(inScope: boolean) {
|
||
if (!lassoSelected) return;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("set_assets_in_scope", {
|
||
ids: lassoSelected.ids,
|
||
inScope,
|
||
});
|
||
setStatus(
|
||
`Marked ${n} asset(s) as ${inScope ? "in-scope" : "out-of-scope"}`,
|
||
);
|
||
setLassoSelected(null);
|
||
setLassoMode(false);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Set scope failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleLassoClearOverride() {
|
||
if (!lassoSelected) return;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("clear_manual_scope", {
|
||
ids: lassoSelected.ids,
|
||
});
|
||
setStatus(`Cleared manual scope on ${n} asset(s); re-derived from KML.`);
|
||
setLassoSelected(null);
|
||
setLassoMode(false);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Clear scope failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleLassoDelete() {
|
||
if (!lassoSelected) return;
|
||
const ok = window.confirm(
|
||
`Delete ${lassoSelected.ids.length} asset(s) inside the lasso?`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const n = await invoke<number>("delete_assets_bulk", {
|
||
ids: lassoSelected.ids,
|
||
});
|
||
setStatus(`Deleted ${n} asset(s) via lasso.`);
|
||
setLassoSelected(null);
|
||
setLassoMode(false);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Bulk delete failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleFindDuplicates(restrictToBbox: boolean) {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
try {
|
||
const args: Record<string, unknown> = {
|
||
epsM: dupEpsM,
|
||
crossVideoOnly: dupCrossOnly,
|
||
};
|
||
if (restrictToBbox && boundsRef.current) {
|
||
args.minLat = boundsRef.current.south;
|
||
args.maxLat = boundsRef.current.north;
|
||
args.minLng = boundsRef.current.west;
|
||
args.maxLng = boundsRef.current.east;
|
||
}
|
||
const list = await invoke<DupCluster[]>(
|
||
"find_duplicate_clusters",
|
||
args,
|
||
);
|
||
setDupClusters(list);
|
||
setDupActive(list[0]?.id ?? null);
|
||
const km = new Map<number, number>();
|
||
for (const c of list) {
|
||
// Default keep-pick: the most-recently-modified or just first.
|
||
km.set(c.id, c.members[0].id);
|
||
}
|
||
setDupKeep(km);
|
||
setStatus(
|
||
list.length === 0
|
||
? "No duplicate clusters found."
|
||
: `Found ${list.length} duplicate cluster(s); ${list.reduce((s, c) => s + c.members.length, 0)} member(s).`,
|
||
);
|
||
} catch (e) {
|
||
setStatus(`Find duplicates failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleResolveCluster(
|
||
cluster: DupCluster,
|
||
action: "delete" | "out_of_scope",
|
||
) {
|
||
const keepId = dupKeep.get(cluster.id);
|
||
if (keepId === undefined) return;
|
||
const losers = cluster.members
|
||
.filter((m) => m.id !== keepId)
|
||
.map((m) => m.id);
|
||
if (losers.length === 0) return;
|
||
setBusy(true);
|
||
try {
|
||
if (action === "delete") {
|
||
await invoke<number>("delete_assets_bulk", { ids: losers });
|
||
} else {
|
||
await invoke<number>("set_assets_in_scope", {
|
||
ids: losers,
|
||
inScope: false,
|
||
});
|
||
}
|
||
setStatus(
|
||
`Resolved cluster ${cluster.id} (${action}, ${losers.length} losers).`,
|
||
);
|
||
setDupClusters((cs) => cs.filter((c) => c.id !== cluster.id));
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Resolve failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleExport() {
|
||
if (busy) return;
|
||
try {
|
||
// The dropdown next to the button is the source of truth for format.
|
||
// We seed the Save dialog with the matching extension so the user
|
||
// doesn't have to hunt for the file-filter menu inside it.
|
||
const extByFmt: Record<typeof exportFormat, string> = {
|
||
source: "json",
|
||
geojson: "geojson",
|
||
kml: "kml",
|
||
csv: "csv",
|
||
};
|
||
const wantExt = extByFmt[exportFormat];
|
||
const picked = await save({
|
||
defaultPath: `assets.${wantExt}`,
|
||
filters: [{ name: exportFormat.toUpperCase(), extensions: [wantExt] }],
|
||
});
|
||
if (typeof picked !== "string") return;
|
||
// Auto-append the chosen extension if the user typed a bare name.
|
||
let outPath = picked;
|
||
if (!outPath.toLowerCase().endsWith(`.${wantExt}`)) {
|
||
outPath = `${outPath}.${wantExt}`;
|
||
}
|
||
setBusy(true);
|
||
const count = await invoke<number>("export_assets", {
|
||
path: outPath,
|
||
format: exportFormat,
|
||
});
|
||
setStatus(`Exported ${count} asset(s) to ${outPath}`);
|
||
showToast(`Exported ${count} asset(s) (${exportFormat})`);
|
||
} catch (e) {
|
||
setStatus(`Export failed: ${e}`);
|
||
showToast(`Export failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleBulkSnap() {
|
||
if (busy) return;
|
||
if (!boundsRef.current) {
|
||
setStatus("Pan/zoom the map first.");
|
||
return;
|
||
}
|
||
const b = boundsRef.current;
|
||
const ok = window.confirm(
|
||
`Snap all visible fixed assets to the nearest OSM road (within 50 m)?\n\n` +
|
||
`This is a single Undo-able action (one Undo reverts every snap).`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const res = await invoke<{
|
||
snapped: number;
|
||
skipped_far: number;
|
||
skipped_no_geom: number;
|
||
}>("snap_assets_in_bbox", {
|
||
minLat: b.south,
|
||
maxLat: b.north,
|
||
minLng: b.west,
|
||
maxLng: b.east,
|
||
maxDistanceM: 50,
|
||
offsetM: roadOffsetMeters,
|
||
centerlineNames: Array.from(centerlineNames),
|
||
metadataTrack: (() => {
|
||
// If only one video is selected in the filters, use that video's
|
||
// track. Otherwise fall back to the concatenated single track.
|
||
const sel = Array.from(filters.videos);
|
||
if (sel.length === 1 && metadataByVideo[sel[0]]?.length >= 2) {
|
||
return metadataByVideo[sel[0]];
|
||
}
|
||
return metadataTrack.length >= 2 ? metadataTrack : null;
|
||
})(),
|
||
});
|
||
setStatus(
|
||
`Bulk snap: ${res.snapped} moved, ${res.skipped_far} too far, ${res.skipped_no_geom} skipped`,
|
||
);
|
||
await refreshAfterMutation();
|
||
await runPostSnapQualityCheck("Bulk snap (visible)");
|
||
} catch (e) {
|
||
setStatus(`Bulk snap failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleSnapToRoad() {
|
||
if (!selectedAsset) return;
|
||
setBusy(true);
|
||
try {
|
||
const useCenter = centerlineNames.has(selectedAsset.asset_name);
|
||
const perVideo = metadataByVideo[selectedAsset.video_name];
|
||
const trackForAsset =
|
||
perVideo && perVideo.length >= 2
|
||
? perVideo
|
||
: metadataTrack.length >= 2
|
||
? metadataTrack
|
||
: null;
|
||
const [lat, lng] = await invoke<[number, number]>("snap_to_road", {
|
||
assetId: selectedAsset.id,
|
||
maxDistanceM: 50,
|
||
offsetM: useCenter ? 0 : roadOffsetMeters,
|
||
metadataTrack: trackForAsset,
|
||
});
|
||
setStatus(
|
||
`Snapped to road @ ${lat.toFixed(6)}, ${lng.toFixed(6)}`,
|
||
);
|
||
await refreshAfterMutation();
|
||
await runPostSnapQualityCheck("Snap to road");
|
||
} catch (e) {
|
||
setStatus(`Snap failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleImportScope() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking KML…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "KML", extensions: ["kml"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
setStatus("Parsing KML…");
|
||
const count = await invoke<number>("import_kml_scope", { path: picked });
|
||
await refreshScopePolygons();
|
||
if (boundsRef.current) {
|
||
await fetchBboxAssets(boundsRef.current);
|
||
}
|
||
setStatus(`Loaded ${count} scope polygon(s)`);
|
||
showToast(`Loaded ${count} scope polygon(s)`);
|
||
} catch (e) {
|
||
setStatus(`KML import failed: ${e}`);
|
||
showToast(`KML import failed`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleImportVideoMetadata() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking per-video metadata JSON…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "Per-video metadata JSON", extensions: ["json"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
setStatus("Parsing video polylines…");
|
||
const map = await invoke<Record<string, Array<[number, number]>>>(
|
||
"read_video_polylines_json",
|
||
{ path: picked },
|
||
);
|
||
// Persist so subsequent app starts auto-load without a re-pick.
|
||
try {
|
||
await invoke<number>("save_video_metadata", { tracks: map });
|
||
} catch (e) {
|
||
console.warn("save_video_metadata failed", e);
|
||
}
|
||
setMetadataByVideo(map);
|
||
const keys = Object.keys(map);
|
||
// Concatenated fallback for callers that don't yet pass a video.
|
||
const flat: Array<[number, number]> = [];
|
||
for (const k of keys) flat.push(...map[k]);
|
||
setMetadataTrack(flat);
|
||
// Recenter the map on the metadata bbox so the user can actually see
|
||
// what they just imported (otherwise the polylines may sit outside the
|
||
// current viewport and look "missing").
|
||
if (flat.length > 0) {
|
||
let minLng = Infinity, maxLng = -Infinity;
|
||
let minLat = Infinity, maxLat = -Infinity;
|
||
for (const [lng, lat] of flat) {
|
||
if (lng < minLng) minLng = lng;
|
||
if (lng > maxLng) maxLng = lng;
|
||
if (lat < minLat) minLat = lat;
|
||
if (lat > maxLat) maxLat = lat;
|
||
}
|
||
setViewport({
|
||
center: [(minLng + maxLng) / 2, (minLat + maxLat) / 2],
|
||
zoom: 12,
|
||
});
|
||
}
|
||
setStatus(
|
||
`Loaded metadata for ${keys.length} video(s). Toggle "Metadata polyline" in Layers if it's off. Snap & direction now use each asset's matching video track.`,
|
||
);
|
||
} catch (e) {
|
||
setStatus(`Video metadata import failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
// Auto-detect importer for combined fixed+range JSON. Accepts either a
|
||
// top-level array (rows can be mixed fixed and range) or the round-trip
|
||
// export shape `{ "fixed": [...], "range": [...] }`. Each row's shape is
|
||
// sniffed by the backend (presence of `start_coord_*` → range).
|
||
async function handleImportAuto() {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking file…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
setStatus("Importing (auto-detect)…");
|
||
const r = await invoke<{ fixed: number; range: number }>(
|
||
"import_assets_auto",
|
||
{ path: picked },
|
||
);
|
||
setStatus(`Imported ${r.fixed} fixed + ${r.range} range = ${r.fixed + r.range} asset(s)`);
|
||
showToast(`Imported ${r.fixed + r.range} asset(s)`);
|
||
await Promise.all([
|
||
refreshVideoNames(),
|
||
refreshVideoEntries(),
|
||
refreshAssetNames(),
|
||
refreshClasses(),
|
||
]);
|
||
if (boundsRef.current) {
|
||
await fetchBboxAssets(boundsRef.current);
|
||
}
|
||
const all = await invoke<Asset[]>("list_assets");
|
||
const first = all.find((a) => a.lat !== null && a.lng !== null);
|
||
if (first) {
|
||
setViewport({
|
||
center: [first.lng as number, first.lat as number],
|
||
zoom: 13,
|
||
});
|
||
}
|
||
} catch (e) {
|
||
setStatus(`Import failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
async function handleImport(kind: "fixed" | "range") {
|
||
if (busy) return;
|
||
setBusy(true);
|
||
setStatus("Picking file…");
|
||
try {
|
||
const picked = await open({
|
||
multiple: false,
|
||
directory: false,
|
||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||
});
|
||
if (typeof picked !== "string") {
|
||
setStatus("");
|
||
return;
|
||
}
|
||
setStatus("Importing…");
|
||
const cmd =
|
||
kind === "fixed" ? "import_fixed_assets" : "import_range_assets";
|
||
const count = await invoke<number>(cmd, { path: picked });
|
||
setStatus(`Imported ${count} ${kind}`);
|
||
showToast(`Imported ${count} ${kind} asset(s)`);
|
||
|
||
// Pull in the new video / class names so the filter auto-includes them.
|
||
await Promise.all([
|
||
refreshVideoNames(),
|
||
refreshVideoEntries(),
|
||
refreshAssetNames(),
|
||
refreshClasses(),
|
||
]);
|
||
// Re-applied scope (server-side) means in_scope flags may have changed.
|
||
if (boundsRef.current) {
|
||
await fetchBboxAssets(boundsRef.current);
|
||
}
|
||
|
||
const all = await invoke<Asset[]>("list_assets");
|
||
const first = all.find(
|
||
(a) => a.asset_type === kind && a.lat !== null && a.lng !== null,
|
||
);
|
||
if (first) {
|
||
setViewport({
|
||
center: [first.lng as number, first.lat as number],
|
||
zoom: 13,
|
||
});
|
||
}
|
||
} catch (e) {
|
||
setStatus(`Import failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="app">
|
||
{perfMode && <FpsCounter />}
|
||
{osmFetchActive && <OsmFetchIndicator />}
|
||
{snapQualityToast && (
|
||
<div
|
||
style={{
|
||
position: "fixed",
|
||
top: 12,
|
||
left: "50%",
|
||
transform: "translateX(-50%)",
|
||
zIndex: 9500,
|
||
background:
|
||
snapQualityToast.total === 0
|
||
? "rgba(39, 174, 96, 0.95)"
|
||
: "rgba(192, 57, 43, 0.95)",
|
||
color: "#fff",
|
||
padding: "10px 16px",
|
||
borderRadius: 6,
|
||
boxShadow: "0 4px 14px rgba(0,0,0,0.4)",
|
||
fontSize: 13,
|
||
fontFamily: "system-ui, sans-serif",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 12,
|
||
maxWidth: "90vw",
|
||
}}
|
||
role="status"
|
||
>
|
||
<strong>{snapQualityToast.label} complete.</strong>
|
||
<span>
|
||
{snapQualityToast.total === 0
|
||
? "No quality issues."
|
||
: `${snapQualityToast.total} quality issue${snapQualityToast.total === 1 ? "" : "s"} found ` +
|
||
`(${snapQualityToast.breakdown.moved} moved · ` +
|
||
`${snapQualityToast.breakdown.offTrack} off track · ` +
|
||
`${snapQualityToast.breakdown.missingSide} no side)`}
|
||
</span>
|
||
<button
|
||
style={{
|
||
background: "rgba(255,255,255,0.2)",
|
||
border: 0,
|
||
color: "#fff",
|
||
padding: "2px 8px",
|
||
borderRadius: 3,
|
||
fontSize: 12,
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={() => setSnapQualityToast(null)}
|
||
aria-label="Dismiss"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
{lensActive && cursorWorld && cursorScreen && (() => {
|
||
// Place the lens cursor +24px / +24px by default; flip to the other
|
||
// side when that would clip the viewport edge. Clamp to a small
|
||
// margin so the lens never sits flush with the window edge.
|
||
const dia = 240;
|
||
const offset = 24;
|
||
const margin = 8;
|
||
const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
|
||
const vh = typeof window !== "undefined" ? window.innerHeight : 768;
|
||
let left = cursorScreen.x + offset;
|
||
let top = cursorScreen.y + offset;
|
||
if (left + dia + margin > vw) {
|
||
left = cursorScreen.x - dia - offset;
|
||
}
|
||
if (top + dia + margin > vh) {
|
||
top = cursorScreen.y - dia - offset;
|
||
}
|
||
if (left < margin) left = margin;
|
||
if (top < margin) top = margin;
|
||
return (
|
||
<div
|
||
style={{
|
||
position: "fixed",
|
||
left,
|
||
top,
|
||
zIndex: 1000,
|
||
pointerEvents: "none",
|
||
}}
|
||
>
|
||
<LensView
|
||
basemapId={primaryId}
|
||
centerLng={cursorWorld.lng}
|
||
centerLat={cursorWorld.lat}
|
||
zoom={Math.min(22, viewport.zoom + 3)}
|
||
diameterPx={dia}
|
||
osmRoads={displayOsmRoads}
|
||
assets={filteredAssets}
|
||
metadataTrack={
|
||
focusedVideo !== null
|
||
? metadataByVideo[focusedVideo] ?? []
|
||
: metadataTrack
|
||
}
|
||
/>
|
||
</div>
|
||
);
|
||
})()}
|
||
<div className="map-area">
|
||
<MapView
|
||
basemapId={primaryId}
|
||
viewport={viewport}
|
||
onUserMove={setViewport}
|
||
onMoveEnd={({ bounds: b }) => setBounds(b)}
|
||
assets={filteredAssets}
|
||
scopePolygons={scopePolygons}
|
||
osmRoads={displayOsmRoads}
|
||
metadataTrack={focusedVideo === null ? metadataTrack : []}
|
||
metadataTracks={displayMetadataTracks}
|
||
selectedMetadataVideo={selectedMetadataVideo}
|
||
gotoPin={gotoPin}
|
||
onCursorWorld={(lng, lat, x, y) => {
|
||
if (!lensActive) return;
|
||
if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
|
||
lensPendingRef.current = null;
|
||
if (lensRafRef.current !== null) {
|
||
cancelAnimationFrame(lensRafRef.current);
|
||
lensRafRef.current = null;
|
||
}
|
||
setCursorWorld(null);
|
||
setCursorScreen(null);
|
||
return;
|
||
}
|
||
lensPendingRef.current = { lng, lat, x, y };
|
||
if (lensRafRef.current !== null) return;
|
||
lensRafRef.current = requestAnimationFrame(() => {
|
||
lensRafRef.current = null;
|
||
const p = lensPendingRef.current;
|
||
if (!p) return;
|
||
setCursorWorld({ lng: p.lng, lat: p.lat });
|
||
setCursorScreen({ x: p.x, y: p.y });
|
||
});
|
||
}}
|
||
markedVertices={markedVertices}
|
||
onVertexShiftClick={(idx) => {
|
||
setMarkedVertices((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(idx)) next.delete(idx);
|
||
else next.add(idx);
|
||
return next;
|
||
});
|
||
}}
|
||
onMetadataLineClick={(name) => {
|
||
setSelectedMetadataVideo((cur) => {
|
||
const next = cur === name ? null : name;
|
||
setStatus(next === null ? "" : name);
|
||
return next;
|
||
});
|
||
}}
|
||
layerVisibility={layerVisibility}
|
||
selectedAsset={selectedAsset}
|
||
multiSelectedIds={Array.from(multiSelectedIds)}
|
||
onSelect={(a, additive) => {
|
||
if (additive) {
|
||
if (!a) return;
|
||
setMultiSelectedIds((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(a.id)) next.delete(a.id);
|
||
else next.add(a.id);
|
||
return next;
|
||
});
|
||
setStatus(`Multi-select: ${a.asset_name} · ${a.row_id}`);
|
||
return;
|
||
}
|
||
if (linkPickMode && a && selectedAsset && a.id !== selectedAsset.id) {
|
||
handleSetLink(a.id);
|
||
return;
|
||
}
|
||
setMultiSelectedIds(new Set());
|
||
setSelectedAssetId(a?.id ?? null);
|
||
setSelectedLink(null);
|
||
setStatus(a ? `Selected ${a.asset_name} · ${a.row_id}` : "");
|
||
}}
|
||
onLinkClick={(idA, idB) => {
|
||
setSelectedLink([idA, idB]);
|
||
setStatus(
|
||
`Link #${idA} ↔ #${idB} selected — press Del to unlink, or click elsewhere to dismiss.`,
|
||
);
|
||
}}
|
||
onAssetRightClick={(a) => {
|
||
if (rightClickFirstId === null) {
|
||
setRightClickFirstId(a.id);
|
||
setStatus(
|
||
`Pair link: anchor #${a.id} (${a.asset_name}) — right-click another asset to link, or the same asset again to cancel.`,
|
||
);
|
||
return;
|
||
}
|
||
if (rightClickFirstId === a.id) {
|
||
setRightClickFirstId(null);
|
||
setStatus("Pair link cancelled.");
|
||
return;
|
||
}
|
||
const aId = rightClickFirstId;
|
||
const bId = a.id;
|
||
setRightClickFirstId(null);
|
||
// If the two assets are already linked to each other, treat the
|
||
// gesture as "unlink" instead of replacing/relocking.
|
||
const anchor = filteredAssets.find((x) => x.id === aId);
|
||
const partner = filteredAssets.find((x) => x.id === bId);
|
||
const alreadyLinked =
|
||
anchor?.link_pair_id === bId && partner?.link_pair_id === aId;
|
||
if (alreadyLinked) {
|
||
invoke("clear_link", { id: aId })
|
||
.then(() => setStatus(`Unlinked #${aId} ↔ #${bId}`))
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Unlink failed: ${e}`));
|
||
return;
|
||
}
|
||
invoke("set_link", { aId, bId })
|
||
.then(() => setStatus(`Linked #${aId} ↔ #${bId} (locked)`))
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Link failed: ${e}`));
|
||
}}
|
||
onPositionChange={handlePositionChange}
|
||
placeMode={placeMode}
|
||
onPlaceAt={handlePlaceAt}
|
||
imageFolder={imageFolder}
|
||
popupEnabled={popupEnabled}
|
||
bboxMode={bboxMode}
|
||
bboxOverlay={bboxOverlay}
|
||
onSideChange={handleSideChange}
|
||
perfMode={perfMode}
|
||
anchorIds={Array.from(anchors.keys())}
|
||
colorBy={colorBy}
|
||
osmEditMode={osmEditMode}
|
||
editingRoadId={editingRoadId}
|
||
selectedRoadIds={selectedRoadIds}
|
||
multiSelectActive={focusedVideo !== null}
|
||
onPickRoad={(id) => {
|
||
// In single-video focus, left-click always toggles multi-select.
|
||
// Vertex-edit tools appear automatically when the selection
|
||
// narrows to a single road (see auto-derive effect below).
|
||
if (focusedVideo !== null) {
|
||
setSelectedRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(id)) next.delete(id);
|
||
else next.add(id);
|
||
return next;
|
||
});
|
||
return;
|
||
}
|
||
setEditingRoadId(id);
|
||
setStatus(`Editing road #${id}. Drag the gold vertex dots.`);
|
||
}}
|
||
onRoadRightClick={(id) => {
|
||
// Behavior depends on whether a video is focused:
|
||
// focusedVideo != null → hide for this video (non-destructive,
|
||
// frontend-only, undoable via the unhide entry).
|
||
// focusedVideo == null → real DB delete with undo via the
|
||
// restore-roads upsert path. The explicit "Delete road"
|
||
// button + Del-on-selected stay aligned with this.
|
||
if (focusedVideo !== null) {
|
||
setHiddenRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
next.add(id);
|
||
return next;
|
||
});
|
||
setSelectedRoadIds((prev) => {
|
||
if (!prev.has(id)) return prev;
|
||
const next = new Set(prev);
|
||
next.delete(id);
|
||
return next;
|
||
});
|
||
pushOsmUndo({ kind: "unhide", ids: [id], label: "hide road" });
|
||
setStatus(`Road #${id} hidden for "${focusedVideo}".`);
|
||
return;
|
||
}
|
||
(async () => {
|
||
try {
|
||
await snapshotRoadsForUndo([id], "delete road (right-click)");
|
||
await invoke("delete_osm_road", { id });
|
||
setSelectedRoadIds((prev) => {
|
||
if (!prev.has(id)) return prev;
|
||
const next = new Set(prev);
|
||
next.delete(id);
|
||
return next;
|
||
});
|
||
if (editingRoadId === id) setEditingRoadId(null);
|
||
setMarkedVertices(new Set());
|
||
await refreshOsmRoads();
|
||
setStatus(`Road #${id} deleted. Use Undo to bring it back.`);
|
||
} catch (e) {
|
||
setStatus(`Delete failed: ${e}`);
|
||
}
|
||
})();
|
||
}}
|
||
onUpdateRoad={handleUpdateRoad}
|
||
roadOffsetMeters={roadOffsetMeters}
|
||
roadOffsetById={roadOffsetById}
|
||
drawRoadMode={drawRoadMode}
|
||
drawRoadCoords={drawRoadCoords}
|
||
onDrawRoadAddPoint={handleDrawRoadAddPoint}
|
||
lassoMode={lassoMode}
|
||
lassoShape={lassoShape}
|
||
onLassoComplete={handleLassoComplete}
|
||
highlightedIds={
|
||
dupActive !== null
|
||
? (dupClusters.find((c) => c.id === dupActive)?.members.map(
|
||
(m) => m.id,
|
||
) ?? [])
|
||
: qualityHighlight.length > 0
|
||
? qualityHighlight
|
||
: (lassoSelected?.ids ?? [])
|
||
}
|
||
/>
|
||
{compare && (
|
||
<MapView
|
||
basemapId={secondaryId}
|
||
viewport={viewport}
|
||
onUserMove={setViewport}
|
||
onMoveEnd={({ bounds: b }) => setBounds(b)}
|
||
assets={filteredAssets}
|
||
scopePolygons={scopePolygons}
|
||
osmRoads={displayOsmRoads}
|
||
metadataTrack={focusedVideo === null ? metadataTrack : []}
|
||
metadataTracks={displayMetadataTracks}
|
||
selectedMetadataVideo={selectedMetadataVideo}
|
||
gotoPin={gotoPin}
|
||
markedVertices={markedVertices}
|
||
onVertexShiftClick={(idx) => {
|
||
setMarkedVertices((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(idx)) next.delete(idx);
|
||
else next.add(idx);
|
||
return next;
|
||
});
|
||
}}
|
||
onMetadataLineClick={(name) => {
|
||
setSelectedMetadataVideo((cur) => {
|
||
const next = cur === name ? null : name;
|
||
setStatus(next === null ? "" : name);
|
||
return next;
|
||
});
|
||
}}
|
||
layerVisibility={layerVisibility}
|
||
selectedAsset={selectedAsset}
|
||
multiSelectedIds={Array.from(multiSelectedIds)}
|
||
onSelect={(a, additive) => {
|
||
if (additive) {
|
||
if (!a) return;
|
||
setMultiSelectedIds((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(a.id)) next.delete(a.id);
|
||
else next.add(a.id);
|
||
return next;
|
||
});
|
||
return;
|
||
}
|
||
setMultiSelectedIds(new Set());
|
||
setSelectedAssetId(a?.id ?? null);
|
||
setStatus(a ? `Selected ${a.asset_name} · ${a.row_id}` : "");
|
||
}}
|
||
onPositionChange={handlePositionChange}
|
||
imageFolder={imageFolder}
|
||
popupEnabled={popupEnabled}
|
||
bboxMode={bboxMode}
|
||
bboxOverlay={bboxOverlay}
|
||
onSideChange={handleSideChange}
|
||
perfMode={perfMode}
|
||
anchorIds={Array.from(anchors.keys())}
|
||
colorBy={
|
||
new Set(filteredAssets.map((a) => displayVideo(a.video_name)))
|
||
.size <= 1
|
||
? "asset"
|
||
: "video"
|
||
}
|
||
/>
|
||
)}
|
||
{/*
|
||
Floating "Fit" button — same action as the C shortcut. Tooltip still
|
||
carries the wordy description; the button itself is just a map icon
|
||
so it stays compact at the bottom of the map.
|
||
*/}
|
||
<button
|
||
type="button"
|
||
onClick={() => fitToFocusOrAll()}
|
||
title={
|
||
focusedVideo
|
||
? `Fit map to "${focusedVideo}" (C)`
|
||
: "Fit map to all loaded data (C)"
|
||
}
|
||
aria-label={
|
||
focusedVideo
|
||
? `Fit map to ${focusedVideo}`
|
||
: "Fit map to all loaded data"
|
||
}
|
||
style={{
|
||
position: "absolute",
|
||
bottom: 16,
|
||
right: 16,
|
||
zIndex: 5,
|
||
width: 40,
|
||
height: 40,
|
||
padding: 0,
|
||
background: "rgba(44, 62, 80, 0.92)",
|
||
color: "#fff",
|
||
border: "1px solid rgba(255,255,255,0.4)",
|
||
borderRadius: "50%",
|
||
fontSize: 20,
|
||
lineHeight: 1,
|
||
cursor: "pointer",
|
||
boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
🗺️
|
||
</button>
|
||
{/*
|
||
BBox mode quick-toggle — green when on, dark when off. Same as the
|
||
Settings checkbox + 'B' shortcut. Disabled when popups themselves
|
||
are off because there's nothing to render onto.
|
||
*/}
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
if (!popupEnabled) {
|
||
setStatus("Enable image popup first to use BBox mode.");
|
||
return;
|
||
}
|
||
setBboxMode((v) => !v);
|
||
}}
|
||
title={
|
||
!popupEnabled
|
||
? "Enable image popup first to use BBox mode"
|
||
: bboxMode
|
||
? "BBox mode ON — drag to draw/move/resize bounding boxes. Click to turn off (B)"
|
||
: "Click to turn on BBox mode (B)"
|
||
}
|
||
aria-label="Toggle BBox mode"
|
||
style={{
|
||
position: "absolute",
|
||
bottom: 16,
|
||
right: 66,
|
||
zIndex: 5,
|
||
width: 40,
|
||
height: 40,
|
||
padding: 0,
|
||
background: bboxMode
|
||
? "rgba(39, 174, 96, 0.95)"
|
||
: "rgba(44, 62, 80, 0.92)",
|
||
color: "#fff",
|
||
border: "1px solid rgba(255,255,255,0.4)",
|
||
borderRadius: "50%",
|
||
fontSize: 13,
|
||
fontWeight: 700,
|
||
lineHeight: 1,
|
||
cursor: popupEnabled ? "pointer" : "not-allowed",
|
||
opacity: popupEnabled ? 1 : 0.5,
|
||
boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
□
|
||
</button>
|
||
</div>
|
||
|
||
{toast !== null && (
|
||
<div
|
||
// Bottom-center transient confirmation. Fixed position so it
|
||
// overlays everything; pointerEvents:none so it never blocks
|
||
// clicks on whatever's behind it.
|
||
style={{
|
||
position: "fixed",
|
||
left: "50%",
|
||
bottom: 24,
|
||
transform: "translateX(-50%)",
|
||
zIndex: 9999,
|
||
background: "rgba(44, 62, 80, 0.95)",
|
||
color: "#fff",
|
||
padding: "8px 16px",
|
||
borderRadius: 6,
|
||
fontSize: 13,
|
||
fontWeight: 600,
|
||
boxShadow: "0 4px 12px rgba(0,0,0,0.35)",
|
||
pointerEvents: "none",
|
||
}}
|
||
>
|
||
{toast}
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
className="panel-toggle"
|
||
onClick={() => setPanelOpen((v) => !v)}
|
||
aria-label={panelOpen ? "Hide panel" : "Show panel"}
|
||
title={panelOpen ? "Hide panel" : "Show panel"}
|
||
>
|
||
{panelOpen ? "✕" : "☰"}
|
||
</button>
|
||
<button
|
||
className="gear-btn"
|
||
onClick={() => setSettingsOpen(true)}
|
||
aria-label="Settings"
|
||
title="Settings"
|
||
>
|
||
⚙
|
||
</button>
|
||
<div
|
||
className="user-chip"
|
||
title={`Logged in as ${currentUser.displayName} (@${currentUser.username}). Click to logout.`}
|
||
onClick={() => {
|
||
if (window.confirm(`Logout ${currentUser.displayName}?`)) onLogout();
|
||
}}
|
||
>
|
||
{currentUser.displayName}
|
||
</div>
|
||
|
||
{filterPanelOpen ? (
|
||
<div className="filter-panel">
|
||
<button
|
||
className="panel-toggle filter-close"
|
||
onClick={() => setFilterPanelOpen(false)}
|
||
title="Hide filters"
|
||
>
|
||
✕
|
||
</button>
|
||
<h3>Filters</h3>
|
||
<div className="filter-summary">
|
||
Showing {filteredAssets.length} / {assets.length} loaded
|
||
<button
|
||
type="button"
|
||
onClick={clearFilters}
|
||
disabled={
|
||
filters.videos.size +
|
||
filters.sides.size +
|
||
filters.types.size +
|
||
filters.names.size ===
|
||
0
|
||
}
|
||
style={{
|
||
marginLeft: 8,
|
||
padding: "1px 6px",
|
||
fontSize: 10,
|
||
background: "#ecf0f1",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
|
||
<h4
|
||
style={{ cursor: "pointer", userSelect: "none" }}
|
||
onClick={() => setVisibilityOpen((v) => !v)}
|
||
title="Click to expand/collapse advanced visibility options"
|
||
>
|
||
{visibilityOpen ? "▼" : "▶"} ⚙ Visibility
|
||
</h4>
|
||
{visibilityOpen && (
|
||
<>
|
||
<label className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={showInScope}
|
||
onChange={(e) => setShowInScope(e.target.checked)}
|
||
/>
|
||
<span className="label">Show in-scope</span>
|
||
</label>
|
||
<label className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={showOutOfScope}
|
||
onChange={(e) => setShowOutOfScope(e.target.checked)}
|
||
/>
|
||
<span className="label">Show out-of-scope</span>
|
||
</label>
|
||
<label className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={showDeleted}
|
||
disabled={onlyDeleted}
|
||
onChange={(e) => setShowDeleted(e.target.checked)}
|
||
/>
|
||
<span className="label">Show deleted</span>
|
||
</label>
|
||
<label className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={onlyDeleted}
|
||
onChange={(e) => setOnlyDeleted(e.target.checked)}
|
||
/>
|
||
<span className="label">Only deleted</span>
|
||
</label>
|
||
</>
|
||
)}
|
||
|
||
<h4>Asset type</h4>
|
||
{(["fixed", "range"] as const).map((t) => (
|
||
<label key={t} className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={filters.types.has(t)}
|
||
onChange={() =>
|
||
setFilters((f) => ({ ...f, types: toggleSet(f.types, t) }))
|
||
}
|
||
/>
|
||
<span className="label">{t}</span>
|
||
<span className="count">{counts.byType.get(t) ?? 0}</span>
|
||
</label>
|
||
))}
|
||
|
||
<h4>Side</h4>
|
||
{Array.from(counts.bySide.entries())
|
||
.sort()
|
||
.map(([side, n]) => (
|
||
<label key={side} className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={filters.sides.has(side)}
|
||
onChange={() =>
|
||
setFilters((f) => ({
|
||
...f,
|
||
sides: toggleSet(f.sides, side),
|
||
}))
|
||
}
|
||
/>
|
||
<span className="label">{side}</span>
|
||
<span className="count">{n}</span>
|
||
</label>
|
||
))}
|
||
|
||
<h4
|
||
style={{ cursor: "pointer", userSelect: "none" }}
|
||
onClick={() => setVideosExpanded((v) => !v)}
|
||
title="Click to expand/collapse"
|
||
>
|
||
{videosExpanded ? "▼" : "▶"} Videos — all {counts.byVideo.size}
|
||
{filters.videos.size > 0 && ` (${filters.videos.size} picked)`}
|
||
</h4>
|
||
{videosExpanded && (
|
||
<>
|
||
<div style={{ display: "flex", gap: 4, marginBottom: 4 }}>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setFilters((f) => ({
|
||
...f,
|
||
videos: new Set(allVideoNames),
|
||
}))
|
||
}
|
||
style={{
|
||
flex: 1,
|
||
padding: "2px 6px",
|
||
fontSize: 10,
|
||
background: "#ecf0f1",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
Select all
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() =>
|
||
setFilters((f) => ({ ...f, videos: new Set() }))
|
||
}
|
||
style={{
|
||
flex: 1,
|
||
padding: "2px 6px",
|
||
fontSize: 10,
|
||
background: "#ecf0f1",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
Deselect all
|
||
</button>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
placeholder="Search videos…"
|
||
list="video-name-options"
|
||
value={videoSearch}
|
||
onChange={(e) => setVideoSearch(e.target.value)}
|
||
autoComplete="off"
|
||
style={{
|
||
width: "100%",
|
||
padding: 4,
|
||
boxSizing: "border-box",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
fontSize: 11,
|
||
marginBottom: 4,
|
||
}}
|
||
/>
|
||
{(() => {
|
||
// Merge: videoEntries is the authoritative ordered list from
|
||
// the backend (number + completion). Names present only in
|
||
// metadataByVideo (track loaded but no assets imported yet)
|
||
// get pushed to the end with a synthetic number so the user
|
||
// can still pick them.
|
||
const known = new Set(
|
||
videoEntries.map((e) => displayVideo(e.video_name)),
|
||
);
|
||
const extras = Array.from(
|
||
new Set(Object.keys(metadataByVideo)),
|
||
)
|
||
.filter((v) => !known.has(displayVideo(v)))
|
||
.sort()
|
||
.map(
|
||
(v, i): VideoEntry => ({
|
||
video_name: v,
|
||
video_number: videoEntries.length + i + 1,
|
||
completed: false,
|
||
completed_at: null,
|
||
completed_by: null,
|
||
}),
|
||
);
|
||
const all = videoEntries.concat(extras);
|
||
const term = videoSearch.trim().toLowerCase();
|
||
const matchSearch = (e: VideoEntry) => {
|
||
if (term === "") return true;
|
||
const label = displayVideo(e.video_name).toLowerCase();
|
||
return (
|
||
label.includes(term) ||
|
||
String(e.video_number).includes(term)
|
||
);
|
||
};
|
||
const active = all.filter((e) => !e.completed && matchSearch(e));
|
||
const completed = all.filter(
|
||
(e) => e.completed && matchSearch(e),
|
||
);
|
||
const renderRow = (e: VideoEntry) => {
|
||
const label = displayVideo(e.video_name);
|
||
const n = counts.byVideo.get(label) ?? 0;
|
||
return (
|
||
<label key={e.video_name} className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={filters.videos.has(label)}
|
||
onChange={() =>
|
||
setFilters((f) => ({
|
||
...f,
|
||
videos: toggleSet(f.videos, label),
|
||
}))
|
||
}
|
||
/>
|
||
<span
|
||
className="label"
|
||
title={
|
||
e.completed && e.completed_by
|
||
? `${e.video_name}\nCompleted by ${e.completed_by}${
|
||
e.completed_at ? ` on ${e.completed_at}` : ""
|
||
}`
|
||
: e.video_name
|
||
}
|
||
style={
|
||
e.completed
|
||
? { textDecoration: "line-through", opacity: 0.7 }
|
||
: undefined
|
||
}
|
||
>
|
||
<span style={{ color: "#7f8c8d", marginRight: 4 }}>
|
||
#{e.video_number}
|
||
</span>
|
||
{label}
|
||
</span>
|
||
<span className="count">{n}</span>
|
||
<button
|
||
type="button"
|
||
onClick={(ev) => {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
invoke("set_video_completed", {
|
||
videoName: e.video_name,
|
||
completed: !e.completed,
|
||
})
|
||
.then(() => refreshVideoEntries())
|
||
.catch((err) =>
|
||
setStatus(`Mark complete failed: ${err}`),
|
||
);
|
||
}}
|
||
title={
|
||
e.completed
|
||
? "Click to mark as not complete"
|
||
: "Mark this video as reviewed"
|
||
}
|
||
style={{
|
||
marginLeft: 4,
|
||
padding: "0 6px",
|
||
fontSize: 12,
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
background: e.completed ? "#27ae60" : "#fff",
|
||
color: e.completed ? "#fff" : "#27ae60",
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
✓
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={(ev) => {
|
||
ev.preventDefault();
|
||
flyToVideo(label);
|
||
}}
|
||
title={`Fly to ${label}`}
|
||
style={{
|
||
marginLeft: 4,
|
||
padding: "0 6px",
|
||
fontSize: 11,
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
background: "#fff",
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
⤢
|
||
</button>
|
||
</label>
|
||
);
|
||
};
|
||
return (
|
||
<>
|
||
<div style={{ maxHeight: 240, overflowY: "auto" }}>
|
||
{active.map(renderRow)}
|
||
{active.length === 0 && (
|
||
<div
|
||
style={{
|
||
fontSize: 11,
|
||
color: "#7f8c8d",
|
||
padding: 4,
|
||
}}
|
||
>
|
||
(no active videos)
|
||
</div>
|
||
)}
|
||
</div>
|
||
{completed.length > 0 && (
|
||
<div style={{ marginTop: 6 }}>
|
||
<div
|
||
style={{
|
||
cursor: "pointer",
|
||
userSelect: "none",
|
||
fontSize: 12,
|
||
fontWeight: 600,
|
||
color: "#27ae60",
|
||
padding: "4px 0",
|
||
}}
|
||
onClick={() =>
|
||
setCompletedVideosExpanded((v) => !v)
|
||
}
|
||
title="Toggle the completed-videos section"
|
||
>
|
||
{completedVideosExpanded ? "▼" : "▶"} Completed (
|
||
{completed.length})
|
||
</div>
|
||
{completedVideosExpanded && (
|
||
<div
|
||
style={{
|
||
maxHeight: 200,
|
||
overflowY: "auto",
|
||
borderTop: "1px dashed #ccc",
|
||
paddingTop: 4,
|
||
}}
|
||
>
|
||
{completed.map(renderRow)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
})()}
|
||
</>
|
||
)}
|
||
|
||
<h4
|
||
style={{ cursor: "pointer", userSelect: "none" }}
|
||
onClick={() => setNamesExpanded((v) => !v)}
|
||
title="Click to expand/collapse"
|
||
>
|
||
{namesExpanded ? "▼" : "▶"} Assets ({namesCounts.size})
|
||
{filters.names.size > 0 && ` (${filters.names.size} picked)`}
|
||
</h4>
|
||
{namesExpanded && (
|
||
<div style={{ maxHeight: 280, overflowY: "auto" }}>
|
||
{Array.from(namesCounts.entries())
|
||
.sort((a, b) =>
|
||
a[0].localeCompare(b[0], undefined, { sensitivity: "base" }),
|
||
)
|
||
.map(([name, n]) => (
|
||
<label key={name} className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={filters.names.has(name)}
|
||
onChange={() =>
|
||
setFilters((f) => ({
|
||
...f,
|
||
names: toggleSet(f.names, name),
|
||
}))
|
||
}
|
||
/>
|
||
<span className="label" title={name}>
|
||
{name}
|
||
</span>
|
||
<span className="count">{n}</span>
|
||
</label>
|
||
))}
|
||
{namesCounts.size === 0 && (
|
||
<div className="filter-summary">No assets in current view.</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<button
|
||
className="filter-open-btn"
|
||
onClick={() => setFilterPanelOpen(true)}
|
||
title="Show filters"
|
||
>
|
||
☰ Filters
|
||
</button>
|
||
)}
|
||
|
||
{renameOpen && (
|
||
<div
|
||
className="modal-backdrop"
|
||
onClick={() => setRenameOpen(null)}
|
||
>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
className="modal-close"
|
||
onClick={() => setRenameOpen(null)}
|
||
>
|
||
✕
|
||
</button>
|
||
<h2>Rename class ({renameOpen.ids.length})</h2>
|
||
{renameOpen.current && (
|
||
<div className="status">
|
||
Current: <code>{renameOpen.current}</code>
|
||
</div>
|
||
)}
|
||
<h4>Pick existing class</h4>
|
||
<div
|
||
style={{
|
||
maxHeight: 220,
|
||
overflowY: "auto",
|
||
border: "1px solid #ddd",
|
||
borderRadius: 4,
|
||
padding: 4,
|
||
}}
|
||
>
|
||
{classNames.map((c) => (
|
||
<label key={c} className="filter-row">
|
||
<input
|
||
type="radio"
|
||
name="rename-pick"
|
||
checked={renameInput === c}
|
||
onChange={() => setRenameInput(c)}
|
||
/>
|
||
<span className="label">{c}</span>
|
||
</label>
|
||
))}
|
||
{classNames.length === 0 && (
|
||
<small style={{ opacity: 0.7 }}>
|
||
No classes loaded. Add one below.
|
||
</small>
|
||
)}
|
||
</div>
|
||
<h4>Or type a new class</h4>
|
||
<input
|
||
type="text"
|
||
value={renameInput}
|
||
onChange={(e) => setRenameInput(e.target.value)}
|
||
placeholder="e.g. Crash_Barrier"
|
||
style={{
|
||
width: "100%",
|
||
padding: 6,
|
||
boxSizing: "border-box",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 4,
|
||
fontSize: 13,
|
||
}}
|
||
/>
|
||
<div
|
||
style={{ display: "flex", gap: 6, marginTop: 8, flexWrap: "wrap" }}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#27ae60" }}
|
||
onClick={async () => {
|
||
const name = renameInput.trim();
|
||
if (!name) return;
|
||
try {
|
||
const isNewClass = !classNames.includes(name);
|
||
if (isNewClass) {
|
||
await invoke("add_class", { name });
|
||
}
|
||
await invoke<number>("rename_assets", {
|
||
ids: renameOpen.ids,
|
||
assetName: name,
|
||
});
|
||
setStatus(
|
||
`Renamed ${renameOpen.ids.length} asset(s) → ${name}`,
|
||
);
|
||
showToast(
|
||
renameOpen.ids.length === 1
|
||
? `Renamed → ${name}`
|
||
: `Renamed ${renameOpen.ids.length} → ${name}`,
|
||
);
|
||
setRenameOpen(null);
|
||
setRenameInput("");
|
||
// Surgical update so scroll position / selection / list
|
||
// panels don't churn: just patch asset_name on the renamed
|
||
// rows in the existing array, and append the new class
|
||
// locally if there is one. The audit log / counts / video
|
||
// panels are refreshed in the background — they don't
|
||
// affect the user's place in the UI.
|
||
const renamedIds = new Set(renameOpen.ids);
|
||
setAssets((prev) =>
|
||
prev.map((a) =>
|
||
renamedIds.has(a.id) ? { ...a, asset_name: name } : a,
|
||
),
|
||
);
|
||
if (isNewClass) {
|
||
setClassNames((prev) =>
|
||
prev.includes(name) ? prev : [...prev, name].sort(),
|
||
);
|
||
}
|
||
void Promise.all([
|
||
refreshActions().catch(() => {}),
|
||
refreshAssetNames().catch(() => {}),
|
||
refreshDataCounts().catch(() => {}),
|
||
]);
|
||
} catch (e) {
|
||
setStatus(`Rename failed: ${e}`);
|
||
}
|
||
}}
|
||
disabled={busy || renameInput.trim() === ""}
|
||
>
|
||
Apply
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#7f8c8d" }}
|
||
onClick={() => setRenameOpen(null)}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{importsOpen && (
|
||
<div
|
||
className="modal-backdrop"
|
||
onClick={() => setImportsOpen(false)}
|
||
>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
className="modal-close"
|
||
onClick={() => setImportsOpen(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
<h2>Import data</h2>
|
||
<div className="status" style={{ marginTop: 0 }}>
|
||
Pick what to import. Each opens a file dialog.
|
||
</div>
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085" }}
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImportAuto();
|
||
}}
|
||
disabled={busy}
|
||
title="Import a combined JSON file containing fixed and/or range rows. Rows are dispatched per-shape: any row with start_coord_* + end_coord_* is treated as range, others as fixed. Also accepts the round-trip export object {fixed: [...], range: [...]}."
|
||
>
|
||
Combined assets (auto-detect)…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImport("fixed");
|
||
}}
|
||
disabled={busy}
|
||
title="Import a JSON file where every row is a fixed asset."
|
||
>
|
||
Fixed assets (JSON)…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImport("range");
|
||
}}
|
||
disabled={busy}
|
||
title="Import a JSON file where every row is a range asset (start/mid/end + 3 images)."
|
||
>
|
||
Range assets (JSON)…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#8e44ad" }}
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImportScope();
|
||
}}
|
||
disabled={busy}
|
||
title="Import a KML scope polygon or polyline (geometric only)."
|
||
>
|
||
KML scope…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#9b59b6" }}
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImportVideoMetadata();
|
||
}}
|
||
disabled={busy}
|
||
title="Import per-video metadata polylines ({video_name: [[[lat,lng],...]]}). Snap & direction inference will use each asset's matching video track."
|
||
>
|
||
Per-video metadata (JSON)…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#34495e" }}
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleImportOsm();
|
||
}}
|
||
disabled={busy}
|
||
>
|
||
OSM roads (GeoJSON)…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#5d6d7e" }}
|
||
onClick={() => {
|
||
setImportsOpen(false);
|
||
handleLoadMetadataPolyline();
|
||
}}
|
||
disabled={busy}
|
||
>
|
||
Metadata polyline (JSON)…
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{osmToolsOpen && (
|
||
<div
|
||
className="modal-backdrop"
|
||
onClick={() => setOsmToolsOpen(false)}
|
||
>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
className="modal-close"
|
||
onClick={() => setOsmToolsOpen(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
<h2>OSM tools</h2>
|
||
<div className="status" style={{ marginTop: 0 }}>
|
||
Cleanup operations on the imported OSM road layer. Pick what to
|
||
run, then Apply. Reversible by re-importing OSM.
|
||
</div>
|
||
|
||
<h4>OSM folder</h4>
|
||
<div
|
||
className="status"
|
||
style={{ marginTop: 0, fontSize: 11 }}
|
||
>
|
||
{osmFolder ? (
|
||
<code>{osmFolder}</code>
|
||
) : (
|
||
<em>not set — Generate / Export will prompt</em>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 4, fontSize: 11 }}
|
||
onClick={pickOsmFolder}
|
||
>
|
||
{osmFolder ? "Change OSM folder…" : "Set OSM folder…"}
|
||
</button>
|
||
|
||
<h4>Fetch & write</h4>
|
||
<div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#16a085", fontSize: 11 }}
|
||
onClick={() => {
|
||
setOsmToolsOpen(false);
|
||
handleGenerateOsm();
|
||
}}
|
||
disabled={busy}
|
||
title="Fetch OSM ways from Overpass for the imported assets' bbox (with a small buffer for nearby highways). Falls back to the visible map area when no assets are loaded."
|
||
>
|
||
Generate roads KML →
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#34495e", fontSize: 11 }}
|
||
onClick={() => {
|
||
setOsmToolsOpen(false);
|
||
handleExportOsm();
|
||
}}
|
||
disabled={busy}
|
||
title="Dump the current roads table (with edits) as GeoJSON to your OSM folder for sharing"
|
||
>
|
||
Export current roads →
|
||
</button>
|
||
</div>
|
||
|
||
<h4>Prune small road classes</h4>
|
||
<label className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={osmToolPrune}
|
||
onChange={(e) => setOsmToolPrune(e.target.checked)}
|
||
/>
|
||
<span className="label">
|
||
Delete ways whose <code>highway</code> is in:
|
||
</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={osmToolPruneClasses}
|
||
onChange={(e) => setOsmToolPruneClasses(e.target.value)}
|
||
disabled={!osmToolPrune}
|
||
style={{
|
||
width: "100%",
|
||
padding: 6,
|
||
boxSizing: "border-box",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 4,
|
||
fontSize: 12,
|
||
marginTop: 4,
|
||
}}
|
||
/>
|
||
|
||
<div style={{ display: "flex", gap: 6, marginTop: 12 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#27ae60" }}
|
||
onClick={applyOsmTools}
|
||
disabled={busy}
|
||
>
|
||
Apply
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#7f8c8d" }}
|
||
onClick={() => setOsmToolsOpen(false)}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{settingsOpen && (
|
||
<div
|
||
className="modal-backdrop"
|
||
onClick={() => setSettingsOpen(false)}
|
||
>
|
||
<div className="modal-card" onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
className="modal-close"
|
||
onClick={() => setSettingsOpen(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
<h2>Settings</h2>
|
||
|
||
<h4>Image popup</h4>
|
||
<label style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={popupEnabled}
|
||
onChange={(e) => setPopupEnabled(e.target.checked)}
|
||
/>
|
||
Show image popup when an asset is selected
|
||
</label>
|
||
<label
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
marginTop: 6,
|
||
}}
|
||
title="Render the saved bounding box on top of the image. Read-only by itself — flip BBox mode below to edit."
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={bboxOverlay}
|
||
onChange={(e) => setBboxOverlay(e.target.checked)}
|
||
disabled={!popupEnabled}
|
||
/>
|
||
Show bbox overlay on images
|
||
</label>
|
||
<label
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
marginTop: 6,
|
||
}}
|
||
title="When ON, the popup shows the full image and overlays an editable bounding box. Drag a corner/edge to resize, drag inside to move, drag empty space to draw new."
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={bboxMode}
|
||
onChange={(e) => setBboxMode(e.target.checked)}
|
||
disabled={!popupEnabled || !bboxOverlay}
|
||
/>
|
||
BBox mode (edit bounding boxes on images)
|
||
</label>
|
||
<button
|
||
type="button"
|
||
onClick={async () => {
|
||
try {
|
||
const { save } = await import(
|
||
"@tauri-apps/plugin-dialog"
|
||
);
|
||
const p = await save({
|
||
title: "Export bboxes to JSON",
|
||
defaultPath: "bboxes.json",
|
||
filters: [{ name: "JSON", extensions: ["json"] }],
|
||
});
|
||
if (!p) return;
|
||
const n = await invoke<number>("export_bboxes_to_json", {
|
||
path: p,
|
||
});
|
||
setStatus(`Exported ${n} bbox(es) to ${p}`);
|
||
} catch (e) {
|
||
setStatus(`Export failed: ${e}`);
|
||
}
|
||
}}
|
||
style={{
|
||
marginTop: 6,
|
||
fontSize: 12,
|
||
padding: "4px 8px",
|
||
border: "1px solid #16a085",
|
||
background: "#fff",
|
||
color: "#16a085",
|
||
borderRadius: 3,
|
||
cursor: "pointer",
|
||
}}
|
||
title="Write every bbox row to a sidecar JSON file. Source JSONs are never modified."
|
||
>
|
||
Export bboxes to JSON…
|
||
</button>
|
||
|
||
<h4 style={{ marginTop: 12 }}>Quality thresholds</h4>
|
||
<label
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 8,
|
||
fontSize: 13,
|
||
}}
|
||
title="Off-track flag fires when an asset's perpendicular distance to its video's metadata polyline exceeds this. Lower = stricter; below ~25 m starts producing noise on curved/sparse polylines."
|
||
>
|
||
<span style={{ minWidth: 130 }}>Off-track distance:</span>
|
||
<input
|
||
type="number"
|
||
min={5}
|
||
max={200}
|
||
step={1}
|
||
value={qualityOffTrackM}
|
||
onChange={(e) => {
|
||
const n = parseFloat(e.target.value);
|
||
if (Number.isFinite(n) && n > 0) setQualityOffTrackM(n);
|
||
}}
|
||
style={{ width: 70 }}
|
||
/>
|
||
<span>m</span>
|
||
<button
|
||
type="button"
|
||
onClick={() => setQualityOffTrackM(30)}
|
||
style={{
|
||
marginLeft: "auto",
|
||
fontSize: 11,
|
||
padding: "2px 8px",
|
||
}}
|
||
>
|
||
Reset to 30 m
|
||
</button>
|
||
</label>
|
||
|
||
<h4 style={{ marginTop: 12 }}>Diagnostics</h4>
|
||
<label style={{ display: "flex", alignItems: "center", gap: 6 }}>
|
||
<input
|
||
type="checkbox"
|
||
checked={perfMode}
|
||
onChange={(e) => setPerfMode(e.target.checked)}
|
||
/>
|
||
Performance mode: while panning/zooming, show only basemap +
|
||
asset markers + range paths (hides roads, scope, metadata, links,
|
||
labels). Diagnostic — leave off for normal use.
|
||
</label>
|
||
<h4 style={{ marginTop: 12 }}>Popup width</h4>
|
||
<div className="size-picker">
|
||
{(["S", "M", "L", "XL"] as PopupSize[]).map((s) => {
|
||
const w = POPUP_WIDTH_PX[s];
|
||
const h = Math.round(w / POPUP_ASPECT_VAL[popupAspect]);
|
||
return (
|
||
<button
|
||
key={s}
|
||
className={popupSize === s ? "active" : ""}
|
||
onClick={() => setPopupSize(s)}
|
||
disabled={!popupEnabled}
|
||
>
|
||
{s}
|
||
<br />
|
||
<small style={{ fontSize: 10, opacity: 0.7 }}>
|
||
{w}×{h}
|
||
</small>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
<h4 style={{ marginTop: 12 }}>Popup aspect ratio</h4>
|
||
<div className="size-picker">
|
||
{(["16:9", "4:3", "3:2", "1:1"] as PopupAspect[]).map((a) => (
|
||
<button
|
||
key={a}
|
||
className={popupAspect === a ? "active" : ""}
|
||
onClick={() => setPopupAspect(a)}
|
||
disabled={!popupEnabled}
|
||
>
|
||
{a}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<h4>Snap to centerline (instead of offset lane)</h4>
|
||
<div className="status" style={{ marginTop: 0 }}>
|
||
By default, "Snap to nearest road" moves assets to the LHS/RHS
|
||
parallel offset line (controlled by Lane offset). Tick asset
|
||
names below to snap them to the road centerline instead — e.g.
|
||
kilometer stones or things that sit on the median.
|
||
</div>
|
||
<div
|
||
style={{
|
||
maxHeight: 220,
|
||
overflowY: "auto",
|
||
marginTop: 6,
|
||
border: "1px solid #ddd",
|
||
borderRadius: 4,
|
||
padding: 6,
|
||
}}
|
||
>
|
||
{allAssetNames.length === 0 ? (
|
||
<small style={{ opacity: 0.7 }}>
|
||
No assets loaded yet.
|
||
</small>
|
||
) : (
|
||
allAssetNames.map((name) => (
|
||
<label key={name} className="filter-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={centerlineNames.has(name)}
|
||
onChange={() =>
|
||
setCenterlineNames((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(name)) next.delete(name);
|
||
else next.add(name);
|
||
return next;
|
||
})
|
||
}
|
||
/>
|
||
<span className="label" title={name}>
|
||
{name}
|
||
</span>
|
||
</label>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
<h4>Image folder (offline)</h4>
|
||
<button
|
||
className="primary-btn"
|
||
onClick={handleSetImageFolder}
|
||
disabled={busy}
|
||
>
|
||
{imageFolder ? "Change image folder…" : "Set image folder…"}
|
||
</button>
|
||
{imageFolder && (
|
||
<>
|
||
<div className="status" style={{ marginTop: 4 }}>
|
||
<code style={{ fontSize: 11 }}>{imageFolder}</code>
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#7f8c8d" }}
|
||
onClick={handleClearImageFolder}
|
||
>
|
||
Use image_path as-is
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{panelOpen && (
|
||
<div className="control-panel">
|
||
<h3>Basemap</h3>
|
||
<label className="field">
|
||
<span>{compare ? "Primary" : "Active"}</span>
|
||
<select
|
||
value={primaryId}
|
||
onChange={(e) => setPrimaryId(e.target.value)}
|
||
>
|
||
{BASEMAPS.map((b) => (
|
||
<option key={b.id} value={b.id}>
|
||
{b.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
{compare && (
|
||
<label className="field">
|
||
<span>Secondary</span>
|
||
<select
|
||
value={secondaryId}
|
||
onChange={(e) => setSecondaryId(e.target.value)}
|
||
>
|
||
{BASEMAPS.map((b) => (
|
||
<option key={b.id} value={b.id}>
|
||
{b.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
)}
|
||
|
||
<label className="field checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={compare}
|
||
onChange={(e) => setCompare(e.target.checked)}
|
||
/>
|
||
<span>Compare basemaps (side-by-side)</span>
|
||
</label>
|
||
|
||
<h3 style={{ marginTop: 16 }}>Go to</h3>
|
||
<div style={{ display: "flex", gap: 4 }}>
|
||
<input
|
||
type="text"
|
||
placeholder="lat, lng — or video name"
|
||
value={gotoQuery}
|
||
onChange={(e) => setGotoQuery(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") handleGoto();
|
||
}}
|
||
list="goto-video-options"
|
||
autoComplete="off"
|
||
style={{
|
||
flex: 1,
|
||
padding: 4,
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
fontSize: 11,
|
||
}}
|
||
/>
|
||
<datalist id="goto-video-options">
|
||
{Array.from(
|
||
new Set(Object.keys(metadataByVideo).concat(allVideoNames)),
|
||
)
|
||
.sort()
|
||
.map((v) => (
|
||
<option key={v} value={v} />
|
||
))}
|
||
</datalist>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ padding: "2px 8px", fontSize: 11 }}
|
||
onClick={handleGoto}
|
||
disabled={busy || gotoQuery.trim() === ""}
|
||
>
|
||
Go
|
||
</button>
|
||
</div>
|
||
|
||
<h3 style={{ marginTop: 16 }}>Data</h3>
|
||
<button
|
||
className="primary-btn"
|
||
onClick={() => setImportsOpen(true)}
|
||
disabled={busy}
|
||
>
|
||
Import…
|
||
</button>
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
padding: 6,
|
||
background: "#f6f8fa",
|
||
border: "1px solid #d0d7de",
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<div style={{ fontWeight: 600, marginBottom: 4 }}>Loaded data</div>
|
||
{([
|
||
{
|
||
label: "Fixed assets",
|
||
count: dataCounts.fixed_assets,
|
||
onReplace: () => {
|
||
setImportsOpen(false);
|
||
handleImport("fixed");
|
||
},
|
||
onClear: async () => {
|
||
if (
|
||
!window.confirm(
|
||
`Permanently delete all ${dataCounts.fixed_assets} fixed asset(s)?`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
const n = await invoke<number>("clear_assets_by_type", {
|
||
assetType: "fixed",
|
||
});
|
||
setStatus(`Cleared ${n} fixed asset(s)`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Clear failed: ${e}`);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
label: "Range assets",
|
||
count: dataCounts.range_assets,
|
||
onReplace: () => {
|
||
setImportsOpen(false);
|
||
handleImport("range");
|
||
},
|
||
onClear: async () => {
|
||
if (
|
||
!window.confirm(
|
||
`Permanently delete all ${dataCounts.range_assets} range asset(s)?`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
const n = await invoke<number>("clear_assets_by_type", {
|
||
assetType: "range",
|
||
});
|
||
setStatus(`Cleared ${n} range asset(s)`);
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Clear failed: ${e}`);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
label: "OSM roads",
|
||
count: dataCounts.osm_roads,
|
||
onReplace: () => handleImportOsm(),
|
||
onClear: async () => {
|
||
if (
|
||
!window.confirm(
|
||
`Permanently delete all ${dataCounts.osm_roads} OSM road(s)?`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
const n = await invoke<number>("clear_osm_roads");
|
||
setStatus(`Cleared ${n} OSM road(s)`);
|
||
await refreshOsmRoads();
|
||
await refreshDataCounts();
|
||
} catch (e) {
|
||
setStatus(`Clear failed: ${e}`);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
label: "KML scope",
|
||
count: dataCounts.scope_features,
|
||
onReplace: () => handleImportScope(),
|
||
onClear: async () => {
|
||
if (
|
||
!window.confirm(
|
||
`Permanently delete all ${dataCounts.scope_features} scope feature(s)?`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
const n = await invoke<number>("clear_scope_polygons");
|
||
setStatus(`Cleared ${n} scope feature(s)`);
|
||
await refreshScopePolygons();
|
||
await refreshAfterMutation();
|
||
} catch (e) {
|
||
setStatus(`Clear failed: ${e}`);
|
||
}
|
||
},
|
||
},
|
||
{
|
||
label: "Per-video metadata",
|
||
count: Object.keys(metadataByVideo).length,
|
||
onReplace: () => handleImportVideoMetadata(),
|
||
onClear: async () => {
|
||
try {
|
||
const n = await invoke<number>("clear_video_metadata");
|
||
setMetadataByVideo({});
|
||
setMetadataTrack([]);
|
||
setSelectedMetadataVideo(null);
|
||
await refreshDataCounts();
|
||
setStatus(`Cleared per-video metadata (${n} video(s))`);
|
||
} catch (e) {
|
||
setStatus(`Clear failed: ${e}`);
|
||
}
|
||
},
|
||
},
|
||
] as const).map((row) => (
|
||
<div
|
||
key={row.label}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 4,
|
||
marginBottom: 2,
|
||
}}
|
||
>
|
||
<span style={{ flex: 1 }}>
|
||
{row.label}:{" "}
|
||
<strong>
|
||
{row.count > 0 ? row.count.toLocaleString() : "—"}
|
||
</strong>
|
||
</span>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
padding: "2px 6px",
|
||
fontSize: 10,
|
||
background: "#0969da",
|
||
}}
|
||
onClick={row.onReplace}
|
||
disabled={busy}
|
||
title={row.count > 0 ? "Replace with a new file" : "Add"}
|
||
>
|
||
{row.count > 0 ? "Replace…" : "Add…"}
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
padding: "2px 6px",
|
||
fontSize: 10,
|
||
background: "#cf222e",
|
||
}}
|
||
onClick={row.onClear}
|
||
disabled={busy || row.count === 0}
|
||
title="Permanently remove this data source"
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 6,
|
||
background: osmEditMode ? "#e67e22" : "#2c3e50",
|
||
}}
|
||
onClick={toggleOsmEditMode}
|
||
disabled={busy}
|
||
title="Drag OSM road vertices to fix the road network. Other layers are hidden while in this mode."
|
||
>
|
||
{osmEditMode ? "Exit OSM edit mode" : "Edit OSM roads"}
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 6,
|
||
background: lensActive ? "#16a085" : "#34495e",
|
||
}}
|
||
onClick={() => {
|
||
setLensActive((v) => {
|
||
if (v) {
|
||
setCursorWorld(null);
|
||
setCursorScreen(null);
|
||
}
|
||
return !v;
|
||
});
|
||
}}
|
||
title="Magnifier: while on, hover the map to see a circular zoomed view around the cursor with OSM roads + assets + metadata polyline. Press ESC to exit."
|
||
>
|
||
{lensActive ? "Exit magnifier" : "🔍 Magnifier"}
|
||
</button>
|
||
{osmEditMode && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 6,
|
||
background: osmUndoStack.length > 0 ? "#8e44ad" : "#bdc3c7",
|
||
}}
|
||
onClick={performOsmUndo}
|
||
disabled={busy || osmUndoStack.length === 0}
|
||
title={
|
||
osmUndoStack.length === 0
|
||
? "Nothing to undo. Last 3 OSM edits in this session are stored here."
|
||
: `Undo: ${osmUndoStack[osmUndoStack.length - 1].label} (${osmUndoStack.length}/3 in stack)`
|
||
}
|
||
>
|
||
↶ Undo last edit
|
||
{osmUndoStack.length > 0 ? ` (${osmUndoStack.length})` : ""}
|
||
</button>
|
||
)}
|
||
{osmEditMode && focusedVideo !== null && (
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
padding: 8,
|
||
background: "#eef5ff",
|
||
border: "1px solid #b6d4f7",
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<div style={{ fontWeight: 600, marginBottom: 4 }}>
|
||
Bulk road tools — focus: {focusedVideo}
|
||
</div>
|
||
<div style={{ marginBottom: 4, color: "#555" }}>
|
||
Click roads to multi-select · Right-click to hide one · Del to
|
||
hide selected. Select exactly one road to edit / simplify its
|
||
vertices. Hidden roads return when you exit OSM edit mode or
|
||
change focused video.
|
||
</div>
|
||
<div style={{ marginBottom: 6 }}>
|
||
Selected: <strong>{selectedRoadIds.size}</strong> · Hidden:{" "}
|
||
<strong>{hiddenRoadIds.size}</strong>
|
||
</div>
|
||
<div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#c0392b", fontSize: 11 }}
|
||
disabled={busy || selectedRoadIds.size === 0}
|
||
onClick={() => {
|
||
const ids = Array.from(selectedRoadIds);
|
||
setHiddenRoadIds((prev) => {
|
||
const next = new Set(prev);
|
||
for (const id of ids) next.add(id);
|
||
return next;
|
||
});
|
||
setSelectedRoadIds(new Set());
|
||
pushOsmUndo({
|
||
kind: "unhide",
|
||
ids,
|
||
label: "hide selected",
|
||
});
|
||
setStatus(`${ids.length} road(s) hidden.`);
|
||
}}
|
||
title="Hide all currently-selected roads"
|
||
>
|
||
Hide selected
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", fontSize: 11 }}
|
||
disabled={busy || selectedRoadIds.size === 0}
|
||
onClick={() => {
|
||
setSelectedRoadIds(new Set());
|
||
setStatus("Selection cleared.");
|
||
}}
|
||
>
|
||
Clear selection
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#27ae60", fontSize: 11 }}
|
||
disabled={busy || hiddenRoadIds.size === 0}
|
||
onClick={() => {
|
||
const ids = Array.from(hiddenRoadIds);
|
||
setHiddenRoadIds(new Set());
|
||
pushOsmUndo({
|
||
kind: "rehide",
|
||
ids,
|
||
label: "restore hidden",
|
||
});
|
||
setStatus(`Restored ${ids.length} hidden road(s).`);
|
||
}}
|
||
title="Bring all hidden roads back into view"
|
||
>
|
||
Restore hidden
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", fontSize: 11 }}
|
||
disabled={busy || selectedRoadIds.size < 2}
|
||
onClick={async () => {
|
||
const ids = Array.from(selectedRoadIds);
|
||
// Same destructive + non-undoable warning as "Merge all
|
||
// visible" — easy to misclick a 50-road selection and lose
|
||
// the source rows.
|
||
const ok = window.confirm(
|
||
`Merge ${ids.length} selected road(s) into connected clusters?\n\n` +
|
||
`This deletes the source rows and is NOT covered by the OSM Undo. ` +
|
||
`Disconnected clusters stay separate.`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const r = await invoke<{
|
||
ways_consumed: number;
|
||
merged_into: number;
|
||
skipped_branched: number;
|
||
}>("merge_roads_by_ids", { ids });
|
||
setStatus(
|
||
`Merged ${r.ways_consumed} road(s) into ${r.merged_into}` +
|
||
(r.skipped_branched > 0
|
||
? ` (skipped ${r.skipped_branched} branched cluster${
|
||
r.skipped_branched === 1 ? "" : "s"
|
||
})`
|
||
: ""),
|
||
);
|
||
setSelectedRoadIds(new Set());
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Merge failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
title="Concatenate ≥2 selected roads into one (clusters are merged independently)"
|
||
>
|
||
Merge selected
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#2c3e50", fontSize: 11 }}
|
||
disabled={
|
||
busy || (displayOsmRoads?.features.length ?? 0) < 2
|
||
}
|
||
onClick={async () => {
|
||
const ids = (displayOsmRoads?.features ?? []).map(
|
||
(f) => f.properties.id,
|
||
);
|
||
if (ids.length < 2) return;
|
||
// Destructive + not undoable via the OSM ring buffer (merge
|
||
// consumes source rows). Confirm loudly so the user can't
|
||
// wipe a video's worth of road geometry by misclick.
|
||
const ok = window.confirm(
|
||
`Merge all ${ids.length} visible road(s) into connected clusters?\n\n` +
|
||
`This deletes the source rows and is NOT covered by the OSM Undo. ` +
|
||
`Hidden roads stay hidden. Disconnected clusters stay separate.`,
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
const r = await invoke<{
|
||
ways_consumed: number;
|
||
merged_into: number;
|
||
skipped_branched: number;
|
||
}>("merge_roads_by_ids", { ids });
|
||
setStatus(
|
||
`Merged ${r.ways_consumed} road(s) into ${r.merged_into}` +
|
||
(r.skipped_branched > 0
|
||
? ` (skipped ${r.skipped_branched} branched cluster${
|
||
r.skipped_branched === 1 ? "" : "s"
|
||
})`
|
||
: ""),
|
||
);
|
||
setSelectedRoadIds(new Set());
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Merge failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
title="Merge all currently-visible roads (non-touching clusters stay separate)"
|
||
>
|
||
Merge all visible
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{osmEditMode && editingRoadId !== null && (
|
||
<>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#9b59b6" }}
|
||
onClick={async () => {
|
||
if (editingRoadId === null) return;
|
||
try {
|
||
await snapshotRoadsForUndo([editingRoadId], "flip direction");
|
||
const next = await invoke<number>("flip_road_direction", {
|
||
id: editingRoadId,
|
||
});
|
||
const label =
|
||
next === 1 ? "forward" : next === -1 ? "reverse" : "none";
|
||
setStatus(`Flipped road #${editingRoadId} → ${label}`);
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Flip failed: ${e}`);
|
||
}
|
||
}}
|
||
disabled={busy}
|
||
title="Toggle this road's oneway direction (forward ↔ reverse). Useful when OSM has the wrong direction."
|
||
>
|
||
Flip direction
|
||
</button>
|
||
{(() => {
|
||
const cur = osmRoads.features.find(
|
||
(f) => f.properties.id === editingRoadId,
|
||
);
|
||
const ignored = cur?.properties.snap_ignored === true;
|
||
return (
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 6,
|
||
background: ignored ? "#7f8c8d" : "#34495e",
|
||
}}
|
||
onClick={async () => {
|
||
if (editingRoadId === null) return;
|
||
try {
|
||
await snapshotRoadsForUndo(
|
||
[editingRoadId],
|
||
ignored ? "re-enable for snap" : "ignore for snap",
|
||
);
|
||
await invoke("set_road_snap_ignored", {
|
||
id: editingRoadId,
|
||
ignored: !ignored,
|
||
});
|
||
setStatus(
|
||
ignored
|
||
? `Road #${editingRoadId} re-enabled for snapping.`
|
||
: `Road #${editingRoadId} marked as ignored — snap will skip it.`,
|
||
);
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Toggle failed: ${e}`);
|
||
}
|
||
}}
|
||
disabled={busy}
|
||
title="Excluded roads stay visible (greyed out) but won't be picked as snap targets."
|
||
>
|
||
{ignored ? "Re-enable for snap" : "Ignore for snap"}
|
||
</button>
|
||
);
|
||
})()}
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
padding: 6,
|
||
background: "#fff8e1",
|
||
border: "1px solid #f1c40f",
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<div style={{ fontWeight: 600, marginBottom: 4 }}>
|
||
Bulk vertex tools
|
||
</div>
|
||
<div style={{ marginBottom: 4 }}>
|
||
Shift-click vertices to mark (red ✕). Press{" "}
|
||
<strong>Del</strong> to remove all marked.
|
||
</div>
|
||
<div style={{ marginBottom: 4 }}>
|
||
Currently marked:{" "}
|
||
<strong>{markedVertices.size}</strong>
|
||
{markedVertices.size > 0 && (
|
||
<button
|
||
type="button"
|
||
style={{
|
||
marginLeft: 6,
|
||
padding: "0 6px",
|
||
fontSize: 10,
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
background: "#fff",
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={() => setMarkedVertices(new Set())}
|
||
>
|
||
Clear marks
|
||
</button>
|
||
)}
|
||
</div>
|
||
<label
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
marginTop: 6,
|
||
}}
|
||
title="Douglas-Peucker tolerance in metres. Higher = more aggressive simplification."
|
||
>
|
||
<span>Simplify (m):</span>
|
||
<input
|
||
type="range"
|
||
min={0.5}
|
||
max={20}
|
||
step={0.5}
|
||
value={simplifyTolM}
|
||
onChange={(e) =>
|
||
setSimplifyTolM(parseFloat(e.target.value))
|
||
}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 36, textAlign: "right" }}>
|
||
{simplifyTolM} m
|
||
</span>
|
||
</label>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 4,
|
||
width: "100%",
|
||
background: "#16a085",
|
||
fontSize: 11,
|
||
}}
|
||
onClick={async () => {
|
||
if (editingRoadId === null) return;
|
||
setBusy(true);
|
||
try {
|
||
await snapshotRoadsForUndo(
|
||
[editingRoadId],
|
||
"simplify road",
|
||
);
|
||
const [before, after] = await invoke<[number, number]>(
|
||
"simplify_road",
|
||
{ id: editingRoadId, toleranceM: simplifyTolM },
|
||
);
|
||
setStatus(
|
||
`Road #${editingRoadId}: ${before} → ${after} vertices (${before - after} removed)`,
|
||
);
|
||
setMarkedVertices(new Set());
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Simplify failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
disabled={busy}
|
||
>
|
||
Simplify this road
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 4,
|
||
width: "100%",
|
||
background: "#c0392b",
|
||
fontSize: 11,
|
||
}}
|
||
disabled={busy || markedVertices.size < 2}
|
||
onClick={async () => {
|
||
if (editingRoadId === null) return;
|
||
const idx = Array.from(markedVertices).sort((a, b) => a - b);
|
||
if (idx.length < 2) return;
|
||
const ok = window.confirm(
|
||
`Delete the road section between vertex #${idx[0]} and vertex #${idx[idx.length - 1]}?\n\n` +
|
||
"If both halves keep ≥2 vertices the road splits in two; otherwise the original road is shrunk.",
|
||
);
|
||
if (!ok) return;
|
||
setBusy(true);
|
||
try {
|
||
await snapshotRoadsForUndo([editingRoadId], "delete section");
|
||
const origId = editingRoadId;
|
||
const ids = await invoke<number[]>("delete_road_section", {
|
||
id: origId,
|
||
indices: idx,
|
||
});
|
||
// Anything other than the original id was freshly inserted
|
||
// by the split — attach those to the snapshot so undo
|
||
// deletes them before restoring the original geometry.
|
||
const createdIds = ids.filter((i) => i !== origId);
|
||
if (createdIds.length > 0) {
|
||
attachCreatedIdsToLastUndo(createdIds);
|
||
}
|
||
setMarkedVertices(new Set());
|
||
setStatus(
|
||
ids.length === 1
|
||
? `Section deleted; road #${ids[0]} kept.`
|
||
: `Section deleted; road split into #${ids[0]} and #${ids[1]}.`,
|
||
);
|
||
await refreshOsmRoads();
|
||
} catch (e) {
|
||
setStatus(`Delete section failed: ${e}`);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
title="Drop the marked vertex range from this road. With 2 marks: deletes everything strictly between them. Splits the road into two if both halves still have ≥2 vertices."
|
||
>
|
||
Delete section between marked
|
||
</button>
|
||
</div>
|
||
{focusedVideo === null && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#7f8c8d" }}
|
||
onClick={() => {
|
||
setEditingRoadId(null);
|
||
setStatus("Cleared road selection.");
|
||
}}
|
||
>
|
||
Deselect road
|
||
</button>
|
||
)}
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#c0392b" }}
|
||
onClick={handleDeleteRoad}
|
||
disabled={busy}
|
||
>
|
||
Delete this road
|
||
</button>
|
||
</>
|
||
)}
|
||
{osmEditMode && !drawRoadMode && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#27ae60" }}
|
||
onClick={startDrawRoad}
|
||
disabled={busy}
|
||
title="Click on the map to drop vertices for a new road"
|
||
>
|
||
+ Draw new road
|
||
</button>
|
||
)}
|
||
{osmEditMode && drawRoadMode && (
|
||
<>
|
||
<div
|
||
className="status"
|
||
style={{ marginTop: 6, fontWeight: 600 }}
|
||
>
|
||
Drawing: {drawRoadCoords.length} vertex
|
||
{drawRoadCoords.length === 1 ? "" : "es"}
|
||
</div>
|
||
<div style={{ display: "flex", gap: 6, marginTop: 6 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#16a085" }}
|
||
onClick={finishDrawRoad}
|
||
disabled={busy || drawRoadCoords.length < 2}
|
||
>
|
||
Finish
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#7f8c8d" }}
|
||
onClick={cancelDrawRoad}
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
{drawRoadCoords.length > 0 && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#95a5a6" }}
|
||
onClick={() =>
|
||
setDrawRoadCoords((p) => p.slice(0, -1))
|
||
}
|
||
>
|
||
Undo last point
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
{osmEditMode && (() => {
|
||
// Roads the slider should affect: editing road + multi-selected
|
||
// set. Empty → slider edits the default for all roads.
|
||
const sliderIds = new Set<number>(selectedRoadIds);
|
||
if (editingRoadId !== null) sliderIds.add(editingRoadId);
|
||
const hasSelection = sliderIds.size > 0;
|
||
// Effective value to display. With a selection, prefer the first
|
||
// selected road's override (falling back to default). Without one,
|
||
// show the default.
|
||
const firstId = hasSelection
|
||
? (Array.from(sliderIds)[0] as number)
|
||
: null;
|
||
const effective =
|
||
firstId !== null
|
||
? (roadOffsetById.get(firstId) ?? roadOffsetMeters)
|
||
: roadOffsetMeters;
|
||
return (
|
||
<label
|
||
className="field"
|
||
style={{ marginTop: 6, display: "block" }}
|
||
>
|
||
<span>
|
||
Lane offset (m){hasSelection ? ` [${sliderIds.size} selected]` : " [default]"}
|
||
: {effective.toFixed(1)}
|
||
</span>
|
||
<input
|
||
type="range"
|
||
min={0.1}
|
||
max={30}
|
||
step={0.1}
|
||
value={effective}
|
||
onChange={(e) => {
|
||
const v = parseFloat(e.target.value);
|
||
if (!hasSelection) {
|
||
setRoadOffsetMeters(v);
|
||
return;
|
||
}
|
||
setRoadOffsetById((prev) => {
|
||
const next = new Map(prev);
|
||
for (const id of sliderIds) next.set(id, v);
|
||
return next;
|
||
});
|
||
}}
|
||
style={{ width: "100%" }}
|
||
/>
|
||
{hasSelection && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 4, background: "#7f8c8d", fontSize: 11 }}
|
||
onClick={() => {
|
||
setRoadOffsetById((prev) => {
|
||
const next = new Map(prev);
|
||
for (const id of sliderIds) next.delete(id);
|
||
return next;
|
||
});
|
||
}}
|
||
title="Drop the per-road override on the selected road(s) so they follow the default again."
|
||
>
|
||
Reset selected to default ({roadOffsetMeters.toFixed(1)} m)
|
||
</button>
|
||
)}
|
||
</label>
|
||
);
|
||
})()}
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#1abc9c" }}
|
||
onClick={() => setOsmToolsOpen(true)}
|
||
disabled={busy}
|
||
title="Cleanup operations on the imported OSM road layer"
|
||
>
|
||
OSM tools…
|
||
</button>
|
||
{anchors.size > 0 && (
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
padding: 6,
|
||
background: "#fff8e1",
|
||
border: "1px solid #f1c40f",
|
||
borderRadius: 4,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<div style={{ marginBottom: 4 }}>
|
||
<strong>{anchors.size}</strong> anchor(s) active. Drag any of the
|
||
gold-ringed assets, then click Distribute to spread the GPS
|
||
correction across every visible asset (1 anchor → uniform shift; 2+
|
||
→ piecewise interp by row_id).
|
||
</div>
|
||
<div style={{ display: "flex", gap: 4 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#f39c12", color: "#222" }}
|
||
onClick={handleDistribute}
|
||
disabled={busy}
|
||
>
|
||
Distribute correction
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#bdc3c7", color: "#222" }}
|
||
onClick={() => setAnchors(new Map())}
|
||
disabled={busy}
|
||
>
|
||
Clear anchors
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#16a085" }}
|
||
onClick={handleBulkSnap}
|
||
disabled={busy}
|
||
title="Snap every fixed asset visible in the current viewport to the nearest road (50 m max)"
|
||
>
|
||
Snap visible to road (bulk)
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#1abc9c" }}
|
||
onClick={handleSnapByVideo}
|
||
disabled={busy || !bulkVideoName.trim()}
|
||
title="Snap every asset (fixed + range) for the entered video to the nearest road"
|
||
>
|
||
Snap by video to road
|
||
</button>
|
||
<div style={{ display: "flex", gap: 4, marginTop: 6 }}>
|
||
{(["circle", "rect", "polygon"] as const).map((s) => (
|
||
<button
|
||
key={s}
|
||
type="button"
|
||
onClick={() => setLassoShape(s)}
|
||
style={{
|
||
flex: 1,
|
||
fontSize: 11,
|
||
padding: "3px 4px",
|
||
background: lassoShape === s ? "#e91e63" : "#ecf0f1",
|
||
color: lassoShape === s ? "#fff" : "#222",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
{s === "circle" ? "Circle" : s === "rect" ? "Bbox" : "Polygon"}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 4,
|
||
background: lassoMode ? "#e91e63" : "#9b59b6",
|
||
}}
|
||
onClick={() => {
|
||
setLassoSelected(null);
|
||
setLassoPolygonPoints(null);
|
||
setLassoMode((v) => !v);
|
||
const turningOn = !lassoMode;
|
||
const targetHint = osmEditMode
|
||
? "OSM edit mode is on — lasso will bulk-delete road sections, NOT assets."
|
||
: "";
|
||
setStatus(
|
||
!turningOn
|
||
? "Lasso off."
|
||
: (lassoShape === "polygon"
|
||
? "Lasso on: click to add polygon vertices, double-click to finish."
|
||
: "Lasso on: drag to select.") +
|
||
(targetHint ? ` ${targetHint}` : ""),
|
||
);
|
||
}}
|
||
disabled={busy}
|
||
>
|
||
{lassoMode ? "Cancel lasso" : "Start lasso"}
|
||
</button>
|
||
{lassoSelected && (
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
padding: 8,
|
||
border: "2px solid #e91e63",
|
||
borderRadius: 4,
|
||
background: "#fff",
|
||
}}
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => setLassoListOpen((v) => !v)}
|
||
style={{
|
||
width: "100%",
|
||
background: "transparent",
|
||
border: 0,
|
||
cursor: "pointer",
|
||
fontWeight: 600,
|
||
textAlign: "left",
|
||
padding: 0,
|
||
}}
|
||
title="Show / hide the list of selected assets"
|
||
>
|
||
{lassoListOpen ? "▼" : "▶"}{" "}
|
||
<strong>{lassoSelected.ids.length}</strong> selected (
|
||
{lassoSelected.label})
|
||
</button>
|
||
{lassoListOpen && (
|
||
<div
|
||
style={{
|
||
maxHeight: 180,
|
||
overflowY: "auto",
|
||
marginTop: 6,
|
||
border: "1px solid #eee",
|
||
borderRadius: 3,
|
||
padding: 4,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
{lassoSelected.ids.map((id) => {
|
||
const a = assets.find((x) => x.id === id);
|
||
if (!a) return null;
|
||
return (
|
||
<div
|
||
key={id}
|
||
className="filter-row"
|
||
style={{
|
||
borderBottom: "1px dotted #eee",
|
||
cursor: "pointer",
|
||
}}
|
||
onClick={() => {
|
||
if (a.lat !== null && a.lng !== null) {
|
||
setViewport((v) => ({
|
||
center: [a.lng as number, a.lat as number],
|
||
zoom: Math.max(v.zoom, 18),
|
||
}));
|
||
setSelectedAssetId(a.id);
|
||
}
|
||
}}
|
||
title="Click to center map on this asset"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked
|
||
onClick={(e) => e.stopPropagation()}
|
||
onChange={() => {
|
||
setLassoSelected((s) =>
|
||
s
|
||
? {
|
||
...s,
|
||
ids: s.ids.filter((x) => x !== id),
|
||
}
|
||
: s,
|
||
);
|
||
}}
|
||
/>
|
||
<span className="label" title={a.row_id}>
|
||
{a.asset_name}
|
||
{a.deleted ? " ⌫" : ""}
|
||
{a.in_scope === 0 ? " ◌" : ""}
|
||
</span>
|
||
<span className="count">{a.row_id.slice(-6)}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 6,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#27ae60", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleLassoSetScope(true)}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
In-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleLassoSetScope(false)}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Out-of-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#34495e", flex: 1, fontSize: 11 }}
|
||
onClick={handleLassoClearOverride}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
title="Remove manual override; re-derive from KML scope polygons"
|
||
>
|
||
Auto
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#c0392b", flex: 1, fontSize: 11 }}
|
||
onClick={handleLassoDelete}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 4,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke<number>("restore_assets", {
|
||
ids: lassoSelected.ids,
|
||
})
|
||
.then((n) => setStatus(`Restored ${n} asset(s)`))
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Restore failed: ${e}`))
|
||
}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Restore
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#8e44ad", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
setRenameOpen({ ids: lassoSelected.ids, current: "" })
|
||
}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Rename…
|
||
</button>
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 4,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#e67e22", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleLassoChangeSide("Left")}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Set Left
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#3498db", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleLassoChangeSide("Right")}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
>
|
||
Set Right
|
||
</button>
|
||
</div>
|
||
{lassoPolygonPoints && lassoPolygonPoints.length >= 3 && (
|
||
<>
|
||
<label
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
marginTop: 6,
|
||
fontSize: 11,
|
||
}}
|
||
title="Maximum distance between two assets to be considered a pair (greedy nearest-neighbour)."
|
||
>
|
||
<span>Pair max:</span>
|
||
<input
|
||
type="range"
|
||
min={2}
|
||
max={60}
|
||
step={1}
|
||
value={autoLinkMaxM}
|
||
onChange={(e) => setAutoLinkMaxM(parseFloat(e.target.value))}
|
||
style={{ flex: 1 }}
|
||
/>
|
||
<span style={{ width: 36, textAlign: "right" }}>
|
||
{autoLinkMaxM} m
|
||
</span>
|
||
</label>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 4,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleAutoLink("side")}
|
||
disabled={busy}
|
||
title="Auto-pair Left↔Right within this polygon by proximity"
|
||
>
|
||
Auto-link L↔R
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#1abc9c", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleAutoLink("video")}
|
||
disabled={busy}
|
||
title="Auto-pair across the two videos in this polygon"
|
||
>
|
||
Auto-link by video
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", flex: 1, fontSize: 11 }}
|
||
onClick={() => handleAutoLink("none")}
|
||
disabled={busy}
|
||
title="Pair nearest neighbours in the polygon, ignoring side and video. Use when video_name is missing."
|
||
>
|
||
Auto-link nearest
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 4,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", flex: 1, fontSize: 11 }}
|
||
onClick={async () => {
|
||
let n = 0;
|
||
for (const id of lassoSelected.ids) {
|
||
try {
|
||
await invoke("clear_link", { id });
|
||
n++;
|
||
} catch {
|
||
/* asset wasn't linked; ignore */
|
||
}
|
||
}
|
||
setStatus(`Cleared links on ${n} asset(s)`);
|
||
await refreshAfterMutation();
|
||
}}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
title="Remove auto-link / locked-link from every asset in the lasso"
|
||
>
|
||
Clear links
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#d35400", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke<number>("reset_assets_to_original", {
|
||
ids: lassoSelected.ids,
|
||
})
|
||
.then((n) =>
|
||
setStatus(`Reset ${n} asset(s) to original position`),
|
||
)
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Reset failed: ${e}`))
|
||
}
|
||
disabled={busy || lassoSelected.ids.length === 0}
|
||
title="Restore the lat/lng captured at import time (undoes snap, drag, etc.)"
|
||
>
|
||
Reset to original
|
||
</button>
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
marginTop: 6,
|
||
background: "#bdc3c7",
|
||
fontSize: 11,
|
||
}}
|
||
onClick={() => setLassoSelected(null)}
|
||
>
|
||
Clear selection
|
||
</button>
|
||
</div>
|
||
)}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 6,
|
||
marginTop: 6,
|
||
alignItems: "stretch",
|
||
}}
|
||
>
|
||
<select
|
||
value={exportFormat}
|
||
onChange={(e) =>
|
||
setExportFormat(
|
||
e.target.value as "source" | "geojson" | "kml" | "csv",
|
||
)
|
||
}
|
||
disabled={busy}
|
||
title="File format for the next export"
|
||
style={{ fontSize: 12, padding: "2px 4px" }}
|
||
>
|
||
<option value="source">JSON (round-trip + bbox)</option>
|
||
<option value="geojson">GeoJSON</option>
|
||
<option value="kml">KML</option>
|
||
<option value="csv">CSV</option>
|
||
</select>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#2c3e50", flex: 1 }}
|
||
onClick={handleExport}
|
||
disabled={busy}
|
||
title="Export all live assets in the selected format. JSON is the only re-importable format and includes bbox overlays."
|
||
>
|
||
Export data…
|
||
</button>
|
||
</div>
|
||
<h3 style={{ marginTop: 16 }}>Layers</h3>
|
||
<div className="layer-toggles">
|
||
{(
|
||
[
|
||
["scope", "Scope (KML)"],
|
||
["osm", "OSM roads"],
|
||
["metadata", "Metadata polyline"],
|
||
["fixed", "Fixed assets"],
|
||
["range", "Range polylines"],
|
||
] as const
|
||
).map(([key, label]) => (
|
||
<label key={key} className="layer-toggle">
|
||
<input
|
||
type="checkbox"
|
||
checked={layerVisibility[key]}
|
||
onChange={(e) =>
|
||
setLayerVisibility((v) => ({
|
||
...v,
|
||
[key]: e.target.checked,
|
||
}))
|
||
}
|
||
/>
|
||
<span>{label}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 6, background: "#000" }}
|
||
onClick={handleResetDatabase}
|
||
disabled={busy}
|
||
title="Wipe assets, scope, and action history"
|
||
>
|
||
Reset DB (wipe + start fresh)
|
||
</button>
|
||
|
||
{scopePolygons.length > 0 && (
|
||
<div className="status">
|
||
{scopePolygons.length} scope polygon(s) loaded
|
||
</div>
|
||
)}
|
||
{status && <div className="status">{status}</div>}
|
||
|
||
<h3 style={{ marginTop: 16 }}>
|
||
Navigate ({navigableAssets.length})
|
||
</h3>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#34495e" }}
|
||
onClick={() => gotoAdjacent(-1)}
|
||
disabled={navigableAssets.length === 0}
|
||
title="Previous asset (keyboard: [ )"
|
||
>
|
||
◀ Prev
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#34495e" }}
|
||
onClick={() => gotoAdjacent(1)}
|
||
disabled={navigableAssets.length === 0}
|
||
title="Next asset (keyboard: ] )"
|
||
>
|
||
Next ▶
|
||
</button>
|
||
</div>
|
||
|
||
{selectedAsset && (
|
||
<>
|
||
<h3 style={{ marginTop: 16 }}>Selected</h3>
|
||
<div className="status" style={{ marginTop: 0 }}>
|
||
{selectedAsset.asset_type} · {selectedAsset.asset_name}
|
||
{selectedAsset.side && (
|
||
<span
|
||
className={`side-chip side-${selectedAsset.side.toLowerCase()}`}
|
||
>
|
||
{selectedAsset.side}
|
||
</span>
|
||
)}
|
||
<br />
|
||
<code>{selectedAsset.row_id}</code>
|
||
<br />
|
||
<small>video: {displayVideo(selectedAsset.video_name)}</small>
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
background: placeMode ? "#e67e22" : "#2980b9",
|
||
marginTop: 6,
|
||
}}
|
||
onClick={() => setPlaceMode((v) => !v)}
|
||
disabled={busy}
|
||
title="Click anywhere on the map to move the asset there"
|
||
>
|
||
{placeMode
|
||
? "Cancel place mode"
|
||
: "Move on next click"}
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", marginTop: 6 }}
|
||
onClick={handleSnapToRoad}
|
||
disabled={busy}
|
||
title="Snap to nearest OSM road centerline (within 50 m)"
|
||
>
|
||
Snap to nearest road
|
||
</button>
|
||
<div className="hint">
|
||
Tip: arrow keys nudge selected by ~0.5 m.
|
||
</div>
|
||
{selectedAsset.link_pair_id !== null ? (
|
||
<div className="status" style={{ marginTop: 4, fontSize: 11 }}>
|
||
🔗 Linked to #{selectedAsset.link_pair_id}
|
||
{(selectedAsset.link_locked ?? 0) === 1 ? " (locked)" : ""}
|
||
<div style={{ display: "flex", gap: 4, marginTop: 4 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#16a085", fontSize: 11 }}
|
||
onClick={() => {
|
||
const partner = assets.find(
|
||
(x) => x.id === selectedAsset.link_pair_id,
|
||
);
|
||
if (partner && partner.lat !== null && partner.lng !== null) {
|
||
setViewport((v) => ({
|
||
center: [
|
||
partner.lng as number,
|
||
partner.lat as number,
|
||
],
|
||
zoom: Math.max(v.zoom, 18),
|
||
}));
|
||
setSelectedAssetId(partner.id);
|
||
}
|
||
}}
|
||
>
|
||
Go to partner
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#e91e63", fontSize: 11 }}
|
||
onClick={() => setLinkPickMode(true)}
|
||
disabled={busy || linkPickMode}
|
||
title="Click another asset on the map to re-link"
|
||
>
|
||
Change partner…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#7f8c8d", fontSize: 11 }}
|
||
onClick={handleClearLink}
|
||
disabled={busy}
|
||
>
|
||
Unlink
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div style={{ marginTop: 4 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
width: "100%",
|
||
background: linkPickMode ? "#e91e63" : "#9b59b6",
|
||
fontSize: 11,
|
||
}}
|
||
onClick={() => setLinkPickMode((v) => !v)}
|
||
disabled={busy}
|
||
title="Click another asset on the map to pair with this one"
|
||
>
|
||
{linkPickMode ? "Cancel link pick" : "Link to another asset…"}
|
||
</button>
|
||
</div>
|
||
)}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 6,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#27ae60", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke("set_assets_in_scope", {
|
||
ids: [selectedAsset.id],
|
||
inScope: true,
|
||
})
|
||
.then(refreshAfterMutation)
|
||
.then(() => setStatus("Marked in-scope"))
|
||
.catch((e) => setStatus(`Failed: ${e}`))
|
||
}
|
||
disabled={busy}
|
||
title="Force in-scope (overrides KML)"
|
||
>
|
||
In-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke("set_assets_in_scope", {
|
||
ids: [selectedAsset.id],
|
||
inScope: false,
|
||
})
|
||
.then(refreshAfterMutation)
|
||
.then(() => setStatus("Marked out-of-scope"))
|
||
.catch((e) => setStatus(`Failed: ${e}`))
|
||
}
|
||
disabled={busy}
|
||
title="Force out-of-scope (overrides KML)"
|
||
>
|
||
Out-of-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#34495e", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke("clear_manual_scope", {
|
||
ids: [selectedAsset.id],
|
||
})
|
||
.then(refreshAfterMutation)
|
||
.then(() => setStatus("Cleared override"))
|
||
.catch((e) => setStatus(`Failed: ${e}`))
|
||
}
|
||
disabled={busy}
|
||
title="Drop manual override; re-derive from KML"
|
||
>
|
||
Auto
|
||
</button>
|
||
{selectedAsset.deleted ? (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", flex: 1, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke("restore_assets", { ids: [selectedAsset.id] })
|
||
.then(refreshAfterMutation)
|
||
.then(() => setStatus("Restored"))
|
||
.catch((e) => setStatus(`Restore failed: ${e}`))
|
||
}
|
||
disabled={busy}
|
||
>
|
||
Restore
|
||
</button>
|
||
) : (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#c0392b", flex: 1, fontSize: 11 }}
|
||
onClick={handleDeleteSelected}
|
||
disabled={busy}
|
||
>
|
||
Delete
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#8e44ad", marginTop: 4, fontSize: 11 }}
|
||
onClick={() =>
|
||
setRenameOpen({
|
||
ids: [selectedAsset.id],
|
||
current: selectedAsset.asset_name,
|
||
})
|
||
}
|
||
disabled={busy}
|
||
title="Rename asset class (undoable)"
|
||
>
|
||
Rename class…
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#d35400", marginTop: 4, fontSize: 11 }}
|
||
onClick={() =>
|
||
invoke<number>("reset_assets_to_original", {
|
||
ids: [selectedAsset.id],
|
||
})
|
||
.then((n) =>
|
||
setStatus(
|
||
n > 0
|
||
? "Reset to original position"
|
||
: "No original position recorded for this asset",
|
||
),
|
||
)
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Reset failed: ${e}`))
|
||
}
|
||
disabled={busy}
|
||
title="Restore the lat/lng captured at import time (undoes snap, drag, etc.)"
|
||
>
|
||
Reset to original
|
||
</button>
|
||
{(() => {
|
||
const isAnchor = anchors.has(selectedAsset.id);
|
||
return (
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
background: isAnchor ? "#f1c40f" : "#f39c12",
|
||
color: "#222",
|
||
marginTop: 4,
|
||
fontSize: 11,
|
||
}}
|
||
onClick={() => {
|
||
setAnchors((prev) => {
|
||
const next = new Map(prev);
|
||
if (next.has(selectedAsset.id)) {
|
||
next.delete(selectedAsset.id);
|
||
} else if (
|
||
selectedAsset.lat !== null &&
|
||
selectedAsset.lng !== null
|
||
) {
|
||
next.set(selectedAsset.id, {
|
||
origLat: selectedAsset.lat,
|
||
origLng: selectedAsset.lng,
|
||
rowId: selectedAsset.row_id,
|
||
});
|
||
}
|
||
return next;
|
||
});
|
||
}}
|
||
disabled={busy}
|
||
title="Mark this asset as a GPS-correction anchor. Drag it after marking, then press Distribute to propagate the offset to other visible assets."
|
||
>
|
||
{isAnchor ? "★ Anchor (click to unmark)" : "Mark as anchor"}
|
||
</button>
|
||
);
|
||
})()}
|
||
</>
|
||
)}
|
||
|
||
<details style={{ marginTop: 16 }}>
|
||
<summary style={{ cursor: "pointer", fontSize: 16, fontWeight: 600 }}>Merge range polylines</summary>
|
||
<div className="merge-slots">
|
||
<div className="merge-slot">
|
||
<span className="merge-label">Primary</span>
|
||
<code className="merge-value">
|
||
{mergePrimary ? mergePrimary.row_id : "(empty)"}
|
||
</code>
|
||
<button
|
||
className="merge-pick"
|
||
onClick={() => pickMergeSlot("primary")}
|
||
disabled={busy || !selectedAsset}
|
||
>
|
||
Use selected
|
||
</button>
|
||
</div>
|
||
<div className="merge-slot">
|
||
<span className="merge-label">Secondary</span>
|
||
<code className="merge-value">
|
||
{mergeSecondary ? mergeSecondary.row_id : "(empty)"}
|
||
</code>
|
||
<button
|
||
className="merge-pick"
|
||
onClick={() => pickMergeSlot("secondary")}
|
||
disabled={busy || !selectedAsset}
|
||
>
|
||
Use selected
|
||
</button>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 6 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#16a085", flex: 1 }}
|
||
onClick={handleMerge}
|
||
disabled={busy || !mergePrimary || !mergeSecondary}
|
||
>
|
||
Merge
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", flex: 1 }}
|
||
onClick={() => {
|
||
setMergePrimary(null);
|
||
setMergeSecondary(null);
|
||
}}
|
||
disabled={busy || (!mergePrimary && !mergeSecondary)}
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<details style={{ marginTop: 16 }}>
|
||
<summary style={{ cursor: "pointer", fontSize: 16, fontWeight: 600 }}>Bulk delete by video</summary>
|
||
<input
|
||
type="text"
|
||
placeholder="video_name"
|
||
list="video-name-options"
|
||
value={bulkVideoName}
|
||
onChange={(e) => setBulkVideoName(e.target.value)}
|
||
autoComplete="off"
|
||
style={{
|
||
width: "100%",
|
||
padding: 6,
|
||
boxSizing: "border-box",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 4,
|
||
fontSize: 13,
|
||
marginBottom: 6,
|
||
}}
|
||
/>
|
||
<datalist id="video-name-options">
|
||
{/*
|
||
Source from the DB-wide raw video list so offscreen videos still
|
||
show up in suggestions. Empty raws are filtered (the input would
|
||
display blank and confuse the user). Displayed text shows the raw
|
||
with the displayVideo() label parenthesised when the two differ
|
||
(e.g. "Not available (NA)") so the user can still recognise the
|
||
collapsed bucket; the picked value is always the raw key.
|
||
*/}
|
||
{allVideoNames
|
||
.filter((v) => v.trim() !== "")
|
||
.map((raw) => {
|
||
const label = displayVideo(raw);
|
||
const text = label !== raw ? `${raw} (${label})` : raw;
|
||
return (
|
||
<option key={raw} value={raw}>
|
||
{text}
|
||
</option>
|
||
);
|
||
})}
|
||
</datalist>
|
||
<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#27ae60", flex: 1, fontSize: 11 }}
|
||
onClick={() => {
|
||
const typed = bulkVideoName.trim();
|
||
if (!typed) return;
|
||
const r = resolveVideoToRaw(typed);
|
||
if (r.ambiguous) {
|
||
setStatus(`"${typed}" matches multiple raw video names — pick a specific one.`);
|
||
return;
|
||
}
|
||
if (!r.raw) {
|
||
setStatus(`No video matches "${typed}".`);
|
||
return;
|
||
}
|
||
invoke<number>("set_assets_by_video_in_scope", {
|
||
videoName: r.raw,
|
||
inScope: true,
|
||
})
|
||
.then((n) => setStatus(`Marked ${n} in-scope`))
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Failed: ${e}`));
|
||
}}
|
||
disabled={busy || !bulkVideoName.trim()}
|
||
>
|
||
In-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#7f8c8d", flex: 1, fontSize: 11 }}
|
||
onClick={() => {
|
||
const typed = bulkVideoName.trim();
|
||
if (!typed) return;
|
||
const r = resolveVideoToRaw(typed);
|
||
if (r.ambiguous) {
|
||
setStatus(`"${typed}" matches multiple raw video names — pick a specific one.`);
|
||
return;
|
||
}
|
||
if (!r.raw) {
|
||
setStatus(`No video matches "${typed}".`);
|
||
return;
|
||
}
|
||
invoke<number>("set_assets_by_video_in_scope", {
|
||
videoName: r.raw,
|
||
inScope: false,
|
||
})
|
||
.then((n) => setStatus(`Marked ${n} out-of-scope`))
|
||
.then(refreshAfterMutation)
|
||
.catch((e) => setStatus(`Failed: ${e}`));
|
||
}}
|
||
disabled={busy || !bulkVideoName.trim()}
|
||
>
|
||
Out-of-scope
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ background: "#c0392b", flex: 1, fontSize: 11 }}
|
||
onClick={handleBulkDeleteByVideo}
|
||
disabled={busy || !bulkVideoName.trim()}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</details>
|
||
|
||
<details style={{ marginTop: 16 }}>
|
||
<summary style={{ cursor: "pointer", fontSize: 16, fontWeight: 600 }}>Duplicates</summary>
|
||
<div style={{ display: "flex", gap: 4, alignItems: "center" }}>
|
||
<span style={{ fontSize: 11 }}>ε:</span>
|
||
<input
|
||
type="number"
|
||
min={0.5}
|
||
max={50}
|
||
step={0.5}
|
||
value={dupEpsM}
|
||
onChange={(e) =>
|
||
setDupEpsM(Math.max(0.1, parseFloat(e.target.value) || 3))
|
||
}
|
||
style={{
|
||
width: 50,
|
||
padding: "2px 4px",
|
||
border: "1px solid #ccc",
|
||
borderRadius: 3,
|
||
fontSize: 11,
|
||
}}
|
||
/>
|
||
<span style={{ fontSize: 11 }}>m</span>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, background: "#2980b9", fontSize: 11 }}
|
||
onClick={() => handleFindDuplicates(true)}
|
||
disabled={busy || !boundsRef.current}
|
||
title="Find duplicates inside the visible map area. Zoom out to widen the search; zoom out fully to scan everywhere."
|
||
>
|
||
Find duplicates
|
||
</button>
|
||
</div>
|
||
<label
|
||
className="filter-row"
|
||
style={{ marginTop: 4, fontSize: 11 }}
|
||
title="When ON, only flag pairs that come from different videos. When OFF (default), also flag duplicates within the same video."
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={dupCrossOnly}
|
||
onChange={(e) => setDupCrossOnly(e.target.checked)}
|
||
/>
|
||
<span className="label">Cross-video only</span>
|
||
</label>
|
||
{dupClusters.length > 0 && (
|
||
<div
|
||
style={{
|
||
marginTop: 6,
|
||
maxHeight: 280,
|
||
overflowY: "auto",
|
||
border: "1px solid #ddd",
|
||
borderRadius: 4,
|
||
}}
|
||
>
|
||
{dupClusters.map((c) => {
|
||
const isActive = dupActive === c.id;
|
||
const keepId = dupKeep.get(c.id);
|
||
return (
|
||
<div
|
||
key={c.id}
|
||
style={{
|
||
borderBottom: "1px dotted #eee",
|
||
padding: 6,
|
||
background: isActive ? "#fff3e0" : "transparent",
|
||
}}
|
||
>
|
||
<div
|
||
style={{ cursor: "pointer", fontWeight: 600, fontSize: 12 }}
|
||
onClick={() => {
|
||
setDupActive(c.id);
|
||
const m = c.members[0];
|
||
if (m.lat !== null && m.lng !== null) {
|
||
setViewport((v) => ({
|
||
center: [m.lng as number, m.lat as number],
|
||
zoom: Math.max(v.zoom, 18),
|
||
}));
|
||
}
|
||
}}
|
||
>
|
||
{c.asset_name} · {c.members.length} dup
|
||
</div>
|
||
{isActive && (
|
||
<div style={{ marginTop: 4 }}>
|
||
{c.members.map((m) => (
|
||
<label
|
||
key={m.id}
|
||
className="filter-row"
|
||
style={{ fontSize: 11 }}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name={`dup-keep-${c.id}`}
|
||
checked={keepId === m.id}
|
||
onChange={() => {
|
||
setDupKeep((prev) => {
|
||
const n = new Map(prev);
|
||
n.set(c.id, m.id);
|
||
return n;
|
||
});
|
||
}}
|
||
/>
|
||
<span
|
||
className="label"
|
||
title={`${m.row_id} · ${displayVideo(m.video_name)}`}
|
||
onClick={() => {
|
||
if (m.lat !== null && m.lng !== null) {
|
||
setViewport((v) => ({
|
||
center: [
|
||
m.lng as number,
|
||
m.lat as number,
|
||
],
|
||
zoom: Math.max(v.zoom, 18),
|
||
}));
|
||
setSelectedAssetId(m.id);
|
||
}
|
||
}}
|
||
style={{ cursor: "pointer" }}
|
||
>
|
||
{displayVideo(m.video_name).slice(0, 16)}…
|
||
</span>
|
||
<span className="count">{m.side ?? "—"}</span>
|
||
</label>
|
||
))}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
marginTop: 4,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
background: "#7f8c8d",
|
||
flex: 1,
|
||
fontSize: 11,
|
||
}}
|
||
onClick={() => handleResolveCluster(c, "out_of_scope")}
|
||
disabled={busy}
|
||
title="Mark every member except the one you picked as out-of-scope"
|
||
>
|
||
Keep · others Out
|
||
</button>
|
||
<button
|
||
className="primary-btn"
|
||
style={{
|
||
background: "#c0392b",
|
||
flex: 1,
|
||
fontSize: 11,
|
||
}}
|
||
onClick={() => handleResolveCluster(c, "delete")}
|
||
disabled={busy}
|
||
>
|
||
Keep · delete others
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
{dupClusters.length > 0 && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ marginTop: 4, background: "#bdc3c7", fontSize: 11 }}
|
||
onClick={() => {
|
||
setDupClusters([]);
|
||
setDupActive(null);
|
||
setDupKeep(new Map());
|
||
}}
|
||
>
|
||
Clear duplicates
|
||
</button>
|
||
)}
|
||
</details>
|
||
|
||
<details style={{ marginTop: 16 }}>
|
||
<summary style={{ cursor: "pointer", fontSize: 16, fontWeight: 600 }}>
|
||
Quality{qualityReport
|
||
? ` (${
|
||
qualityReport.moved_far_total +
|
||
qualityReport.far_from_metadata_total +
|
||
qualityReport.missing_side_total
|
||
})`
|
||
: ""}
|
||
</summary>
|
||
<div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginTop: 6 }}>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, fontSize: 11 }}
|
||
onClick={refreshQuality}
|
||
disabled={qualityLoading}
|
||
>
|
||
{qualityLoading ? "Scanning…" : qualityReport ? "Refresh" : "Run scan"}
|
||
</button>
|
||
{qualityHighlight.length > 0 && (
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, fontSize: 11, background: "#bdc3c7" }}
|
||
onClick={() => {
|
||
setQualityHighlight([]);
|
||
setQualityStep(null);
|
||
}}
|
||
>
|
||
Clear
|
||
</button>
|
||
)}
|
||
</div>
|
||
{qualityStep && qualityStep.coords.length > 1 && (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 4,
|
||
alignItems: "center",
|
||
marginTop: 6,
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, fontSize: 11 }}
|
||
onClick={() => stepQualityBy(-1)}
|
||
>
|
||
‹ Prev
|
||
</button>
|
||
<span style={{ minWidth: 50, textAlign: "center" }}>
|
||
{qualityStep.idx + 1} / {qualityStep.coords.length}
|
||
</span>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ flex: 1, fontSize: 11 }}
|
||
onClick={() => stepQualityBy(1)}
|
||
>
|
||
Next ›
|
||
</button>
|
||
</div>
|
||
)}
|
||
{qualityReport && (
|
||
<div style={{ marginTop: 8 }}>
|
||
{[
|
||
{
|
||
key: "moved_far",
|
||
label: "Moved > 50 m",
|
||
count: qualityReport.moved_far_total,
|
||
ids: qualityReport.moved_far,
|
||
},
|
||
{
|
||
key: "far_from_metadata",
|
||
label: "Off metadata track",
|
||
count: qualityReport.far_from_metadata_total,
|
||
ids: qualityReport.far_from_metadata,
|
||
hint:
|
||
Object.keys(metadataByVideo).length === 0
|
||
? "load metadata to enable"
|
||
: null,
|
||
},
|
||
{
|
||
key: "missing_side",
|
||
label: "Missing side",
|
||
count: qualityReport.missing_side_total,
|
||
ids: qualityReport.missing_side,
|
||
},
|
||
].map((r) => (
|
||
<div
|
||
key={r.key}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
padding: "3px 0",
|
||
fontSize: 12,
|
||
}}
|
||
>
|
||
<span style={{ flex: 1 }}>
|
||
{r.label}
|
||
{r.hint && (
|
||
<span
|
||
style={{ marginLeft: 6, color: "#888", fontSize: 10 }}
|
||
>
|
||
({r.hint})
|
||
</span>
|
||
)}
|
||
</span>
|
||
<span
|
||
style={{
|
||
minWidth: 32,
|
||
textAlign: "right",
|
||
fontWeight: 600,
|
||
color: r.count > 0 ? "#c0392b" : "#27ae60",
|
||
}}
|
||
>
|
||
{r.count}
|
||
</span>
|
||
<button
|
||
className="primary-btn"
|
||
style={{ fontSize: 10, padding: "2px 8px" }}
|
||
disabled={r.count === 0 || r.ids.length === 0}
|
||
onClick={() => viewQualityIssues(r.ids, r.label)}
|
||
title={
|
||
r.count > r.ids.length
|
||
? `Showing first ${r.ids.length} of ${r.count}`
|
||
: ""
|
||
}
|
||
>
|
||
View
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</details>
|
||
|
||
<h3 style={{ marginTop: 16 }}>Recent actions</h3>
|
||
{recentActions.length === 0 ? (
|
||
<div className="status" style={{ marginTop: 0 }}>
|
||
No actions yet
|
||
</div>
|
||
) : (
|
||
<ul className="action-list">
|
||
{recentActions.map((a) => (
|
||
<li
|
||
key={a.id}
|
||
className={a.undone ? "action-undone" : undefined}
|
||
>
|
||
<div className="action-text">{formatAction(a)}</div>
|
||
{a.undone ? (
|
||
<button
|
||
className="redo-btn"
|
||
onClick={() => handleRedo(a.id)}
|
||
disabled={busy}
|
||
>
|
||
Redo
|
||
</button>
|
||
) : (
|
||
<button
|
||
className="undo-btn"
|
||
onClick={() => handleUndo(a.id)}
|
||
disabled={busy}
|
||
>
|
||
Undo
|
||
</button>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|