Merging in changes from Eugene and Prisha: formating of clickable box…

…es, nationality select on map, removing name filters for people on map

package.json

@@ -5,47 +5,51 @@
   "homepage": "https://data.chcdatabase.com/",
   "dependencies": {
     "-": "0.0.1",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
     "@mongodb-js/react-mapbox-gl-leaflet": "^1.0.0",
     "@octokit/rest": "^18.12.0",
     "@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1",
     "@sintef/prune-cluster": "^2.1.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "animate.css": "^4.1.1",
+    "babel": "^6.23.0",
     "bfg": "^0.3.0",
-    "bootstrap": "^5.1.0",
-    "caniuse-lite": "^1.0.30001352",
+    "bootstrap": "^5.3.3",
+    "caniuse-lite": "^1.0.30001673",
     "d3": "^5.16.0",
     "d3-force-boundary": "0.0.2",
-    "d3-scale-chromatic": "^3.0.0",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-textwrap": "^3.0.0",
     "env-cmd": "^10.1.0",
     "git": "^0.1.5",
     "heatmap.js": "^2.0.5",
+    "html-webpack-plugin": "^5.5.0",
     "leaflet": "^1.7.1",
-    "leaflet-defaulticon-compatibility": "^0.1.1",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "leaflet-heatmap-layer-react": "^1.0.0",
     "leaflet.heat": "^0.2.0",
     "leaflet.markercluster": "^1.5.0",
     "mapbox-gl": "^2.5.1",
     "mapbox-gl-leaflet": "0.0.15",
     "mini-css-extract-plugin": "^2.9.1",
     "neo4j-driver": "^4.3.2",
-    "npm": "^6.14.4",
+    "npm": "^6.14.18",
     "prunecluster": "^2.1.0",
     "react": "^17.0.2",
     "react-alert": "^7.0.3",
     "react-alert-template-mui": "^1.0.7",
-    "react-bootstrap": "^2.0.0-beta.4",
+    "react-bootstrap": "^2.10.5",
     "react-csv": "^2.2.2",
     "react-d3-graph": "^2.6.0",
     "react-d3-library": "^1.1.8",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-heatmap": "^1.0.6",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0",
+    "react-icons": "^4.12.0",
     "react-input-range": "^1.3.0",
     "react-js-pagination": "^3.0.3",
     "react-json-to-csv": "^1.2.0",
@@ -55,19 +59,19 @@
     "react-leaflet-markercluster": "^2.0.0",
     "react-paginate": "^7.1.3",
     "react-router": "^5.2.0",
-    "react-router-dom": "^6.14.1",
-    "react-scripts": "^5.0.1",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "^4.0.3",
     "react-select": "^4.3.1",
     "react-tooltip": "^4.2.21",
     "sass-google-fonts": "^1.0.1",
     "save": "^2.4.0",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^2.0.3",
+    "semantic-ui-react": "^2.1.5",
     "terser-webpack-plugin": "^5.3.10",
     "unslugify": "^1.0.4",
     "use-neo4j": "^0.3.4",
     "web-vitals": "^1.1.2",
-    "webpack": "^5.94.0"
+    "webpack": "^5.64.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -89,6 +93,11 @@
   ],
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "sass": "^1.38.0"
+    "sass": "^1.80.4"
+  },
+  "resolutions": {
+     "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0" 
   }
 }

src/Assets/indexes/translate.json

@@ -1108,9 +1108,9 @@
 },
 
 "long_load_message" : {
-  "en": "This query can take up to 30 seconds for larger entities. Thank you for your patience.",
-  "zh": "对于较大的实体，此查询最多可能需要 30 秒。 感谢您的耐心等待。",
-  "tw": "對於較大的實體，此查詢最多可能需要 30 秒。 感謝您的耐心等待。"
+  "en": "This query can take up to a few minutes for larger entities. Thank you for your patience.",
+  "zh": "对于较大的实体，此查询最多可能需要几分钟。 感谢您的耐心等待。",
+  "tw": "對於較大的實體，此查詢最多可能需要幾分鐘。 感謝您的耐心等待。"
 },
 
 "_COMMENT": "END OF TRANSLATIONS =========================================="

src/Components/Map/FilterMap.js

@@ -13,6 +13,7 @@ import translate from "../../Assets/indexes/translate.json";
 import nationality from "../../Assets/indexes/nationality.json";
 import family_trans from "../../Assets/indexes/religious_family.json";
 import cat_trans from "../../Assets/indexes/categories.json";
+import '../../Styles/Css/map.css'
 
 /////////////////////////////////////////////////////////////////////////////////////////////////////
 // COMPONENT ////////////////////////////////////////////////////////////////////////////////////////
@@ -39,12 +40,19 @@ function FilterMap(props) {
     }, 1000);
   };
 
-  const loadNatIndex = (
-    inputValueNat: string,
-    callback: (options: props.natIndex) => void
-  ) => {
+  // FILTER THE NATIONALITY OPTIONS BASED ON INPUT
+  const loadNatIndex = (inputValueNat, callback) => {
+    // Filter nationalities based on the input value
+    const filteredOptions = Object.keys(nationality[0])
+      .filter((key) => key.toLowerCase().includes(inputValueNat.toLowerCase()))
+      .map((key) => ({
+        value: key,
+        label: nationality[0][key][props.language], // Return the appropriate language value
+      }));
+
+    // Return filtered options
     setTimeout(() => {
-      callback(props.fetchNatIndex(inputValueNat));
+      callback(filteredOptions);
     }, 1000);
   };
 
@@ -219,72 +227,6 @@ function FilterMap(props) {
                 </Col>
               </Row>
 
-              {/* NAME SELECT ////////////////////////////////////////////////////////////////// */}
-              <Row className="mb-1">
-                <Col>
-                  <Form.Group>
-                    <Row>
-                      <Col>
-                        <Form.Label
-                          className="filter_label mb-0"
-                          data-tip
-                          data-for="family_name"
-                        >
-                          {translate[0]["family_name"][props.language]}
-                        </Form.Label>
-                        <ReactTooltip
-                          id="family_name"
-                          place="right"
-                          effect="solid"
-                        >
-                          {translate[0]["enter_name"][props.language]}
-                        </ReactTooltip>
-                        <Form.Control
-                          type="text"
-                          name="family_name_western"
-                          aria-label={
-                            translate[0]["family_name"][props.language]
-                          }
-                          value={props.family_name_western}
-                          onChange={(value) => props.handleChange(value)}
-                        />
-                      </Col>
-                    </Row>
-                  </Form.Group>
-                </Col>
-                <Col>
-                  <Form.Group>
-                    <Row>
-                      <Col>
-                        <Form.Label
-                          className="filter_label mb-0"
-                          data-tip
-                          data-for="given_name"
-                        >
-                          {translate[0]["given_name"][props.language]}
-                        </Form.Label>
-                        <ReactTooltip
-                          id="given_name"
-                          place="right"
-                          effect="solid"
-                        >
-                          {translate[0]["enter_name"][props.language]}
-                        </ReactTooltip>
-                        <Form.Control
-                          type="text"
-                          name="given_name_western"
-                          aria-label={
-                            translate[0]["given_name"][props.language]
-                          }
-                          value={props.given_name_western}
-                          onChange={(value) => props.handleChange(value)}
-                        />
-                      </Col>
-                    </Row>
-                  </Form.Group>
-                </Col>
-              </Row>
-
               {/* PERS AFF SELECT ////////////////////////////////////////////////////////////////// */}
               <Form.Group className="mb-1">
                 <Row>
@@ -334,9 +276,7 @@ function FilterMap(props) {
                       placeholder={translate[0]["type_to"][props.language]}
                       onInputChange={props.handleMapNatInputChange}
                       getOptionLabel={(option) =>
-                        nationality[0][
-                          option.value.replace(/\s|\//g, "_").toLowerCase()
-                        ][props.language]
+                        nationality[0][option.value][props.language]
                       }
                       defaultInputValue={props.inputValueNat}
                       onChange={(option) => props.handleChangeData(option)}

src/Components/Map/LeafletMap.js

@@ -193,12 +193,18 @@ function LeafletMap(props) {
 
    // LOADING STATE RETURN
    function checkLoad(props) {
-     if (props.content === "loading") { return (
+    if (props.content === "loading") { return (
          <div className="list_container">
            <div className="list_float d-flex align-items-center justify-content-center">
-             <Row><Col>
-               <Spinner animation="border" role="status" variant="light"><span className="visually-hidden hide">{translate[0]["loading"][props.language]}</span></Spinner>
-             </Col></Row>
+            <Row className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+              <Col className="text-center">
+                <Spinner animation="border" role="status" variant="light">
+                  <span className="visually-hidden hide">{translate[0]["loading"][props.language]}</span>
+                </Spinner>
+                <div className="p-2 text-danger" style={{ marginTop: '20px' }}>
+                {translate[0]["long_load_message"][props.language]}
+                </div>
+            </Col></Row>
            </div>
          </div>
       )} else {return null}

src/Styles/Css/filters.css

@@ -3082,7 +3082,7 @@ textarea.form-control-lg {
 }
 .btn-danger:hover {
   color: #000;
-  background-color: #f89191;
+  background-color: #dc3545;
   border-color: #f88b8b;
 }
 .btn-check:focus + .btn-danger, .btn-danger:focus {

src/Styles/Css/map.css

@@ -3082,8 +3082,8 @@ textarea.form-control-lg {
 }
 .btn-danger:hover {
   color: #000;
-  background-color: #f89191;
-  border-color: #f88b8b;
+  background-color: #dc3545;
+  border-color: #dc3545;
 }
 .btn-check:focus + .btn-danger, .btn-danger:focus {
   color: #000;