The introduction panel currently displays static content about the project. It would be good to have a top-line number of the total number of incidents on the map displayed in this intro panel as well.

See here:

Is this something we'd like to fix?

This would allow the map to be maximized from within an iframe.

This button should not appear on mobile, probably.

Add support for multiple languages

This issue requires:

1. updating the project to always use a strategy similar to this one that uses the copy.js files for language-specific translations.
2. adding a UI component to easily switch between languages (suitable for mobile so ideally something subtle in the top-right corner, for example)
3. creating the placeholders for the translations in English, Ukrainian, and Russian. we could then help with getting the translated strings there.

Currently when we build and deploy the timemap, the final date that loads up on the timeline is the date of the last build, this is because that configuration is coming from config.js (store.app.timeline.range config value).

We would like to refactor the app so that the final date is always today, and the initial date is a given number of days in the past, calculated from today.

This print is from 28th and since the last deploy was on the 24th, that's the max date we see in the timeline.

Another idea:

I tried to throw the data onto a Mapbox map and enabled clustering. The interaction feels smoother: https://ukraine-civilian-harm.vercel.app/

What do you think? Would you consider replacing the Leaflet map in the app?

Need to find root cause of this rectangle appearing, it's pretty easy to replicate:

• open the timemap
• drag with the mouse and the black-bordered rectangle will appear

I believe this glitch was introduced in some of the recent PRs.

The crash happens here:

index.js:84 Uncaught TypeError: Cannot read properties of undefined (reading 'range')
    at Supercluster.getClusters (index.js:84:1)
    at Map.updateClusters (Map.js:210:1)
    at Map.<anonymous> (Map.js:238:1)
    at callCallback (react-dom.development.js:13092:1)

Repro video:

While fixing #65, I noticed that without a complex migration webpack 5, we are stuck on Node 16. I took this as motivation to try and migrate this repo to vite and manged to get to a working state at fspoettel#1.

Results of the migration:

• gets rid of a large amount of config code in this repo
• removes 1800 packages from the npm tree
• reduces final bundle size by 100kb gzipped - this is a product of a few node libraries having been packaged accidentally previously.
• development server is much faster.
• tests are working again (moved them vitest to avoid duplicate config)
• deprecated sass syntax has been removed

If this is something you would be interested in, I'm happy to finish the PR. cc @breezykermo, maybe this is interesting for upstream. I'm not willing to do this work again any time soon though. ^^

Although Twitter and Telegram represent the vast majority of sources we have for the events, there are a few other platforms for which we would like to add embed support, namely:

• youtube - for example CIV0143, 2022/03/01, maybe with react-youtube
• instagram- for example CIV0133, 2022/02/28, maybe with react-instagram-embed

current embeds are used here

full thread in #47 but this commit did a hot fix for a bug where the satellite toggle was blocked here. The commit hardcoded a value, but the detection of satellite vs default map should be independent of the mapbox tiles id

I implemented mobile support very quickly over the weekend. This should be cleaned up a bit before we make the repository public.

Some ideas for our map after looking at #43. Feel free to close the issue if you don't think these are improvements.

You can copy these styles here if you want to try them:

• satellite
• monochrome

Use satellite-streets istd. of satellite

Having labels on the satellite map helps a great deal with identifying cities, regions and streets. Screenshot below is a custom mapbox style created from the satellite streets preset, no other adjustments.

I also used a lighter accent color to help with contrast with the dark satellite layer.

Use monochrome as default layer

Screenshot below is a custom mapbox style created from the monchrome light preset, no other adjustments. Labels and lines are a bit less constrasted in this style and help clusters stick out more.

Initial discussion here #25 (review). I will add a button to sidebar that opens a panel with language selection, but it would be very helpful if somebody contributed to the overall design.

For the sidebar button it would be amazing to have a Cyrillic-Latin-flavoured icon like this, but with characters unique to Latin/Ukrainian/Russian alphabets. There is a good range of possible combinations like LЪҐ, SЭЄ, WЫЇ.

For the language selection large touch-screen-friendly buttons with texts in respective languages would be ideal. The currently selected option needs to stand out as such, and hover/focus/active states need to be supported.

I would advice against using flags for a list of languages because flags are not languages. There is a great number of Russian-speaking people (or even peoples) who don't identify with the state symbols of Russia.

Add timeline support to mobile versions

Currently, the TimeMap is usable in a mobile device but the timeline at the bottom is hidden (see image below).

We want to allow for the use of this timeline in mobile devices, the challenge being the screen width forcing the days in the timeline to be unusable. Perhaps we could have a tab/overlay which would be "toggleable" that would show/hide the timeline in a readable format that could even use the fullscreen size (maybe in a vertical version compared to the current desktop horizontal version)

Current desktop timeline (not readable if it's directly show in mobile)

Current mobile view

Add filter-panel support to mobile versions

(This issue is similar to #1 )

Currently, the TimeMap is usable in a mobile device but the filter-panel at the bottom is hidden (see image below).

We want to allow for the use of the filters in mobile devices, the challenge being the screen width forcing the filters to go outside the screen. Perhaps we could have a tab/overlay which would be "toggleable" that would show/hide the filters with an extra Done button to close and see the map with the filters.

Current desktop filters (they overflow if directly show in mobile)

Current mobile view

The dates of the incidents appear to be one day earlier in the exported JSON file. Could be due to incorrect treatment of the timezone during conversion?

The attack on Kramatorsk:

The very first incident:

Hello!

Thank you for this important work. Here's a bug report:

Steps to reproduce

1. Go to the home page of the site.
2. Scroll down to "Feedback".
3. Click on the link to the feedback form.

Current Behavior

The form is inaccessible to people outside the organisation of the form's owner (presumably, Bellingcat).

Expected Behavior

The form should be accessible so that people can submit feedback.

Kind regards,
Jakub

As a side note, thanks for all the hard work on this map! As a Ukrainian and also the creator of Leaflet (and other deps like Supercluster), I really appreciate what you're doing.

Environment

• Your version (in package.json) or git commit hash: the one currently deployed on Bellingcat (as of April 5)
• Your operating system and version: macOS, reproducible in all browsers

Steps to reproduce

1. Zoom in the map.

Current Behavior

Clusters are flickering annoyingly:

Expected Behavior

No flickering, everything's smooth.

When selecting a date in the timeline, the event stack is missing an element. in below example, 8 events are (correctly) displayed on the map while 7 events are displayed in the stack.

Digging a bit into this, I noticed that there might be a problem with how the selection range is determined in the Layout component. handleSelect receives a selected event and then calls this.findEventIdx which performs a binary search. In the example screenshot above, the selected event has id 208 while the binary search returns id 176. The pointer then starts one id below 176 which leads to 176 being ignored for this time range - yet showing up on the map.

  handleSelect(selected, axis) {
    if (selected.length <= 0) {
      this.props.actions.updateSelected([]);
      return;
    }

    const matchedEvents = [];
    const TIMELINE_AXIS = 0;
    if (axis === TIMELINE_AXIS) {
      matchedEvents.push(selected);
      // find in events
      const { events } = this.props.domain;
      const idx = this.findEventIdx(selected);
      // check events before
      let ptr = idx - 1;

      while (
        ptr >= 0 &&
        events[idx].datetime.getTime() === events[ptr].datetime.getTime()
      ) {
        if (events[ptr].id !== selected.id) {
          matchedEvents.push(events[ptr]);
        }
        ptr -= 1;
      }
      // check events after
      ptr = idx + 1;

      while (
        ptr < events.length &&
        events[idx].datetime.getTime() === events[ptr].datetime.getTime()
      ) {
        if (events[ptr].id !== selected.id) {
          matchedEvents.push(events[ptr]);
        }
        ptr += 1;
      }
    } else {
      // Map..
      const std = { ...selected };
      delete std.sources;
      Object.values(std).forEach((ev) => matchedEvents.push(ev));
    }

    this.props.actions.updateSelected(matchedEvents);
  }

Environment

• version: 0.1.0 - master
• running on Mac OS 12.4, M1 Hardware
• npm -v -> 8.15.0

Steps to reproduce (for bugs only)

1. clean clone of master branch, no changes to source. git status is clean.
2. run npm install in top dir of repo
3. peer dependency conflict error 💥

(I have attached logs)

Current Behavior

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@"^18.2.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"^18.0.0" from the root project
npm ERR!     peer react-dom@"^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" from [email protected]
npm ERR!     node_modules/react-portal
npm ERR!       react-portal@"^4.2.0" from the root project
npm ERR!     2 more (react-twitter-embed, @testing-library/react)
npm ERR!   3 more (react-portal, react-twitter-embed, @testing-library/react)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 0.14.0 < 18.0.0" from [email protected]
npm ERR! node_modules/react-device-detect
npm ERR!   react-device-detect@"^1.6.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">= 0.14.0 < 18.0.0" from [email protected]
npm ERR!   node_modules/react-device-detect
npm ERR!     react-device-detect@"^1.6.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See ~/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!    ~/.npm/_logs/2022-08-12T21_59_45_584Z-debug-0.log

Expected Behavior

Successful installation of dependencies without conflicting dependencies.
eresolve-report.txt
2022-08-12T21_59_45_584Z-debug-0.log

eresolve-report.txt
2022-08-12T21_59_45_584Z-debug-0.log

What do you guys think about using something like this for the timeline to make it more informative?

Here I experimented a bit with the data exported from the app:
https://observablehq.com/@ilyabo/bellingcat-civilian-harm-in-ukraine-beeswarm-timeline

The circle size has no meaning right now, but could be used to highlight e.g. the more important events.

Add an option to switch the basemap tiles to a satellite/aerial view from Mapbox tiles (Historic, not current imagery.)

This issue requires:

1. Creating a new component for a map switcher that changes the active map layers in Leaflet.

From this comment

As for GDPR:
you need explicit Consent if the underlying iframe sets cookies. some embeds have a noCookie param or domain in which case you don't. Telegram and Twitter both set cookies so you need consent here.
All external data connections need to be documented in a privacy policy. Anything making a connection to a service not owned by Bellingcat would need to be documented here. This includes stuff like Google Fonts (yes, really). This also includes 3rd iframe embeds that do not set cookies as they might still log a user's IP.
The use of the injected Google TagManager script w/o consent is a direct violation of GDPR as well.

We need to have a standard consent overlay when 1st visiting the platform. This overlay should not appear when ?cover=false.