From 6d9fcb637978d5ae3c33ab031a556b54699852ba Mon Sep 17 00:00:00 2001
From: Kavi Gupta <kavi@berkeley.edu>
Date: Mon, 2 Sep 2024 17:33:57 -0400
Subject: [PATCH] no need for map ids

---
 react/src/components/article-panel.tsx    |  2 +-
 react/src/components/comparison-panel.tsx |  1 -
 react/src/components/map.tsx              | 11 ++++++++---
 react/src/components/mapper-panel.tsx     |  1 -
 react/src/quiz/quiz-question.tsx          |  4 ++--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/react/src/components/article-panel.tsx b/react/src/components/article-panel.tsx
index bd0350ed..26b4dd95 100644
--- a/react/src/components/article-panel.tsx
+++ b/react/src/components/article-panel.tsx
@@ -52,7 +52,7 @@ export function ArticlePanel({ article } : { article: Article }) {
                 <p></p>
 
                 <div ref={map_ref}>
-                    <Map id="map"
+                    <Map
                         longname={article.longname}
                         related={article.related as NormalizeProto<IRelatedButtons>[]}
                         article_type={article.articleType}
diff --git a/react/src/components/comparison-panel.tsx b/react/src/components/comparison-panel.tsx
index fa000858..ed4928fa 100644
--- a/react/src/components/comparison-panel.tsx
+++ b/react/src/components/comparison-panel.tsx
@@ -152,7 +152,6 @@ export function ComparisonPanel(props: { joined_string: string, universes: strin
                 <ComparisonMap
                     longnames={props.datas.map(x => x.longname)}
                     colors={props.datas.map((_, i) => color(i))}
-                    id="map_combined"
                     basemap={{ type: "osm" }}
                 />
             </div>
diff --git a/react/src/components/map.tsx b/react/src/components/map.tsx
index ba3ec504..bc2c0d35 100644
--- a/react/src/components/map.tsx
+++ b/react/src/components/map.tsx
@@ -18,7 +18,6 @@ import { UNIVERSE_CONTEXT } from '../universe';
 
 export interface MapGenericProps {
     height?: string,
-    id: string,
     basemap: Basemap,
 }
 
@@ -31,11 +30,17 @@ class MapGeneric<P extends MapGenericProps> extends React.Component<P> {
     private basemap_props: null | Basemap = null;
     protected map: L.Map | undefined = undefined
     private exist_this_time: string[] = []
+    private id: string;
+
+    constructor(props: P) {
+        super(props);
+        this.id = "map-" + Math.random().toString(36).substring(2);
+    }
 
     render() {
         return (
             <div className="map-container-for-testing">
-                <div id={this.props.id} className="map" style={{ background: "#fff8f0", height: this.props.height || 400 }}>
+                <div id={this.id} className="map" style={{ background: "#fff8f0", height: this.props.height || 400 }}>
                     {/* place this on the right of the map */}
                     <div style={
                         { zIndex: 1000, position: "absolute", right: 0, top: 0, padding: "1em" }
@@ -73,7 +78,7 @@ class MapGeneric<P extends MapGenericProps> extends React.Component<P> {
     }
 
     async componentDidMount() {
-        const map = new L.Map(this.props.id, {
+        const map = new L.Map(this.id, {
             layers: [], center: new L.LatLng(0, 0), zoom: 0,
             zoomSnap: this.delta, zoomDelta: this.delta, wheelPxPerZoomLevel: 60 / this.delta
         });
diff --git a/react/src/components/mapper-panel.tsx b/react/src/components/mapper-panel.tsx
index 7ef17948..78701551 100644
--- a/react/src/components/mapper-panel.tsx
+++ b/react/src/components/mapper-panel.tsx
@@ -192,7 +192,6 @@ function MapComponent(props: MapComponentProps) {
         }}>
             <div style={{ height: "90%", width: "100%" }}>
                 <DisplayedMap
-                    id="mapper"
                     color_stat={color_stat}
                     filter={filter}
                     geography_kind={props.geography_kind}
diff --git a/react/src/quiz/quiz-question.tsx b/react/src/quiz/quiz-question.tsx
index 90981d30..b5c04ac3 100644
--- a/react/src/quiz/quiz-question.tsx
+++ b/react/src/quiz/quiz-question.tsx
@@ -44,7 +44,7 @@ interface QuizQuestionProps {
     no_footer: boolean
     quiz: { kind: "juxtastat" | "retrostat", name: number | string}
     on_select: (letter: "A" | "B") => void
-    length: number
+    length: number,
 }
 
 function QuizQuestion(props: QuizQuestionProps & {
@@ -165,7 +165,7 @@ function JuxtastatQuizQuestion(props: QuizQuestionProps & {
         {...props}
         get_question={() => render_question(props.question.question)}
         get_option={(letter) => props.question[`longname_${letter}`]}
-        get_demo={(letter) => <Map id={`map_${letter}this.props.ident`}
+        get_demo={(letter) => <Map
             longname={props.question[`longname_${letter}`]}
             basemap={{ type: "osm" }}
         />}