feat: geomap visualization height depends on the list

Author: andreishket

vis/js/templates/Geomap/HeightContainer/index.tsx

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+import { useSelector } from "react-redux";
+
+import { getMapHeight } from "./selectors";
+
+export const HeightContainer: FC<PropsWithChildren> = ({ children }) => {
+  const height = useSelector(getMapHeight);
+
+  return <div style={{ height }}>{children}</div>;
+};

vis/js/templates/Geomap/HeightContainer/selectors.ts

@@ -0,0 +1,3 @@
+import { State } from "@/js/types";
+
+export const getMapHeight = (state: State) => state.chart.height;

vis/js/templates/Geomap/index.tsx

@@ -8,6 +8,7 @@ import { useData } from "@/hooks/useData";
 import { selectPaper } from "@/js/actions";
 import { AllPossiblePapersType } from "@/js/types";
 
+import { HeightContainer } from "./HeightContainer";
 import { OPTIONS } from "./options";
 import { Pin } from "./Pin";
 import { getHoveredItemId, getSelectedItemId } from "./selectors";
@@ -28,22 +29,24 @@ export const Geomap: FC = () => {
   );
 
   return (
-    <MapContainer {...MAP} className="geomap_container">
-      <TileLayer {...LAYER} />
-      {filteredData &&
-        filteredData.map((item) => {
-          const { safe_id: id } = item;
-          const isActive = selectedItemId === id || hoveredItemId === id;
-
-          return (
-            <Pin
-              key={id + isActive}
-              data={item}
-              isActive={isActive}
-              onClick={handlePinClick}
-            />
-          );
-        })}
-    </MapContainer>
+    <HeightContainer>
+      <MapContainer className="geomap_container" {...MAP}>
+        <TileLayer {...LAYER} />
+        {filteredData &&
+          filteredData.map((item) => {
+            const { safe_id: id } = item;
+            const isActive = selectedItemId === id || hoveredItemId === id;
+
+            return (
+              <Pin
+                key={id + isActive}
+                data={item}
+                isActive={isActive}
+                onClick={handlePinClick}
+              />
+            );
+          })}
+      </MapContainer>
+    </HeightContainer>
   );
 };

vis/js/templates/Geomap/options.ts

@@ -3,7 +3,7 @@ import { Options } from "./types";
 export const OPTIONS: Options = {
   MAP: {
     center: [48.216651235748074, 16.39589688527869],
-    zoom: 4,
+    zoom: 2,
     minZoom: 2,
     maxBounds: [
       [-85, -180],

vis/stylesheets/modules/_geomap.scss

@@ -1,7 +1,7 @@
 /* ########### Geomap ########### */
 
 .geomap_container {
-  height: 100vh;
+  height: 100%;
   width: 100%;
 }