anhncd
1017 lines
46 KiB
TypeScript
1017 lines
46 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import Map, { type MapHoverPayload } from "@/uhm/components/Map";
|
|
import PublicWikiSidebar from "@/uhm/components/wiki/PublicWikiSidebar";
|
|
import TimelineBar from "@/uhm/components/ui/TimelineBar";
|
|
import mapLayersStyles from "@/styles/MapLayers.module.css";
|
|
import { fetchEntities, type Entity } from "@/uhm/api/entities";
|
|
import { fetchGeometriesByBBox } from "@/uhm/api/geometries";
|
|
import { ApiError } from "@/uhm/api/http";
|
|
import { fetchWikiBySlug, getContentByVersionWikiId, searchWikisByTitle, type Wiki } from "@/uhm/api/wikis";
|
|
import {
|
|
BACKGROUND_LAYER_OPTIONS,
|
|
type BackgroundLayerId,
|
|
type BackgroundLayerVisibility,
|
|
DEFAULT_BACKGROUND_LAYER_VISIBILITY,
|
|
HIDDEN_BACKGROUND_LAYER_VISIBILITY,
|
|
} from "@/uhm/lib/map/styles/backgroundLayers";
|
|
import {
|
|
loadBackgroundLayerVisibilityFromStorage,
|
|
persistBackgroundLayerVisibility,
|
|
} from "@/uhm/lib/editor/background/backgroundVisibilityStorage";
|
|
import { EMPTY_FEATURE_COLLECTION, WORLD_BBOX } from "@/uhm/lib/map/geo/constants";
|
|
import { GEO_TYPE_KEYS } from "@/uhm/lib/map/geo/geoTypeMap";
|
|
import { clampYearToFixedRange, TIMELINE_DEBOUNCE_MS } from "@/uhm/lib/utils/timeline";
|
|
import type { FeatureCollection } from "@/uhm/types/geo";
|
|
|
|
const CURRENT_YEAR = new Date().getUTCFullYear();
|
|
const ENTITY_PAGE_LIMIT = 100;
|
|
const WIKI_PAGE_LIMIT = 100;
|
|
const RELATION_CONCURRENCY = 6;
|
|
|
|
type RelationIndex = {
|
|
entitiesById: Record<string, Entity>;
|
|
entityGeometriesById: Record<string, FeatureCollection>;
|
|
entityWikisById: Record<string, Wiki[]>;
|
|
geometryEntityIds: Record<string, string[]>;
|
|
wikiEntityIdsBySlug: Record<string, string[]>;
|
|
wikiBySlug: Record<string, Wiki>;
|
|
};
|
|
|
|
type LinkEntityPopupState = {
|
|
slug: string;
|
|
entities: Entity[];
|
|
top: number;
|
|
left: number;
|
|
};
|
|
|
|
type CachedWiki = Wiki & { __fetched?: boolean };
|
|
|
|
const EMPTY_RELATIONS: RelationIndex = {
|
|
entitiesById: {},
|
|
entityGeometriesById: {},
|
|
entityWikisById: {},
|
|
geometryEntityIds: {},
|
|
wikiEntityIdsBySlug: {},
|
|
wikiBySlug: {},
|
|
};
|
|
|
|
export default function Page() {
|
|
const [data, setData] = useState<FeatureCollection>(EMPTY_FEATURE_COLLECTION);
|
|
const [selectedFeatureIds, setSelectedFeatureIds] = useState<(string | number)[]>([]);
|
|
const [timelineYear, setTimelineYear] = useState<number>(() => clampYearToFixedRange(CURRENT_YEAR));
|
|
const [timelineDraftYear, setTimelineDraftYear] = useState<number>(() => clampYearToFixedRange(CURRENT_YEAR));
|
|
const [timeRange, setTimeRange] = useState<number>(0);
|
|
const [isTimelineLoading, setIsTimelineLoading] = useState(false);
|
|
const [timelineStatus, setTimelineStatus] = useState<string | null>(null);
|
|
const [backgroundVisibility, setBackgroundVisibility] = useState<BackgroundLayerVisibility>(
|
|
() => ({ ...HIDDEN_BACKGROUND_LAYER_VISIBILITY })
|
|
);
|
|
const [isBackgroundVisibilityReady, setIsBackgroundVisibilityReady] = useState(false);
|
|
const [geometryVisibility, setGeometryVisibility] = useState<Record<string, boolean>>(() => {
|
|
const init: Record<string, boolean> = {};
|
|
for (const key of GEO_TYPE_KEYS) init[key] = true;
|
|
return init;
|
|
});
|
|
const [relations, setRelations] = useState<RelationIndex>(EMPTY_RELATIONS);
|
|
const [isRelationsLoading, setIsRelationsLoading] = useState(false);
|
|
const [relationsStatus, setRelationsStatus] = useState<string | null>(null);
|
|
const [relationsProgress, setRelationsProgress] = useState<{ completed: number; total: number }>({
|
|
completed: 0,
|
|
total: 0,
|
|
});
|
|
const [hoverAnchor, setHoverAnchor] = useState<MapHoverPayload | null>(null);
|
|
const [isMapLayersCollapsed, setIsMapLayersCollapsed] = useState(false);
|
|
const [activeEntityId, setActiveEntityId] = useState<string | null>(null);
|
|
const [activeWikiSlug, setActiveWikiSlug] = useState<string | null>(null);
|
|
const [wikiCache, setWikiCache] = useState<Record<string, CachedWiki>>({});
|
|
const [isActiveWikiLoading, setIsActiveWikiLoading] = useState(false);
|
|
const [activeWikiError, setActiveWikiError] = useState<string | null>(null);
|
|
const [linkEntityPopup, setLinkEntityPopup] = useState<LinkEntityPopupState | null>(null);
|
|
const [entityFocusToken, setEntityFocusToken] = useState(0);
|
|
|
|
const [sidebarWidth, setSidebarWidth] = useState<number>(() => {
|
|
if (typeof window !== "undefined") {
|
|
const saved = localStorage.getItem("public-wiki-sidebar-width");
|
|
if (saved) {
|
|
const parsed = parseInt(saved, 10);
|
|
if (!isNaN(parsed) && parsed >= 320 && parsed <= 800) {
|
|
return parsed;
|
|
}
|
|
}
|
|
}
|
|
return 420;
|
|
});
|
|
const [isLargeScreen, setIsLargeScreen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const handleResize = () => {
|
|
setIsLargeScreen(window.innerWidth >= 1024);
|
|
};
|
|
handleResize();
|
|
window.addEventListener("resize", handleResize);
|
|
return () => window.removeEventListener("resize", handleResize);
|
|
}, []);
|
|
|
|
const maxDragWidth = typeof window !== "undefined"
|
|
? Math.min(800, window.innerWidth - 340)
|
|
: 800;
|
|
|
|
const timelineFetchRequestRef = useRef(0);
|
|
const hoverHideTimerRef = useRef<number | null>(null);
|
|
const hoverPopupHoveredRef = useRef(false);
|
|
const linkEntityPopupRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!selectedFeatureIds || selectedFeatureIds.length === 0) return;
|
|
const stillExistIds = selectedFeatureIds.filter(id =>
|
|
data.features.some(feature => String(feature.properties.id) === String(id))
|
|
);
|
|
if (stillExistIds.length !== selectedFeatureIds.length) {
|
|
setSelectedFeatureIds(stillExistIds);
|
|
}
|
|
}, [data.features, selectedFeatureIds]);
|
|
|
|
useEffect(() => {
|
|
const timeoutId = window.setTimeout(() => {
|
|
if (timelineDraftYear !== timelineYear) setTimelineYear(timelineDraftYear);
|
|
}, TIMELINE_DEBOUNCE_MS);
|
|
return () => window.clearTimeout(timeoutId);
|
|
}, [timelineDraftYear, timelineYear]);
|
|
|
|
useEffect(() => {
|
|
setBackgroundVisibility(loadBackgroundLayerVisibilityFromStorage());
|
|
setIsBackgroundVisibilityReady(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let disposed = false;
|
|
const requestId = ++timelineFetchRequestRef.current;
|
|
|
|
async function loadByTimeline() {
|
|
setIsTimelineLoading(true);
|
|
setTimelineStatus(null);
|
|
try {
|
|
const next = await fetchGeometriesByBBox({ ...WORLD_BBOX, time: timelineYear, timeRange });
|
|
if (disposed || requestId !== timelineFetchRequestRef.current) return;
|
|
setData(next);
|
|
} catch (err) {
|
|
if (err instanceof ApiError) {
|
|
console.error("Load timeline data failed", err.body);
|
|
} else {
|
|
console.error("Load timeline data failed", err);
|
|
}
|
|
if (!disposed && requestId === timelineFetchRequestRef.current) {
|
|
setTimelineStatus("Không tải được geometry tại mốc thời gian đã chọn.");
|
|
}
|
|
} finally {
|
|
if (!disposed && requestId === timelineFetchRequestRef.current) {
|
|
setIsTimelineLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadByTimeline();
|
|
return () => {
|
|
disposed = true;
|
|
};
|
|
}, [timelineYear, timeRange]);
|
|
|
|
useEffect(() => {
|
|
let disposed = false;
|
|
|
|
async function loadRelations() {
|
|
setIsRelationsLoading(true);
|
|
setRelationsStatus(null);
|
|
setRelationsProgress({ completed: 0, total: 0 });
|
|
|
|
try {
|
|
const entities = await fetchAllEntities();
|
|
if (disposed) return;
|
|
|
|
const next: RelationIndex = {
|
|
entitiesById: {},
|
|
entityGeometriesById: {},
|
|
entityWikisById: {},
|
|
geometryEntityIds: {},
|
|
wikiEntityIdsBySlug: {},
|
|
wikiBySlug: {},
|
|
};
|
|
|
|
for (const entity of entities) {
|
|
next.entitiesById[entity.id] = entity;
|
|
}
|
|
|
|
setRelationsProgress({ completed: 0, total: entities.length });
|
|
|
|
await mapWithConcurrency(entities, RELATION_CONCURRENCY, async (entity, index) => {
|
|
const [geometries, wikis] = await Promise.all([
|
|
fetchGeometriesByBBox({ ...WORLD_BBOX, entity_id: entity.id }),
|
|
fetchAllWikisForEntity(entity.id),
|
|
]);
|
|
if (disposed) return;
|
|
|
|
next.entityGeometriesById[entity.id] = geometries;
|
|
next.entityWikisById[entity.id] = wikis;
|
|
|
|
for (const feature of geometries.features) {
|
|
pushUniqueString(next.geometryEntityIds, String(feature.properties.id), entity.id);
|
|
}
|
|
|
|
for (const wiki of wikis) {
|
|
const slug = String(wiki.slug || "").trim();
|
|
if (!slug.length) continue;
|
|
next.wikiBySlug[slug] = wiki;
|
|
pushUniqueString(next.wikiEntityIdsBySlug, slug, entity.id);
|
|
}
|
|
|
|
const completed = index + 1;
|
|
if (completed === entities.length || completed % 5 === 0) {
|
|
setRelationsProgress({ completed, total: entities.length });
|
|
}
|
|
});
|
|
|
|
if (disposed) return;
|
|
|
|
normalizeRelationArrays(next.geometryEntityIds);
|
|
normalizeRelationArrays(next.wikiEntityIdsBySlug);
|
|
|
|
setRelations(next);
|
|
setWikiCache((prev) => ({ ...next.wikiBySlug, ...prev }));
|
|
} catch (err) {
|
|
console.error("Load relation index failed", err);
|
|
if (!disposed) {
|
|
setRelationsStatus("Không tải được liên kết entity/wiki cho bản đồ.");
|
|
}
|
|
} finally {
|
|
if (!disposed) {
|
|
setIsRelationsLoading(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
loadRelations();
|
|
return () => {
|
|
disposed = true;
|
|
};
|
|
}, []);
|
|
|
|
const hoverEntityIds = useMemo(() => {
|
|
if (!hoverAnchor) return [];
|
|
return relations.geometryEntityIds[String(hoverAnchor.featureId)] || [];
|
|
}, [hoverAnchor, relations.geometryEntityIds]);
|
|
|
|
const hoverEntities = useMemo(() => {
|
|
return hoverEntityIds
|
|
.map((entityId) => relations.entitiesById[entityId] || null)
|
|
.filter((entity): entity is Entity => Boolean(entity));
|
|
}, [hoverEntityIds, relations.entitiesById]);
|
|
|
|
const activeEntity = activeEntityId ? relations.entitiesById[activeEntityId] || null : null;
|
|
const activeEntityGeometries = activeEntityId
|
|
? relations.entityGeometriesById[activeEntityId] || EMPTY_FEATURE_COLLECTION
|
|
: EMPTY_FEATURE_COLLECTION;
|
|
const mapLabelContextDraft = useMemo(
|
|
() => buildEntityLabelContextDraft(data, relations.geometryEntityIds, relations.entitiesById),
|
|
[data, relations.entitiesById, relations.geometryEntityIds]
|
|
);
|
|
|
|
const activeWiki = useMemo(() => {
|
|
if (!activeWikiSlug) return null;
|
|
return wikiCache[activeWikiSlug] || relations.wikiBySlug[activeWikiSlug] || null;
|
|
}, [activeWikiSlug, relations.wikiBySlug, wikiCache]);
|
|
|
|
const updateBackgroundVisibility = (updater: (prev: BackgroundLayerVisibility) => BackgroundLayerVisibility) => {
|
|
setBackgroundVisibility((prev) => {
|
|
const next = updater(prev);
|
|
persistBackgroundLayerVisibility(next);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleToggleBackgroundLayer = (id: BackgroundLayerId) => {
|
|
updateBackgroundVisibility((prev) => ({ ...prev, [id]: !prev[id] }));
|
|
};
|
|
|
|
const handleShowAllBackgroundLayers = () => {
|
|
updateBackgroundVisibility(() => ({ ...DEFAULT_BACKGROUND_LAYER_VISIBILITY }));
|
|
};
|
|
|
|
const handleHideAllBackgroundLayers = () => {
|
|
updateBackgroundVisibility(() => ({ ...HIDDEN_BACKGROUND_LAYER_VISIBILITY }));
|
|
};
|
|
|
|
const handleTimelineYearChange = (nextYear: number) => {
|
|
setTimelineDraftYear(clampYearToFixedRange(Math.trunc(nextYear)));
|
|
};
|
|
|
|
const handleTimeRangeChange = (nextRange: number) => {
|
|
const safe = Number.isFinite(nextRange) ? Math.trunc(nextRange) : 0;
|
|
setTimeRange(Math.max(0, Math.min(30, safe)));
|
|
};
|
|
|
|
const clearHoverHideTimer = useCallback(() => {
|
|
if (hoverHideTimerRef.current !== null) {
|
|
window.clearTimeout(hoverHideTimerRef.current);
|
|
hoverHideTimerRef.current = null;
|
|
}
|
|
}, []);
|
|
|
|
const selectEntity = useCallback((
|
|
entityId: string,
|
|
options?: {
|
|
sourceFeatureId?: string | number | null;
|
|
preferredWikiSlug?: string | null;
|
|
focusMap?: boolean;
|
|
selectGeometry?: boolean;
|
|
}
|
|
) => {
|
|
const entity = relations.entitiesById[entityId] || null;
|
|
if (!entity) return;
|
|
|
|
const linkedWikis = relations.entityWikisById[entityId] || [];
|
|
const preferredWikiSlug = String(options?.preferredWikiSlug || "").trim();
|
|
const nextWikiSlug =
|
|
(preferredWikiSlug && linkedWikis.some((wiki) => String(wiki.slug || "").trim() === preferredWikiSlug)
|
|
? preferredWikiSlug
|
|
: "") ||
|
|
linkedWikis.map((wiki) => String(wiki.slug || "").trim()).find((slug) => slug.length > 0) ||
|
|
null;
|
|
|
|
setActiveEntityId(entityId);
|
|
setActiveWikiSlug(nextWikiSlug);
|
|
setActiveWikiError(null);
|
|
setLinkEntityPopup(null);
|
|
if (options?.focusMap !== false) {
|
|
setEntityFocusToken((prev) => prev + 1);
|
|
}
|
|
if (options?.selectGeometry && options?.sourceFeatureId != null) {
|
|
setSelectedFeatureIds([options.sourceFeatureId]);
|
|
}
|
|
}, [relations.entitiesById, relations.entityWikisById]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedFeatureIds || selectedFeatureIds.length === 0) return;
|
|
// For UI simplicity in viewer, just link to the first selected geometry
|
|
const linkedEntityIds = relations.geometryEntityIds[String(selectedFeatureIds[0])] || [];
|
|
if (linkedEntityIds.length !== 1) return;
|
|
|
|
const onlyEntityId = linkedEntityIds[0];
|
|
if (activeEntityId === onlyEntityId) return;
|
|
|
|
selectEntity(onlyEntityId, {
|
|
sourceFeatureId: selectedFeatureIds[0],
|
|
focusMap: true,
|
|
selectGeometry: false,
|
|
});
|
|
}, [activeEntityId, relations.geometryEntityIds, selectEntity, selectedFeatureIds]);
|
|
|
|
const handleMapHoverChange = useCallback((payload: MapHoverPayload | null) => {
|
|
clearHoverHideTimer();
|
|
|
|
if (payload) {
|
|
setHoverAnchor(payload);
|
|
return;
|
|
}
|
|
|
|
if (hoverPopupHoveredRef.current) return;
|
|
hoverHideTimerRef.current = window.setTimeout(() => {
|
|
setHoverAnchor(null);
|
|
}, 120);
|
|
}, [clearHoverHideTimer]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (hoverHideTimerRef.current !== null) {
|
|
window.clearTimeout(hoverHideTimerRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!linkEntityPopup) return;
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") setLinkEntityPopup(null);
|
|
};
|
|
const handlePointerDown = (event: PointerEvent) => {
|
|
const target = event.target as Node | null;
|
|
if (target && linkEntityPopupRef.current?.contains(target)) return;
|
|
setLinkEntityPopup(null);
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
window.addEventListener("pointerdown", handlePointerDown);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
window.removeEventListener("pointerdown", handlePointerDown);
|
|
};
|
|
}, [linkEntityPopup]);
|
|
|
|
const cachedWiki = activeWikiSlug ? wikiCache[activeWikiSlug] : undefined;
|
|
|
|
useEffect(() => {
|
|
if (!activeWikiSlug) {
|
|
setIsActiveWikiLoading(false);
|
|
setActiveWikiError(null);
|
|
return;
|
|
}
|
|
|
|
if (cachedWiki && (cachedWiki.__fetched || cachedWiki.id === "__not_found__")) {
|
|
setIsActiveWikiLoading(false);
|
|
if (cachedWiki.id === "__not_found__") {
|
|
setActiveWikiError("Không tìm thấy wiki cho entity đã chọn.");
|
|
} else {
|
|
setActiveWikiError(null);
|
|
}
|
|
return;
|
|
}
|
|
|
|
let disposed = false;
|
|
(async () => {
|
|
setIsActiveWikiLoading(true);
|
|
setActiveWikiError(null);
|
|
try {
|
|
const row = await fetchWikiBySlug(activeWikiSlug);
|
|
if (disposed) return;
|
|
|
|
if (row) {
|
|
let versionContent = row.content;
|
|
try {
|
|
if (row.content_sample?.[0]?.id) {
|
|
const res = await getContentByVersionWikiId(row.content_sample[0].id);
|
|
if (res?.data?.content) {
|
|
versionContent = res.data.content;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to fetch version content:", err);
|
|
}
|
|
|
|
if (disposed) return;
|
|
setWikiCache((prev) => ({
|
|
...prev,
|
|
[activeWikiSlug]: { ...row, content: versionContent, __fetched: true },
|
|
}));
|
|
} else {
|
|
setWikiCache((prev) => ({
|
|
...prev,
|
|
[activeWikiSlug]: { id: "__not_found__", project_id: "" },
|
|
}));
|
|
setActiveWikiError("Không tìm thấy wiki cho entity đã chọn.");
|
|
}
|
|
} catch (err) {
|
|
if (disposed) return;
|
|
setActiveWikiError(err instanceof Error ? err.message : "Không tải được wiki.");
|
|
} finally {
|
|
if (!disposed) setIsActiveWikiLoading(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
disposed = true;
|
|
};
|
|
}, [activeWikiSlug, cachedWiki]);
|
|
|
|
const handleWikiLinkRequest = useCallback(async ({ slug, rect }: { slug: string; rect: DOMRect }) => {
|
|
const linkedEntityIds = relations.wikiEntityIdsBySlug[slug] || [];
|
|
const linkedEntities = linkedEntityIds
|
|
.map((entityId) => relations.entitiesById[entityId] || null)
|
|
.filter((entity): entity is Entity => Boolean(entity));
|
|
|
|
if (linkedEntities.length === 1) {
|
|
selectEntity(linkedEntities[0].id, { preferredWikiSlug: slug });
|
|
return;
|
|
}
|
|
|
|
if (!wikiCache[slug] && !relations.wikiBySlug[slug]) {
|
|
try {
|
|
const row = await fetchWikiBySlug(slug);
|
|
if (row) setWikiCache((prev) => ({ ...prev, [slug]: row }));
|
|
} catch (err) {
|
|
console.error("Load wiki by slug failed", err);
|
|
}
|
|
}
|
|
|
|
if (!linkedEntities.length) return;
|
|
|
|
const popupWidth = 240;
|
|
const popupHeight = Math.min(240, linkedEntities.length * 44 + 20);
|
|
const { top, left } = computeFixedPopupPosition(rect, popupWidth, popupHeight);
|
|
|
|
setLinkEntityPopup({
|
|
slug,
|
|
entities: linkedEntities,
|
|
top,
|
|
left,
|
|
});
|
|
}, [relations.entitiesById, relations.wikiBySlug, relations.wikiEntityIdsBySlug, selectEntity, wikiCache]);
|
|
|
|
const helperText = isRelationsLoading
|
|
? `Đang index entity/wiki ${relationsProgress.completed}/${relationsProgress.total || "?"}`
|
|
: relationsStatus || `Features: ${data.features.length}`;
|
|
|
|
return (
|
|
<div className="relative min-h-screen overflow-hidden bg-gray-950 text-gray-100">
|
|
<div className="relative min-h-screen">
|
|
{isBackgroundVisibilityReady ? (
|
|
<Map
|
|
mode="select"
|
|
renderDraft={data}
|
|
labelContextDraft={mapLabelContextDraft}
|
|
labelTimelineYear={timelineDraftYear}
|
|
selectedFeatureIds={selectedFeatureIds}
|
|
onSelectFeatureIds={setSelectedFeatureIds}
|
|
backgroundVisibility={backgroundVisibility}
|
|
geometryVisibility={geometryVisibility}
|
|
allowGeometryEditing={false}
|
|
applyGeometryBindingFilter={true}
|
|
onHoverFeatureChange={handleMapHoverChange}
|
|
highlightFeatures={activeEntityGeometries}
|
|
focusFeatureCollection={activeEntityGeometries}
|
|
focusRequestKey={entityFocusToken}
|
|
focusPadding={activeEntityId && isLargeScreen ? { top: 84, right: sidebarWidth + 80, bottom: 116, left: 84 } : { top: 84, right: 84, bottom: 116, left: 84 }}
|
|
/>
|
|
) : (
|
|
<div className="h-screen w-full bg-[#0b1220]" />
|
|
)}
|
|
|
|
<TimelineBar
|
|
year={timelineDraftYear}
|
|
onYearChange={handleTimelineYearChange}
|
|
timeRange={timeRange}
|
|
onTimeRangeChange={handleTimeRangeChange}
|
|
isLoading={isTimelineLoading}
|
|
disabled={false}
|
|
statusText={timelineStatus}
|
|
style={activeEntityId && isLargeScreen ? { right: `${sidebarWidth + 32}px` } : undefined}
|
|
/>
|
|
|
|
<div className={mapLayersStyles.panel}>
|
|
<div className={`${mapLayersStyles.header} ${isMapLayersCollapsed ? mapLayersStyles.headerCollapsed : ""}`}>
|
|
<div>
|
|
<div className={mapLayersStyles.title}>Map Layers</div>
|
|
<div className={mapLayersStyles.subtitle}>{helperText}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsMapLayersCollapsed(!isMapLayersCollapsed)}
|
|
className={mapLayersStyles.collapseButton}
|
|
aria-label={isMapLayersCollapsed ? "Expand Map Layers" : "Collapse Map Layers"}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={`${mapLayersStyles.collapseIcon} ${isMapLayersCollapsed ? mapLayersStyles.iconRotated : ""}`}
|
|
>
|
|
<polyline points="18 15 12 9 6 15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className={`${mapLayersStyles.content} ${isMapLayersCollapsed ? mapLayersStyles.contentCollapsed : ""}`}>
|
|
<div>
|
|
<div className={mapLayersStyles.sectionHeader}>
|
|
<span>Background</span>
|
|
<div className={mapLayersStyles.actions}>
|
|
<button
|
|
type="button"
|
|
onClick={handleShowAllBackgroundLayers}
|
|
className={mapLayersStyles.actionButton}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleHideAllBackgroundLayers}
|
|
className={mapLayersStyles.actionButton}
|
|
>
|
|
Off
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className={mapLayersStyles.listContainer}>
|
|
{BACKGROUND_LAYER_OPTIONS.map((layer) => {
|
|
const active = Boolean(backgroundVisibility[layer.id]);
|
|
return (
|
|
<button
|
|
key={layer.id}
|
|
type="button"
|
|
onClick={() => handleToggleBackgroundLayer(layer.id)}
|
|
className={`${mapLayersStyles.listItem} ${
|
|
active ? mapLayersStyles.listItemActiveSky : mapLayersStyles.listItemInactive
|
|
}`}
|
|
>
|
|
<div className={mapLayersStyles.listItemLeft}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.itemHashIcon}
|
|
>
|
|
<line x1="4" y1="9" x2="20" y2="9" />
|
|
<line x1="4" y1="15" x2="20" y2="15" />
|
|
<line x1="10" y1="3" x2="8" y2="21" />
|
|
<line x1="16" y1="3" x2="14" y2="21" />
|
|
</svg>
|
|
<span className={mapLayersStyles.itemName}>{layer.label}</span>
|
|
</div>
|
|
|
|
{active ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.eyeIcon}
|
|
>
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.eyeIconInactive}
|
|
>
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
|
<line x1="1" y1="1" x2="23" y2="23" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className={mapLayersStyles.sectionTitle}>
|
|
Geometry
|
|
</div>
|
|
<div className={mapLayersStyles.listContainer}>
|
|
{GEO_TYPE_KEYS.map((typeKey) => {
|
|
const active = geometryVisibility[typeKey] !== false;
|
|
return (
|
|
<button
|
|
key={typeKey}
|
|
type="button"
|
|
onClick={() => {
|
|
setGeometryVisibility((prev) => ({
|
|
...prev,
|
|
[typeKey]: prev[typeKey] === false,
|
|
}));
|
|
}}
|
|
className={`${mapLayersStyles.listItem} ${
|
|
active ? mapLayersStyles.listItemActiveEmerald : mapLayersStyles.listItemInactive
|
|
}`}
|
|
>
|
|
<div className={mapLayersStyles.listItemLeft}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.itemHashIcon}
|
|
>
|
|
<line x1="4" y1="9" x2="20" y2="9" />
|
|
<line x1="4" y1="15" x2="20" y2="15" />
|
|
<line x1="10" y1="3" x2="8" y2="21" />
|
|
<line x1="16" y1="3" x2="14" y2="21" />
|
|
</svg>
|
|
<span className={mapLayersStyles.itemName}>
|
|
{typeKey.replaceAll("_", " ")}
|
|
</span>
|
|
</div>
|
|
|
|
{active ? (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.eyeIcon}
|
|
>
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className={mapLayersStyles.eyeIconInactive}
|
|
>
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
|
<line x1="1" y1="1" x2="23" y2="23" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{hoverAnchor && hoverEntities.length > 0 ? (
|
|
<div
|
|
className="absolute z-30 w-[320px] max-w-[calc(100vw-2rem)]"
|
|
style={{
|
|
left: clampNumber(hoverAnchor.point.x + 18, 16, typeof window !== "undefined" ? window.innerWidth - 340 : hoverAnchor.point.x + 18),
|
|
top: clampNumber(hoverAnchor.point.y - 8, 16, typeof window !== "undefined" ? window.innerHeight - 280 : hoverAnchor.point.y - 8),
|
|
}}
|
|
onMouseEnter={() => {
|
|
hoverPopupHoveredRef.current = true;
|
|
clearHoverHideTimer();
|
|
}}
|
|
onMouseLeave={() => {
|
|
hoverPopupHoveredRef.current = false;
|
|
setHoverAnchor(null);
|
|
}}
|
|
>
|
|
<div className="overflow-hidden rounded-xl border border-white/10 bg-slate-950/95 shadow-xl backdrop-blur">
|
|
{hoverEntities.length > 1 ? (
|
|
<div className="border-b border-white/10 px-4 py-3">
|
|
<div className="text-sm font-semibold text-white">Related Entities</div>
|
|
<div className="mt-1 text-xs text-slate-400">
|
|
Geometry #{String(hoverAnchor.featureId)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="max-h-[252px] overflow-y-auto">
|
|
<div className="grid gap-2 p-3">
|
|
{hoverEntities.map((entity) => (
|
|
<button
|
|
key={entity.id}
|
|
type="button"
|
|
onClick={() => {
|
|
selectEntity(entity.id, {
|
|
sourceFeatureId: hoverAnchor.featureId,
|
|
focusMap: true,
|
|
selectGeometry: true,
|
|
});
|
|
setHoverAnchor(null);
|
|
}}
|
|
className="w-full rounded-lg border border-white/10 bg-white/[0.03] px-3 py-3 text-left transition hover:border-sky-400/40 hover:bg-sky-500/10"
|
|
>
|
|
<div className="truncate text-sm font-semibold text-white">
|
|
{entity.name}
|
|
</div>
|
|
<div
|
|
className="mt-1 text-xs leading-5 text-slate-400"
|
|
style={{
|
|
display: "-webkit-box",
|
|
WebkitLineClamp: 3,
|
|
WebkitBoxOrient: "vertical",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
{entity.description?.trim() || "Không có mô tả."}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{activeEntity ? (
|
|
<aside className="absolute bottom-4 right-4 top-4 z-20 max-w-[calc(100vw-2rem)]">
|
|
<PublicWikiSidebar
|
|
entity={activeEntity}
|
|
wiki={activeWiki}
|
|
isLoading={isActiveWikiLoading}
|
|
error={activeWikiError}
|
|
onClose={() => {
|
|
setActiveEntityId(null);
|
|
setActiveWikiSlug(null);
|
|
setActiveWikiError(null);
|
|
setLinkEntityPopup(null);
|
|
setSelectedFeatureIds([]);
|
|
}}
|
|
onWikiLinkRequest={handleWikiLinkRequest}
|
|
sidebarWidth={sidebarWidth}
|
|
onSidebarWidthChange={setSidebarWidth}
|
|
maxDragWidth={maxDragWidth}
|
|
/>
|
|
</aside>
|
|
) : null}
|
|
</div>
|
|
|
|
{linkEntityPopup ? (
|
|
<div
|
|
ref={linkEntityPopupRef}
|
|
className="fixed z-[60] w-[240px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-950"
|
|
style={{ top: linkEntityPopup.top, left: linkEntityPopup.left }}
|
|
>
|
|
<div className="border-b border-gray-200 px-3 py-2 dark:border-gray-800">
|
|
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
Related Entities
|
|
</div>
|
|
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
/wiki/{linkEntityPopup.slug}
|
|
</div>
|
|
</div>
|
|
<div className="max-h-[220px] overflow-y-auto p-2">
|
|
<div className="grid gap-1">
|
|
{linkEntityPopup.entities.map((entity) => (
|
|
<button
|
|
key={entity.id}
|
|
type="button"
|
|
onClick={() => {
|
|
selectEntity(entity.id, { preferredWikiSlug: linkEntityPopup.slug });
|
|
setLinkEntityPopup(null);
|
|
}}
|
|
className="rounded-lg px-3 py-2 text-left text-sm text-gray-700 transition hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.04] dark:hover:text-white"
|
|
>
|
|
{entity.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
async function fetchAllEntities(): Promise<Entity[]> {
|
|
const items: Entity[] = [];
|
|
const seen = new Set<string>();
|
|
let cursor: string | undefined;
|
|
|
|
while (true) {
|
|
const page = await fetchEntities({ q: "", limit: ENTITY_PAGE_LIMIT, cursor });
|
|
if (!page.length) break;
|
|
|
|
for (const entity of page) {
|
|
if (!entity?.id || seen.has(entity.id)) continue;
|
|
seen.add(entity.id);
|
|
items.push(entity);
|
|
}
|
|
|
|
if (page.length < ENTITY_PAGE_LIMIT) break;
|
|
const nextCursor = page[page.length - 1]?.id;
|
|
if (!nextCursor || nextCursor === cursor) break;
|
|
cursor = nextCursor;
|
|
}
|
|
|
|
return items;
|
|
}
|
|
|
|
async function fetchAllWikisForEntity(entityId: string): Promise<Wiki[]> {
|
|
const items: Wiki[] = [];
|
|
const seen = new Set<string>();
|
|
let cursor: string | undefined;
|
|
|
|
while (true) {
|
|
const page = await searchWikisByTitle("", {
|
|
entityId,
|
|
limit: WIKI_PAGE_LIMIT,
|
|
cursor,
|
|
});
|
|
if (!page.length) break;
|
|
|
|
for (const wiki of page) {
|
|
if (!wiki?.id || seen.has(wiki.id)) continue;
|
|
seen.add(wiki.id);
|
|
items.push(wiki);
|
|
}
|
|
|
|
if (page.length < WIKI_PAGE_LIMIT) break;
|
|
const nextCursor = page[page.length - 1]?.id;
|
|
if (!nextCursor || nextCursor === cursor) break;
|
|
cursor = nextCursor;
|
|
}
|
|
|
|
return items;
|
|
}
|
|
|
|
async function mapWithConcurrency<T>(
|
|
items: T[],
|
|
concurrency: number,
|
|
worker: (item: T, index: number) => Promise<void>
|
|
): Promise<void> {
|
|
const runnerCount = Math.max(1, Math.min(concurrency, items.length));
|
|
let nextIndex = 0;
|
|
|
|
await Promise.all(
|
|
Array.from({ length: runnerCount }, async () => {
|
|
while (true) {
|
|
const current = nextIndex++;
|
|
if (current >= items.length) return;
|
|
await worker(items[current], current);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
|
|
function pushUniqueString(target: Record<string, string[]>, key: string, value: string) {
|
|
if (!target[key]) {
|
|
target[key] = [value];
|
|
return;
|
|
}
|
|
if (!target[key].includes(value)) {
|
|
target[key].push(value);
|
|
}
|
|
}
|
|
|
|
function normalizeRelationArrays(target: Record<string, string[]>) {
|
|
for (const key of Object.keys(target)) {
|
|
target[key] = Array.from(new Set(target[key]));
|
|
}
|
|
}
|
|
|
|
function buildEntityLabelContextDraft(
|
|
draft: FeatureCollection,
|
|
geometryEntityIds: Record<string, string[]>,
|
|
entitiesById: Record<string, Entity>
|
|
): FeatureCollection {
|
|
if (!draft.features.length) return draft;
|
|
|
|
return {
|
|
...draft,
|
|
features: draft.features.map((feature) => {
|
|
const entityIds = geometryEntityIds[String(feature.properties.id)] || [];
|
|
if (!entityIds.length) return feature;
|
|
|
|
const candidates = entityIds.map((id) => {
|
|
const entity = entitiesById[id] || null;
|
|
const name = String(entity?.name || id).trim();
|
|
if (!name) return null;
|
|
return {
|
|
id,
|
|
name,
|
|
time_start: entity?.time_start ?? null,
|
|
time_end: entity?.time_end ?? null,
|
|
};
|
|
}).filter((candidate) => candidate !== null);
|
|
|
|
return {
|
|
...feature,
|
|
properties: {
|
|
...feature.properties,
|
|
entity_id: entityIds[0] || null,
|
|
entity_ids: entityIds,
|
|
entity_name: candidates[0]?.name || null,
|
|
entity_names: candidates.map((candidate) => candidate.name),
|
|
entity_label_candidates: candidates,
|
|
},
|
|
};
|
|
}),
|
|
};
|
|
}
|
|
|
|
function clampNumber(value: number, min: number, max: number): number {
|
|
if (!Number.isFinite(value)) return min;
|
|
if (value < min) return min;
|
|
if (value > max) return max;
|
|
return value;
|
|
}
|
|
|
|
function computeFixedPopupPosition(rect: DOMRect, width: number, height: number) {
|
|
const margin = 12;
|
|
const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1440;
|
|
const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 900;
|
|
const preferredLeft = rect.right + margin;
|
|
const maxLeft = Math.max(margin, viewportWidth - width - margin);
|
|
const left = Math.min(preferredLeft, maxLeft);
|
|
|
|
const preferredTop = rect.top;
|
|
const maxTop = Math.max(margin, viewportHeight - height - margin);
|
|
const top = Math.max(margin, Math.min(preferredTop, maxTop));
|
|
|
|
return { top, left };
|
|
}
|