Merge pull request #3 from OSINT-for-Ukraine/artillery-range

Add circle with artillery range on click on artillery list
OSINT-for-Ukraine · Apr 26, 2024 · b1e8ce1 · b1e8ce1
2 parents e8f0920 + 633145c
commit b1e8ce1
Show file tree

Hide file tree

Showing 17 changed files with 337 additions and 44 deletions.
diff --git a/public/artillery-grey.png b/public/artillery-grey.png
diff --git a/public/artillery-white.png b/public/artillery-white.png
diff --git a/public/artillery.png b/public/artillery.png
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -2,17 +2,17 @@ import { urlFromEnv } from "../common/utilities";
 
 // TODO: relegate these URLs entirely to environment variables
 // const CONFIG_URL = urlFromEnv('CONFIG_EXT')
-const MILITARY_DATA_URL = urlFromEnv("MILITARY_EXT");  // TODO data here the data is fetched from API
+const MILITARY_DATA_URL = urlFromEnv("MILITARY_EXT"); // TODO data here the data is fetched from API
 const EVENT_DATA_URL = urlFromEnv("EVENTS_EXT");
 const ASSOCIATIONS_URL = urlFromEnv("ASSOCIATIONS_EXT");
 const SOURCES_URL = urlFromEnv("SOURCES_EXT");
 const SITES_URL = urlFromEnv("SITES_EXT");
 const REGIONS_URL = urlFromEnv("REGIONS_EXT");
 const SHAPES_URL = urlFromEnv("SHAPES_EXT");
-const LOGIN_URL = urlFromEnv("LOGIN_EXT")
+const LOGIN_URL = urlFromEnv("LOGIN_EXT");
 // In order for this way of authorization to work I had to modify json-server-auth module
 // to disable token expiration jwt.verify(token, constants_1.JWT_SECRET_KEY, {ignoreExpiration:true});
-const token = urlFromEnv("JWT_SECRET_KEY")
+const token = urlFromEnv("JWT_SECRET_KEY");
 
 const domainMsg = (domainType) =>
   `Something went wrong fetching ${domainType}. Check the URL or try disabling them in the config file.`;
@@ -55,12 +55,11 @@ export function fetchDomain() {
     const eventPromise = Promise.all(
       EVENT_DATA_URL.map((url) =>
         fetch(url, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Authorization': 'Bearer ' + token
-          }
-          }
-          )
+            Authorization: "Bearer " + token,
+          },
+        })
           .then((response) => response.json())
           .catch(() => handleError("events"))
       )
@@ -76,12 +75,11 @@ export function fetchDomain() {
         );
       } else {
         associationsPromise = fetch(ASSOCIATIONS_URL, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Authorization': 'Bearer ' + token
-          }
-          }
-          )
+            Authorization: "Bearer " + token,
+          },
+        })
           .then((response) => response.json())
           .catch(() => handleError(domainMsg("associations")));
       }
@@ -97,12 +95,11 @@ export function fetchDomain() {
         );
       } else {
         sourcesPromise = fetch(SOURCES_URL, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Authorization': 'Bearer ' + token
-          }
-          }
-          )
+            Authorization: "Bearer " + token,
+          },
+        })
           .then((response) => response.json())
           .catch(() => handleError(domainMsg("sources")));
       }
@@ -456,3 +453,20 @@ export function rehydrateState() {
     type: REHYDRATE_STATE,
   };
 }
+
+export const UPDATE_CURRENT_ARTILLERY = "UPDATE_CURRENT_ARTILLERY";
+export function updateCurrentArtillery(currentArtillery) {
+  return {
+    type: UPDATE_CURRENT_ARTILLERY,
+    currentArtillery: currentArtillery,
+  };
+}
+
+export const UPDATE_CURRENT_MILITARY_POSITIONS =
+  "UPDATE_CURRENT_MILITARY_POSITIONS";
+export function updateCurrentMilitaryPositions(updateCurrentMilitaryPositions) {
+  return {
+    type: UPDATE_CURRENT_MILITARY_POSITIONS,
+    currentMilitaryPositions: updateCurrentMilitaryPositions,
+  };
+}
diff --git a/src/assets/artillery.png b/src/assets/artillery.png
diff --git a/src/common/data/copy.json b/src/common/data/copy.json
@@ -228,6 +228,11 @@
             }
           }
         }
+      },
+      "artillery": {
+        "button": "Artillery",
+        "title": "Artillery range",
+        "description": "Select an item from the list and click on the map to see the range."
       }
     },
     "timeline": {

diff --git a/src/common/utilities.js b/src/common/utilities.js
@@ -591,3 +591,8 @@ export const isOdd = (num) => num % 2 !== 0;
 export function isEmptyObject(o) {
   return o == null || (typeof o === "object" && !Object.keys(o).length);
 }
+
+export const displayRangeInKm = (range) => {
+  const rangeInKm = (range / 1000).toFixed(2);
+  return rangeInKm + "km";
+};
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -70,7 +70,6 @@ class Dashboard extends Component {
 
   handleMilitarySelect(selected) {
     // this.props.actions.updateSelected(matchedEvents);
-
   }
 
   handleSelect(selected, axis) {

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
@@ -25,6 +25,7 @@ import {
 import { ToolbarButton } from "./controls/atoms/ToolbarButton";
 import { FullscreenToggle } from "./controls/FullScreenToggle";
 import DownloadPanel from "./controls/DownloadPanel";
+import { displayRangeInKm } from "../common/utilities";
 
 class Toolbar extends Component {
   constructor(props) {
@@ -105,7 +106,7 @@ class Toolbar extends Component {
         <p>{panels.narratives.description}</p>
         {this.props.narratives.map((narr) => {
           return (
-            <div className="panel-action action">
+            <div key={narr.id} className="panel-action action">
               <button
                 onClick={() => {
                   this.goToNarrative(narr);
@@ -203,6 +204,41 @@ class Toolbar extends Component {
     );
   }
 
+  renderToolbarArtilleryPanel() {
+    const { panels } = this.props.toolbarCopy;
+
+    return (
+      <TabPanel>
+        <hgroup>
+          <h3> {panels.artillery.label} </h3>
+          <p> {panels.artillery.description} </p>
+        </hgroup>
+        <ul>
+          {this.props.artilleries.map((artillery) => {
+            return (
+              <li
+                onClick={() => {
+                  this.props.actions.updateCurrentArtillery(artillery);
+                }}
+                key={artillery.id}
+              >
+                <div className="artillery-item">
+                  <p className="title"> {artillery.title} </p>
+                  <p className="range"> {displayRangeInKm(artillery.range)}</p>
+                  {this.props?.currentArtillery?.id === artillery.id ? (
+                    <div>
+                      <span className="selected">selected</span>
+                    </div>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </TabPanel>
+    );
+  }
+
   renderToolbarTab(_selected, label, iconKey, key) {
     return (
       <ToolbarButton
@@ -235,6 +271,22 @@ class Toolbar extends Component {
     );
   }
 
+  renderToolbarArtilleryTab(id, label) {
+    return (
+      <ToolbarButton
+        isActive={this.state._selected === id && this.state._active === true}
+        iconKey="Artillery"
+        onClick={() => {
+          this.selectTab(id);
+        }}
+        label={label}
+      >
+        <div className="artillery-icon" role="img"></div>
+        <div className="tab-caption">Artillery</div>
+      </ToolbarButton>
+    );
+  }
+
   renderToolbarPanels() {
     const { features, narratives } = this.props;
     const classes =
@@ -249,6 +301,7 @@ class Toolbar extends Component {
         {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
         {features.USE_SHAPES ? this.renderToolbarShapePanel() : null}
         {features.USE_DOWNLOAD ? this.renderToolbarDownloadPanel() : null}
+        {this.renderToolbarArtilleryPanel()}
       </div>
     );
   }
@@ -263,6 +316,7 @@ class Toolbar extends Component {
 
         return (
           <div
+            key={idx}
             className={classes}
             onClick={() => {
               this.selectTab(idx);
@@ -335,6 +389,10 @@ class Toolbar extends Component {
                   panels.download.icon
                 )
               : null}
+            {this.renderToolbarArtilleryTab(
+              filtersIdx + 1,
+              panels.artillery.label
+            )}
             {features.USE_FULLSCREEN && (
               <FullscreenToggle language={this.props.language} />
             )}
@@ -361,10 +419,9 @@ class Toolbar extends Component {
           <br />
           Free software made by <br />{" "}
           <a href="https://forensic-architecture.org">Forensic Architecture </a>
-            <br />
-            and
-            <a href="https://www.bellingcat.com/"> Bellingcat</a>
-
+          <br />
+          and
+          <a href="https://www.bellingcat.com/"> Bellingcat</a>
         </div>
       </div>
     );
@@ -390,6 +447,8 @@ class Toolbar extends Component {
 function mapStateToProps(state) {
   return {
     filters: selectors.getFilters(state),
+    artilleries: state.domain.artilleries,
+    currentArtillery: state.app.currentArtillery,
     categories: selectors.getCategories(state),
     narratives: selectors.selectNarratives(state),
     shapes: selectors.getShapes(state),

diff --git a/src/components/controls/atoms/ToolbarButton.jsx b/src/components/controls/atoms/ToolbarButton.jsx
@@ -1,12 +1,18 @@
-export function ToolbarButton({ isActive, iconKey, onClick, label }) {
+export function ToolbarButton({ isActive, iconKey, onClick, label, children }) {
   return (
     <div
       className={isActive ? "toolbar-tab active" : "toolbar-tab"}
       key={iconKey}
       onClick={onClick}
     >
-      <i className="material-icons">{iconKey}</i>
-      <div className="tab-caption">{label}</div>
+      {children ? (
+        children
+      ) : (
+        <>
+          <i className="material-icons">{iconKey}</i>
+          <div className="tab-caption">{label}</div>
+        </>
+      )}
     </div>
   );
 }

diff --git a/src/components/space/carto/Map.jsx b/src/components/space/carto/Map.jsx
@@ -29,6 +29,7 @@ import {
   isLongitude,
   calculateTotalClusterPoints,
   calcClusterSize,
+  displayRangeInKm,
 } from "../../../common/utilities";
 
 // NB: important constants for map, TODO: make statics
@@ -54,6 +55,8 @@ class Map extends Component {
       clusters: [],
     };
     this.styleLocation = this.styleLocation.bind(this);
+    this.circle = null;
+    this.circleCenter = null;
   }
 
   componentDidMount() {
@@ -164,6 +167,32 @@ class Map extends Component {
     map.keyboard.disable();
     map.zoomControl.remove();
 
+    map.on("click", (e) => {
+      if (this.circle) {
+        map.removeLayer(this.circle);
+        map.removeLayer(this.circleCenter);
+      }
+      if (this.props.app.currentArtillery) {
+        const { range } = this.props.app.currentArtillery;
+        const center = Object.values(e.latlng);
+        this.circle = L.circle(Object.values(center), {
+          color: "red",
+          fillColor: "transparent",
+          radius: range || 0,
+        }).addTo(map);
+
+        const circleIcon = L.icon({
+          iconUrl: "artillery.png",
+          iconSize: [20, 20],
+        });
+
+        this.circleCenter = L.marker(center, { icon: circleIcon }).addTo(map);
+      } else {
+        this.circle = null;
+        this.circleCenter = null;
+      }
+    });
+
     map.on("moveend", () => {
       this.alignLayers();
       this.updateClusters();
@@ -186,6 +215,7 @@ class Map extends Component {
       if (this.svgRef.current !== null)
         this.svgRef.current.classList.remove("hide");
     });
+
     window.addEventListener("resize", () => {
       this.alignLayers();
     });
@@ -446,6 +476,10 @@ class Map extends Component {
         coloringSet={this.props.app.coloringSet}
         filterColors={this.props.ui.filterColors}
         features={this.props.features}
+        currentMilitaryPositions={this.props.app.currentMilitaryPositions}
+        setCurrentMilitaryPositions={(militaryPositions) =>
+          this.props.actions.updateCurrentMilitaryPositions(militaryPositions)
+        }
       />
     );
   }
@@ -517,6 +551,30 @@ class Map extends Component {
     );
   }
 
+  renderCurrentArtillery() {
+    const handleClick = () => {
+      this.props.actions.updateCurrentArtillery(null);
+      if (this.circle) {
+        this.map.removeLayer(this.circle);
+      }
+    };
+    return (
+      <Portal node={document.getElementById("timeline-wrapper")}>
+        <div className="current-artillery-presentation">
+          <p>
+            Showing &nbsp; <span>{this.props.app.currentArtillery.title} </span>
+            &nbsp; artillery of &nbsp;
+            <span>
+              {displayRangeInKm(this.props.app.currentArtillery.range)}
+            </span>
+            &nbsp; range
+          </p>
+          <button onClick={handleClick}>X</button>
+        </div>
+      </Portal>
+    );
+  }
+
   render() {
     const { isShowingSites, isFetchingDomain } = this.props.app.flags;
     const checkMobile = isMobileOnly || window.innerWidth < 600;
@@ -535,6 +593,7 @@ class Map extends Component {
         {this.renderEvents()}
         {this.renderClusters()}
         {this.renderSelected()}
+        {this.props.app.currentArtillery ? this.renderCurrentArtillery() : null}
       </>
     ) : null;
 
@@ -569,6 +628,8 @@ function mapStateToProps(state) {
     },
     app: {
       views: state.app.associations.views,
+      currentArtillery: state.app.currentArtillery,
+      currentMilitaryPositions: state.app.currentMilitaryPositions,
       selected: selectors.selectSelected(state),
       highlighted: state.app.highlighted,
       map: state.app.map,