[ { "path": ".dockerignore", "content": "node_modules/\nbuild/\nexample.config.js\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n plugins: [],\n\n parserOptions: {\n sourceType: \"module\",\n ecmaFeatures: {\n jsx: true,\n },\n },\n settings: {\n react: {\n version: \"detect\",\n },\n },\n extends: [\n \"eslint:recommended\",\n \"plugin:react/recommended\",\n \"plugin:react/jsx-runtime\",\n \"plugin:react-hooks/recommended\",\n \"prettier\",\n ],\n env: {\n browser: true,\n es2022: true,\n jest: true,\n },\n rules: {\n \"react/prop-types\": 0,\n }\n};\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "\n\n\n\n\nEnvironment\n-----------\n\n* Your version (in package.json) or git commit hash\n* Your operating system and version:\n\n\n\nSteps to reproduce (for bugs only)\n-----------------------------\n\n\n\n1.\n2.\n3.\n\nCurrent Behavior\n----------------\n\n\n\n\nExpected Behavior\n-----------------\n\n\n\n\n\n" }, { "path": ".github/workflows/cd.yml", "content": "name: CD\non:\n push:\n branches: [ develop ]\n# pull_request:\n# branches: [ develop ]\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - name: Trigger CD build\n uses: peter-evans/repository-dispatch@v1\n with:\n token: ${{ secrets.CI_DISPATCH_TOKEN }}\n repository: forensic-architecture/configs\n event-type: remote-build\n client-payload: '{\"runtime_args\": \"timemap\", \"branch\": \"${GITHUB_REF##*/}\"}'\n\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\non:\n push:\n branches: [ develop ]\n pull_request:\n branches: [ develop ]\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n with:\n ref: ${{ github.head_ref }}\n - uses: actions/setup-node@v2-beta\n with:\n node-version: '12'\n\n - run: npm install\n - run: cp example.config.js config.js\n - run: npm test\n env:\n CI: true\n - run: npm run lint\n env:\n CI: true\n" }, { "path": ".gitignore", "content": ".idea/\nbuild/\nnode_modules/\n\ndev.config.js\n!config/webpack*.config.js\n!config/getHttpsConfig.js\n\n\ntags\ntags.lock\ntags.temp\n\n.eslintcache\n\nsrc/\\.DS_Store\nsrc/assets/fonts\n\n\\.DS_Store\n\ntags\n" }, { "path": ".prettierrc", "content": "" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - \"stable\"\ncache:\n directories:\n - node_modules\nbefore_script:\n - cp example.config.js config.js\ninstall:\n - npm install\nscript:\n - npm run lint\n - npm run build\n - npm run test\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to timemap \n\nHello! Thanks for being part of the Bellingcat Tech Community 💪 We really appreciate your ideas, thoughts, and involvement. Read on for guidance on how to contribute to this project 🏆\n\nContributions to this project are released to the public under the project's open source license.\n\nPlease note that this project is released with a [Contributor Code of Conduct](https://github.com/bellingcat/.github/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.\n\n## What do I need to know to help?\n### Javascript / React / Redux\nIn order to contribute code upstream, you'll likely need to have a sense of ES6\nJavascript, React, and Redux. If these terms are new to you, or not as familiar\nas you might like, here's a good tutorial to get you up to speed:\n\n- [Building a voting app with Redux and React](https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)\n\n### Node JS and Docker\nTimemap doesn't actually use these technologies; but the main way of getting up\nand running with a data provider for timemap,\n[datasheet-server](https://github.com/bellingcat/datasheet-server),\ndoes, and so they're helpful to know.\n\n## Do I need to be an experienced JS developer? \nContributing can of course be about contributing code, but it can also take\nmany other forms. A great amount of work that remains to be done to make\ntimemap a usable community tool doesn't involve writing any code. The following\nare all very welcome contributions:\n\n- Writing, updating or correcting documentation\n- Fixing an open issue\n- Requesting a feature\n- Reporting a bug\n\nIf you're new to this project, you could check the issues that are tagged\n[\"good first issue\"](https://github.com/bellingcat/ukraine-timemap/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).\n\nThese are a range of the issues that have come up in conversation for which we\nwould welcome community contributions. These are, however, by no means\nexhaustive! If you see a gap or have an idea, please open up an issue to\ndiscuss it with timemap's maintainers.\n\n## How do I make a contribution? \n\n1. Make sure you have a [GitHub account](https://github.com/signup/free)\n2. Fork the repository on GitHub. This is necessary so that you can push your\n changes, as you can't do this directly on our repo.\n3. Get set up with a local instance of timemap and datasheet-server. The easiest\n way to do this is by reading [this blog post on the forensic architecture website](https://forensic-architecture.org/investigation/timemap-for-cartographic-platforms).\n4. [Join the Bellingcat Discord server](https://discord.gg/bellingcat), this is our main community hub. Check out the #tool-and-sites and #tech-support channels for support with the ukraine-timemap.\n Also consider joining the [Forensic Architecture Discord](https://discord.gg/PjHKHJD5KX), the #timemap and #support channels are the two best channels to ask questions about setting timemap up.\n\nOnce you're set up with a local copy of timemap and datasheet-server, you can\nstart modifying code and making changes. \n\nWhen you're ready to submit a contribution, you can do it by making a pull\nrequest from a branch on your forked copy of timemap to this repository. You\ncan do this with the following steps:\n1. Push the changes to a remote repository. If the changes you have made\n address a bug, you should name it `bug/{briefdesc}`, where `{briefdesc}` is\n a hyphen-separated description of your change. If instead you are\n contributing changes as a feature request, name it `feature/{briefdesc`}. If\n in doubt, prefix your branch with `feature/`.\n2. Submit a pull request to the `develop` branch of `forensic-architecture/timemap`.\n3. Wait for the pull request to be reviewed by a maintainer.\n4. Make changes to the pull request if the reviewing maintainer recommends\n them.\n5. Celebrate your success once your pull request is merged!\n\n## How do I validate my changes?\nWe are still working on a set of tests. Right now, it is enough to confirm that\nthe application runs as expected with `npm run dev`. If your changes introduce\nother issues, a maintainer will flag it in stage 3 of the submission process\nabove.\n\n## Credits \nThis contributing guide is based on the guidelines of both the \n[SuperCollider contributing guide](https://raw.githubusercontent.com/supercollider/supercollider/develop/CONTRIBUTING.md),\nand the [nteract contributing\nguide](https://github.com/nteract/nteract/blob/master/CONTRIBUTING.md) (two\nexcellent open source projects!).\n\nThanks to [Scott Carver](https://github.com/scztt) for advice on how to put\na guide together.\n" }, { "path": "Dockerfile", "content": "FROM mhart/alpine-node:10.11\n\nLABEL authors=\"Lachlan Kermode \"\n\n# Install app dependencies\nCOPY package.json /www/package.json\nRUN cd /www; yarn\n\n# Copy app source\nCOPY . /www\nWORKDIR /www\nRUN yarn build\n\n# files available to copy at /www/build\n" }, { "path": "LICENSE.md", "content": "Do No Harm License\n\n**Preamble**\n\nMost software today is developed with little to no thought of how it will be used, or the consequences for our society and planet.\n\nAs software developers, we engineer the infrastructure of the 21st century. We recognise that our infrastructure has great power to shape the world and the lives of those we share it with, and we choose to consciously take responsibility for the social and environmental impacts of what we build.\n\nWe envisage a world free from injustice, inequality, and the reckless destruction of lives and our planet. We reject slavery in all its forms, whether by force, indebtedness, or by algorithms that hack human vulnerabilities. We seek a world where humankind is at peace with our neighbours, nature, and ourselves. We want our work to enrich the physical, mental and spiritual wellbeing of all society.\n\nWe build software to further this vision of a just world, or at the very least, to not put that vision further from reach.\n\n**Terms**\n\n*Copyright* (c) 2019 Forensic Architecture. All rights reserved.\nRedistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:\n\n1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.\n\n2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.\n\n3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.\n\n4. This software must not be used by any organisation, website, product or service that:\n\n a) lobbies for, promotes, or derives a majority of income from actions that support or contribute to:\n * sex trafficking\n * human trafficking\n * slavery\n * indentured servitude\n * gambling\n * tobacco\n * adversely addictive behaviours\n * nuclear energy\n * warfare\n * weapons manufacturing\n * war crimes\n * violence (except when required to protect public safety)\n * burning of forests\n * deforestation\n * hate speech or discrimination based on age, gender, gender identity, race, sexuality, religion, nationality\n\n b) lobbies against, or derives a majority of income from actions that discourage or frustrate:\n * peace\n * access to the rights set out in the Universal Declaration of Human Rights and the Convention on the Rights of the Child\n * peaceful assembly and association (including worker associations)\n * a safe environment or action to curtail the use of fossil fuels or prevent climate change\n * democratic processes\n\n5. All redistribution of source code or binary form, including any modifications must be under these terms. You must inform recipients that the code is governed by these conditions, and how they can obtain a copy of this license. You may not attempt to alter the conditions of who may/may not use this software.\n\nWe define:\n\n**Forests** to be 0.5 or more hectares of trees that were either planted more than 50 years ago or were not planted by humans or human made equipment.\n\n**Deforestation** to be the clearing, burning or destruction of 0.5 or more hectares of forests within a 1 year period.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n\n**Attribution**\n\nDo No Harm License [Contributor Covenant][homepage], (pre 1.0),\navailable at https://github.com/raisely/NoHarm\n\n[homepage]: https://github.com/raisely/NoHarm\n\n" }, { "path": "README.md", "content": "

Civilian Harm in Ukraine TimeMap

\n\n

\n\tExplore it in ukraine.bellingcat.com\n\t
\n\tDownload/integrate the data from here (regularly updated dataset)\n

\n\n

\nRead Bellingcat's article about this project in \nEnglish (UK),\nРусский (Россия)\n

\n\n

\n\n\tTimeMap is a tool for exploration, monitoring and classification of incidents in time and space, originally forked from forensic-architecture/timemap.\n\n

\n
\n
\n\n![ukraine.bellingcat.com timemap preview](docs/example-timemap.png)\n\n## Development\n* `npm install` to setup\n* adjust any local configs in [config.js](config.js)\n* `CONFIG=config.js npm run dev` or `npm run dev` if the file is named config.js\n* For more info visit the [original repo](https://github.com/forensic-architecture/timemap)\n\n\n## Deployment\nThis project is now living in github pages and the API has switched to auto-updated S3 files.\nAccess it at https://bellingcat-embeds.ams3.cdn.digitaloceanspaces.com/production/ukr/timemap/api.json\n\nRelease with `npm run deploy`. \n\n## Contributing\nPlease read our [Contribution Guide](./CONTRIBUTING.md) and check our [Issues Page](https://github.com/bellingcat/ukraine-timemap/issues) for desired contributions, and feel free to suggest your own. \n\n## Configurations\n\n
\nDocumentation of config.js \n\n* `SERVER_ROOT` - points to the API base address\n* `XXXX_EXT` - points to the respective JSONs of the data, for events, sources, and associations\n* `API_DATA` - S3 file address that can be downloaded or integrated into external apps/visualizations\n* `DATE_FMT` and `TIME_FMT` - how to consume the events' date/time from the API\n* `store.app.map` - configures the initial map view and the UX limits\n* `store.app.cluster` - configures how clusters/bubbles are grouped into larger clusters, larger `radius` means bigger cluster bubbles\n* `store.app.timeline` - configure timeline ranges, zoom level options, and default range\n* `store.app.intro` - the intro panel that shows on start\n* `store.app.cover` - configuration for the full page cover, the `description` is a list of markdown entities, can also contain html\n* `store.ui.colors` and `store.ui.maxNumOfColors` are applied to filters, as they are selected\n\nEasiest way to deploy the static files is through \n* `nvm use 16`\n* `npm run build` (rather: `CI=false npm run build`)\n* copy the files to your server, for example to `/var/www/html`\n\n
\n" }, { "path": "config.js", "content": "const one_day = 1440;\n\nconst config = {\n title: \"ukraine\",\n display_title: \"Civilian Harm\\nin Ukraine\",\n SERVER_ROOT: \"https://bellingcat-embeds.ams3.cdn.digitaloceanspaces.com/production/ukr\",\n EVENTS_EXT: \"/timemap/events.json\",\n SOURCES_EXT: \"/timemap/sources.json\",\n ASSOCIATIONS_EXT: \"/timemap/associations.json\",\n API_DATA: \"https://bellingcat-embeds.ams3.cdn.digitaloceanspaces.com/production/ukr/timemap/api.json\",\n // MEDIA_EXT: \"/api/media\",\n DATE_FMT: \"M/D/YYYY\",\n TIME_FMT: \"HH:mm\",\n\n store: {\n app: {\n debug: true,\n map: {\n // anchor: [49.02421913, 31.43836003],\n anchor: [48.3326259, 33.19951447],\n maxZoom: 18,\n minZoom: 4,\n startZoom: 6,\n // maxBounds: []\n },\n cluster: { radius: 50, minZoom: 5, maxZoom: 12 },\n associations: {\n defaultCategory: \"Weapon System\",\n },\n timeline: {\n dimensions: {\n height: 90,\n contentHeight: 90,\n },\n zoomLevels: [\n // { label: \"Zoom to 2 weeks\", duration: 14 * one_day },\n // { label: \"Zoom to 1 month\", duration: 31 * one_day },\n // { label: \"Zoom to 6 months\", duration: 6 * 31 * one_day },\n { label: \"Zoom to 1 year\", duration: 12 * 31 * one_day },\n { label: \"Zoom to 2 years\", duration: 2 * 12 * 31 * one_day },\n { label: \"Zoom to 5 years\", duration: 5 * 12 * 31 * one_day },\n ],\n range: {\n /**\n * Initial date range shown on map load.\n * Use [start, end] (strings in ISO 8601 format) for a fixed range.\n * Use undefined for a dynamic initial range based on the browser time.\n */\n initial: [\"2022-02-01T00:00:00.000Z\", \"2025-08-31T23:59:59.999Z\"],\n /** The number of days to show when using a dynamic initial range */\n initialDaysShown: 31*12,\n limits: {\n /** Required. The lower bound of the range that can be accessed on the map. (ISO 8601) */\n lower: \"2022-02-01T00:00:00.000Z\",\n /**\n * The upper bound of the range that can be accessed on the map.\n * Defaults to current browser time if undefined.\n */\n upper: \"2025-08-14T23:59:59.999Z\",\n },\n },\n },\n intro: [\n '
Image: Vyacheslav Madiyevskyy/Reuters
Image: Järva Teataja/Scanpix Baltics via Reuters
',\n 'This map plots out and highlights incidents that have resulted in potential civilian impact or harm since Russia began its invasion of Ukraine. The incidents detailed have been collected by Bellingcat researchers. Included in the map are instances where civilian areas and infrastructure have been damaged or destroyed, where the presence of civilian injuries are visible and/or there is the presence of immobile civilian bodies. Collection for the incidences contained in this map began on February 24, 2022. Users can explore incidents by date and location. We intend this to be a living project that will continue to be updated as long as the conflict persists. For more detailed information about the entries included in this map, please refer to our methodology and explainer article which can be read here.',\n '

Editor\\'s note: An error in our archiving system between October 21 and November 7 led to some incidents being published on our TimeMap before they were fully verified. We have fixed this issue and are working to verify all extra incidents.

',\n ],\n\n flags: { isInfopoup: false, isCover: false },\n cover: {\n title: \"About and Methodology\",\n exploreButton: \"BACK TO THE PLATFORM\",\n description: [\n \"## Scope of Research\",\n \"This database, organised on Forensic Architecture's [TimeMap](https://github.com/forensic-architecture/timemap) platform and customised for this project, is focused on incidents in Ukraine that have resulted in potential civilian harm. These include: incidents where rockets or missiles struck civilian areas, where attacks have resulted in the destruction of civilian infrastructure, where the presence of civilian injuries are visible and/or the presence of immobile civilian bodies. This database began collection on February 24, 2022 and intends to be a living document that will continue to be updated as long as the conflict persists. While we are attempting to collect as many incidents as possible, we cannot possibly guarantee to collect them all nor will we be able to corroborate the locations of all the incidents we collect. Those we do not corroborate the originality or exact location of will not be shown on the map. Therefore, this map is not an exhaustive list of civilian harm in Ukraine but rather a representation of all incidents which we have been able to collect and of which we have been able to determine the exact locations. \",\n \"## Open Source Footage\",\n \"The links in this map are all open source, meaning they are connected to an open link posted online. These sources were collected by Bellingcat researchers and placed in a database from where they are also being archived locally. After collection, our Global Authentication Project members have determined the location of each of these events (you can read more about the Global Authentication Project and its makeup below). Bellingcat staff then cross-referenced these coordinates to ensure their accuracy. The resolution of these geolocations is within 150 metres of where the incident occurred but the public coordinates viewable on the map have been slightly obscured in order to protect the identity of the creators. Because this footage is open source, the users who uploaded the content are not directly affiliated to Bellingcat or our partners. Any opinions that may be contained within the posts are therefore not those of Bellingcat or our partners. Any claims contained within the posts have also not necessarily been confirmed or verified by Bellingcat, particularly in relation to which party may have been responsible for the incidents detailed.\",\n \"## Verification Level\",\n \"The data being collected is checked for originality, basic manipulation, and location by Bellingcat investigators. This level of verification is intended to indicate where incidents took place, when and where there are reasonable visual indications of civilian harm. Our investigation plan for the collection of this material and its uses are informed by the [Berkeley Protocol on Digital Open Source Investigations](https://www.ohchr.org/en/publications/policy-and-methodological-publications/berkeley-protocol-digital-open-source). These incidents are also being collected and archived at a [forensic level](https://mnemonic.org/en/our-work) for potential evidentiary use in the future. That level of in-depth analysis and verification will take many months and our goal with this map is to transparently report on the current situation in Ukraine, as it is happening, for public interest. To be clear, these two processes will be separate.\",\n \"## Descriptions\",\n \"Each incident is accompanied with source links, the exact location determined by our Global Authentication Project and Bellingcat researchers, as well as a brief description of the incident based on what is visually present. The descriptions indicate what is clearly visible but do not attempt to make assumptions about the exact number of casualties or which party to the conflict is responsible due to those factors being difficult to fully determine from short, visual imagery alone.\",\n \"## Filters\",\n \"On the left hand side of the map, a user can toggle between different kinds of areas impacted. We are characterising the areas as residential, industrial, administrative, healthcare, school/childcare, military, commercial, religious, or undefined. Decisions on these classifications are based on visual evidence in the footage and what the area is reportedly used as. We cannot fully exclude or exhaustively search for the potential of military use in some of these areas.\",\n \"## Source Links/Embedding\",\n \"We have chosen to embed the social media links directly onto the platform. Should any be deleted by the uploader, they will still be visible on the map, but data on the post, user and footage will no longer be presented publicly. Where sensitive footage posted by individuals might allow them or their location to be identified, we have sought to preemptively take steps to anonymise these users.\",\n \"## Privacy concerns and respect for the dead \",\n \"This footage is graphic and contains distressing scenes of war and conflict. Many of the areas represented are, at time of writing, also under attack both physically and through online attempts to discredit or harm users posting this content. For these reasons, we have chosen not to share certain posts that might indicate the direct identity of any of the persons filming. We have also filtered out posts that contain images where an immobile body is closely filmed and their identity might be ascertained out of respect for them and their close ones.\",\n \"## A Note on Bellingcat's Global Authentication Project\",\n \"The Global Authentication Project consists of a wide community of open source researchers assisting in Bellingcat research through structured tasks and feedback. Our aim is to authenticate events taking place around the world and fill in the gaps of knowledge that exist, particularly in situations where there are vast quantities of data. In creating a community for those interested in open source research, we are fostering Bellingcat's original aim of solving problems **together**, to diversify our investigations and promote the use of these skills. For this dataset, we are working with many individuals who have Ukrainian language skills and others with local contextual knowledge of the events and places seen on the map. Other participants include individuals skilled in geolocation and chronolocation, with all contributions being vetted by Bellingcat researchers. As we expand the Global Authentication Project in the coming months, more information will be available on our website and Twitter.\",\n \"## Feedback\",\n \"This map will continue to change and be updated for the duration of this conflict. We welcome feedback on our methodology, data collection and take transparency seriously. Should you have any direct feedback about the platform, please indicate it on this [form](https://forms.gle/cV2YAojBoh6h4T3XA).\",\n ],\n },\n toolbar: {\n panels: {\n categories: {\n // TRUE: {\n // icon: \"public\",\n // label: \"Verified\",\n // description: \"todo\",\n // },\n // FALSE: {\n // icon: \"public\",\n // label: \"Unverified\",\n // description: \"todo\",\n // }\n },\n },\n },\n spotlights: {},\n },\n ui: {\n coloring: {\n mode: \"STATIC\",\n maxNumOfColors: 9,\n defaultColor: \"#dfdfdf\",\n colors: [\n \"#7E57C2\",\n \"#F57C00\",\n \"#FFEB3B\",\n \"#D34F73\",\n \"#08B2E3\",\n \"#A1887F\",\n \"#90A4AE\",\n \"#E57373\",\n \"#80CBC4\",\n ],\n },\n card: {\n layout: {\n template: \"sourced\",\n },\n },\n carto: {\n eventRadius: 8,\n },\n timeline: {\n eventRadius: 9,\n },\n tiles: {\n current: \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}\",\n default: \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}\",\n satellite: \"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\"\n },\n },\n features: {\n USE_CATEGORIES: false,\n CATEGORIES_AS_FILTERS: false,\n COLOR_BY_CATEGORY: false,\n COLOR_BY_ASSOCIATION: true,\n USE_ASSOCIATIONS: true,\n USE_FULLSCREEN: true,\n USE_DOWNLOAD: true,\n USE_SOURCES: true,\n USE_SPOTLIGHTS: false,\n USE_SHAPES: false,\n USE_COVER: true,\n USE_INTRO: false,\n USE_SATELLITE_OVERLAY_TOGGLE: true,\n USE_SEARCH: false,\n USE_SITES: false,\n ZOOM_TO_TIMEFRAME_ON_TIMELINE_CLICK: one_day,\n FETCH_EXTERNAL_MEDIA: false,\n USE_MEDIA_CACHE: false,\n GRAPH_NONLOCATED: false,\n NARRATIVE_STEP_STYLES: false,\n CUSTOM_EVENT_FIELDS: [],\n },\n },\n};\n\nexport default config;\n" }, { "path": "docs/configuration.md", "content": "# Configuration\n\n**NOTE: WIP. These settings are currently slightly out of date.**\n\nIn order to make timemap interesting, you need to configure it to read events. When loaded in a browser, timemap queries HTTP endpoint, expecting from them well-defined JSON objects. There are certain endpoints, such as `events`, that are required, while others , such as `filters`, are optional; when provided, they enhance a timemap instance with additional features and capabilities related to the additional data.\n\nThe URLs for these endpoints, as well as other configurable settings in your timemap instance, are read from the `config.js` that you created in step 3 of the setup above. The example contains sensible defaults. This section covers each option in more detail: \n\n| Option | Description | Type | Nullable |\n| ------- | ----------- | ---- | -------- |\n| title | Title of the application, display in the toolbar | String | No |\n| SERVER_ROOT | Base URI for the server | String | No |\n| EVENT_EXT | Endpoint for events, which will be concatenated with SERVER_ROOT | String | No |\n| EVENT_DESC_ROOT | Endpoint for additional metadata for each individual event, concatenated to SERVER_ROOT | String | Yes |\n| CATEGORY_EXT | Endpoint for categories, concatenated with SERVER_ROOT | String | Yes |\n| NARRATIVE_EXT | Endpoint for narratives, concatenated with SERVER_ROOT | String | No |\n| FILTER_TREE_EXT | Endpoint for filters, concatenated with SERVER_ROOT | String | Yes |\n| SITES_EXT | Endpoint for sites, concatenated with SERVER_ROOT | String | Yes |\n| MAP_ANCHOR | Geographic coordinates for original map anchor | Array of numbers | No |\n| features.USE_ASSOCIATIONS | Enable / Disable filters | boolean | No |\n| features.USE_SITES | Enable / Disable sites | boolean | No |\n\nIn this configuration file you'll need to replace the required endpoints with functioning ones. Additionally, you'll want to initialize your application set in `MAP_ANCHOR`, as a (lat, long) pair, which determines the specific location at which the application will center itself on start.\n\n### Data requirements\n\nThis section outlines the data requirements for each HTTP endpoint.\n\nThe sum total of data that is fetched asynchronously in a timemap instance is\nreferred to as the application `domain`. The base endpoint for the domain-- and\nthe paths to required and optional endpoints-- are configured through\na `config.js` file in timemap's root folder (explained in the next section).\n\n#### Required endpoints\n\n1. **Events**: incidents mapped in time and space are called `events`. They must include the following fields:\n\n```json\n[\n {\n \"desc\":\"SOME DESCRIPTION TEXT\",\n \"date\":\"8/23/2011\",\n \"time\":\"18:30\",\n \"location\":\"LOCATION_NAME\",\n \"lat\":\"17.810358\",\n \"long\":\"-18.2251664\",\n \"source\":\"\",\n \"filters\": \"\",\n \"category\": \"\"\n }\n]\n```\n\n\n2. **Categories**: events must be grouped in `categories`. **All `events` must contain one (and only one) `category`.** An event's category determines how it is displayed in the both the timeline and the map. (Category styling is configurable, but by default each category has an associated color, and a separate timeline for events in it.) Categories are designed to aggregate incidents according to some kind of categorical distinction, which will differ depending on your dataset. For example, categories may correspond to population groups, actions committed by particular persons. Categories should probably not be coded according to locality or temporality, as these axes are already represented.\n\n```json\n[\n {\n \"category\":\"Category 00\",\n \"category_label\":\"Category Label\",\n \"group\":\"category_group00\",\n \"group_label\":\"Events\"\n }\n]\n```\n\n#### Optional endpoints\n\n3. **Filters**: `events` can be filterged by multiple `filters`. These will further characterize the event, and allow to select or deselect based on them. Filters are or can be distributed in a tree-like hierarchy, and each node on the tree can be a filter, including those who are not leafs.\n\n```json\n{\n \"key\":\"filters\",\n \"children\": {\n \"filter0\": {\n \"key\": \"filter0 \",\n \"children\": {\n \"filter00\": {\n \"key\": \"filter00\",\n \"children\": {\n \"filter001\": {\n \"key\": \"filter001\",\n \"children\": {}\n }\n }\n },\n \"filter01\": {\n \"key\": \"filter01\",\n \"children\": {}\n }\n }\n },\n \"filter1\": {\n \"key\": \"filter1\",\n \"children\": {\n \"filter10\": {\n \"key\": \"filter10\",\n \"children\": {}\n }\n }\n }\n }\n}\n```\n\n4. **Sites**: sites are labels on the map, aiming to highlight particularly relevant locations that should not be a function of time or filters.\n\n```json\n[\n {\n \"id\":\"1\",\n \"description\":\"SITE_DESCRIPTION\",\n \"site\":\"SITE_LABEL\",\n \"latitude\":\"17.810358\",\n \"longitude\":\"-18.2251664\"\n }\n]\n```\n\n\n" }, { "path": "docs/custom-covers.md", "content": "## Using Timemap with a Custom Cover\n\nBy default, instances of Timemap use no cover. By setting the `USE_COVER` flag\nto true in [config.js][], however, you can use explanatory text and videos that are \ndisplayed when your instance is first loaded.\n\nThe structure you need to specify in `app.cover` in the Redux store overrides\nin config.js is outlined below:\n\n```js\nconst theCover = {\n // The video that plays in the background of the cover. Will otherwise be plain black\n bgVideo: \"https://url-for-background-video.mp4\",\n // Titles sit at the top of the screen\n title: \"My Custom Timemap Instance\",\n subtitle: \"Mapping Events in my personal open source investigation\",\n subsubtitle: \"January 2020\",\n // The main text on the cover. This string is markdown, so you can include links and styles.\n description: \"A brief description of what the platform shows. [Links](https://forensic-architecture.org) can be written in markdown.\",\n // Header videos sit above the 'EXPLORE' button, and can include a basic description, as well as translations.\n headerVideos: [\n {\n buttonTitle: \"ABOUT\",\n desc: \"This film details the investigation's methodology and findings at a high level.\",\n file: \"\"https://url-to-video.mp4,\n poster: \"https://url-for-thumbnail.png\",\n title: \"About the Investigation\",\n translations: [\n {\n code: \"ITA\",\n desc: \"Italian translation\",\n paths: [\"https://url-to-video.mp4\"],\n title: \"Translated Title\",\n },\n {\n code: \"RUS\",\n desc: \"Russian translation\",\n paths: [\"https://url-to-video.mp4\"],\n title: \"Translated Title\",\n }\n ]\n },\n {\n buttonTitle: \"HOW TO USE\",\n desc: \"This step-by-step guide explores the way that the platform arranges and presents information.\",\n file: \"\"https://url-to-video.mp4,\n poster: \"https://url-for-thumbnail.png\",\n title: \"How to Use the Platform\"\n }\n ],\n // These videos sit at the bottom of the page, beneath the rest of the\n // content. The max length of the list is 4 for stylistic reasons, any later\n // indices will not be shown.\n videos: [\n {\n buttonTitle: \"VERIFICATION:\",\n buttonSubtitle: \"How we verified data\",\n desc: \"This video shows how we verified the data.\",\n file: \"https://url-to-video.mp4\",\n poster: \"https://url-for-thumbnail.png\",\n title: \"Verifying data in this investigation\"\n },\n {\n buttonTitle: \"VERIFICATION:\",\n buttonSubtitle: \"How we verified data\",\n desc: \"This video shows how we verified the data.\",\n file: \"https://url-to-video.mp4\",\n poster: \"https://url-for-thumbnail.png\",\n title: \"Verifying data in this investigation\"\n },\n {\n buttonTitle: \"VERIFICATION:\",\n buttonSubtitle: \"How we verified data\",\n desc: \"This video shows how we verified the data.\",\n file: \"https://url-to-video.mp4\",\n poster: \"https://url-for-thumbnail.png\",\n title: \"Verifying data in this investigation\"\n },\n {\n buttonTitle: \"VERIFICATION:\",\n buttonSubtitle: \"How we verified data\",\n desc: \"This video shows how we verified the data.\",\n file: \"https://url-to-video.mp4\",\n poster: \"https://url-for-thumbnail.png\",\n title: \"Verifying data in this investigation\"\n }\n ]\n}\n\nmodule.exports = {\n // ... other values in config.js\n store: {\n app: {\n cover: theCover,\n // ...\n }\n // ... \n }\n}\n```\n" }, { "path": "example.config.js", "content": "const config = {\n title: 'example',\n display_title: 'example',\n SERVER_ROOT: 'http://localhost:4040',\n EVENTS_EXT: '/api/timemap_data/export_events/deeprows',\n ASSOCIATIONS_EXT: '/api/timemap_data/export_associations/deeprows',\n SOURCES_EXT: '/api/timemap_data/export_sources/deepids',\n SITES_EXT: '',\n SHAPES_EXT: '',\n DATE_FMT: 'MM/DD/YYYY',\n TIME_FMT: 'hh:mm',\n store: {\n app: {\n map: {\n anchor: [31.356397, 34.784818]\n }\n },\n features: {\n COLOR_BY_ASSOCIATION: true,\n USE_ASSOCIATIONS: true,\n USE_SOURCES: true,\n USE_COVER: false,\n GRAPH_NONLOCATED: false,\n HIGHLIGHT_GROUPS: false\n }\n }\n}\n\nexport default config;\n" }, { "path": "index.html", "content": "\n\n\n\n \n Civilian Harm in Ukraine Timemap - Bellingcat\n \n \n \n \n \n\n \n \n \n \n \n\n\n\n
\n
\n
\n If you see this message wait up to 30s, otherwise please revisit on a desktop device.\n
\n
\n \n\n\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"timemap\",\n \"version\": \"0.1.0\",\n \"description\": \"\",\n \"homepage\": \"https://bellingcat.github.io/ukraine-timemap\",\n \"private\": true,\n \"engines\": {\n \"node\": \"18\"\n },\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"dev:wsl\": \"vite --host\",\n \"test\": \"vitest\",\n \"eslint\": \"eslint src --ext jsx\",\n \"lint\": \"prettier --check \\\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\\"\",\n \"lint:fix\": \"prettier --write \\\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\\"\",\n \"predeploy\": \"vite build\",\n \"deploy\": \"gh-pages -d build\"\n },\n \"dependencies\": {\n \"@json2csv/plainjs\": \"^6.1.2\",\n \"d3\": \"^7.4.2\",\n \"dayjs\": \"^1.11.0\",\n \"joi\": \"^17.1.1\",\n \"leaflet\": \"^1.0.3\",\n \"marked\": \"^4.2.5\",\n \"object-hash\": \"^3.0.0\",\n \"ramda\": \"^0.28.0\",\n \"react\": \"^18.0.0\",\n \"react-device-detect\": \"^2.2.2\",\n \"react-dom\": \"^18.0.0\",\n \"react-image\": \"^4.0.3\",\n \"react-redux\": \"^8.0.5\",\n \"react-tabs\": \"^6.0.0\",\n \"redux\": \"^4.0.0\",\n \"redux-thunk\": \"^2.2.0\",\n \"reselect\": \"^4.1.7\",\n \"screenfull\": \"^6.0.2\",\n \"scriptjs\": \"^2.5.9\",\n \"supercluster\": \"^7.1.5\",\n \"video-react\": \"^0.16.0\"\n },\n \"devDependencies\": {\n \"@testing-library/jest-dom\": \"^5.11.6\",\n \"@testing-library/react\": \"^13.4.0\",\n \"@vitejs/plugin-react\": \"^3.0.1\",\n \"eslint\": \"^8.31.0\",\n \"eslint-config-prettier\": \"^8.6.0\",\n \"eslint-plugin-react\": \"^7.32.0\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"gh-pages\": \"^6.0.0\",\n \"husky\": \"^8.0.3\",\n \"jest-date-mock\": \"^1.0.8\",\n \"lint-staged\": \"^13.1.0\",\n \"prettier\": \"^2.2.1\",\n \"sass\": \"^1.57.1\",\n \"vite\": \"^4.0.4\",\n \"vitest\": \"^0.27.1\"\n },\n \"lint-staged\": {\n \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\": [\n \"prettier --write\"\n ]\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "public/CNAME", "content": "ukraine.bellingcat.com" }, { "path": "public/index.html", "content": "\n\n\n\n \n Civilian Harm in Ukraine\n \n \n \n \n\n\n\n \n
\n
\n
\n
\n
\n If you see this message wait up to 30s, otherwise please revisit on a desktop device.\n
\n
\n\n\n" }, { "path": "src/actions/index.js", "content": "import { urlFromEnv } from \"../common/utilities\";\n\n// TODO: relegate these URLs entirely to environment variables\n// const CONFIG_URL = urlFromEnv('CONFIG_EXT')\nconst EVENT_DATA_URL = urlFromEnv(\"EVENTS_EXT\");\nconst ASSOCIATIONS_URL = urlFromEnv(\"ASSOCIATIONS_EXT\");\nconst SOURCES_URL = urlFromEnv(\"SOURCES_EXT\");\nconst SITES_URL = urlFromEnv(\"SITES_EXT\");\nconst REGIONS_URL = urlFromEnv(\"REGIONS_EXT\");\nconst SHAPES_URL = urlFromEnv(\"SHAPES_EXT\");\n\nconst domainMsg = (domainType) =>\n `Something went wrong fetching ${domainType}. Check the URL or try disabling them in the config file.`;\n\nexport function fetchDomain() {\n const notifications = [];\n\n function handleError(message) {\n notifications.push({\n message,\n type: \"error\",\n });\n return [];\n }\n\n return (dispatch, getState) => {\n const features = getState().features;\n dispatch(toggleFetchingDomain());\n\n // let configPromise = Promise.resolve([])\n // if (features.USE_REMOTE_CONFIG) {\n // configPromise = fetch(CONFIG_URL)\n // .then(response => response.json())\n // .catch(() => handleError(\"Couldn't find data at the config URL you specified.\"))\n // }\n\n // NB: EVENT_DATA_URL is a list, and so results are aggregated\n const eventPromise = Promise.all(\n EVENT_DATA_URL.map((url) =>\n fetch(url)\n .then((response) => response.json())\n .catch(() => handleError(\"events\"))\n )\n ).then((results) => results.flatMap((t) => t));\n\n let associationsPromise = Promise.resolve([]);\n if (features.USE_ASSOCIATIONS) {\n if (!ASSOCIATIONS_URL) {\n associationsPromise = Promise.resolve(\n handleError(\n \"USE_ASSOCIATIONS is true, but you have not provided a ASSOCIATIONS_EXT\"\n )\n );\n } else {\n associationsPromise = fetch(ASSOCIATIONS_URL)\n .then((response) => response.json())\n .catch(() => handleError(domainMsg(\"associations\")));\n }\n }\n\n let sourcesPromise = Promise.resolve([]);\n if (features.USE_SOURCES) {\n if (!SOURCES_URL) {\n sourcesPromise = Promise.resolve(\n handleError(\n \"USE_SOURCES is true, but you have not provided a SOURCES_EXT\"\n )\n );\n } else {\n sourcesPromise = fetch(SOURCES_URL)\n .then((response) => response.json())\n .catch(() => handleError(domainMsg(\"sources\")));\n }\n }\n\n let sitesPromise = Promise.resolve([]);\n if (features.USE_SITES) {\n sitesPromise = fetch(SITES_URL)\n .then((response) => response.json())\n .catch(() => handleError(domainMsg(\"sites\")));\n }\n\n let regionsPromise = Promise.resolve([]);\n if (features.USE_REGIONS) {\n regionsPromise = fetch(REGIONS_URL)\n .then((response) => response.json())\n .catch(() => handleError(domainMsg(\"regions\")));\n }\n\n let shapesPromise = Promise.resolve([]);\n if (features.USE_SHAPES) {\n shapesPromise = fetch(SHAPES_URL)\n .then((response) => response.json())\n .catch(() => handleError(domainMsg(\"shapes\")));\n }\n\n return Promise.all([\n eventPromise,\n associationsPromise,\n sourcesPromise,\n sitesPromise,\n regionsPromise,\n shapesPromise,\n ])\n .then((response) => {\n const result = {\n events: response[0],\n associations: response[1],\n sources: response[2],\n sites: response[3],\n regions: response[4],\n shapes: response[5],\n notifications,\n };\n if (\n Object.values(result).some((resp) => resp.hasOwnProperty(\"error\"))\n ) {\n throw new Error(\n \"Some URLs returned negative. If you are in development, check the server is running\"\n );\n }\n dispatch(toggleFetchingDomain());\n dispatch(setInitialCategories(result.associations));\n dispatch(setInitialShapes(result.shapes));\n return result;\n })\n .catch((err) => {\n dispatch(fetchError(err.message));\n dispatch(toggleFetchingDomain());\n // TODO: handle this appropriately in React hierarchy\n alert(err.message);\n });\n };\n}\n\nexport const FETCH_ERROR = \"FETCH_ERROR\";\nexport function fetchError(message) {\n return {\n type: FETCH_ERROR,\n message,\n };\n}\n\nexport const UPDATE_DOMAIN = \"UPDATE_DOMAIN\";\nexport function updateDomain(payload) {\n return {\n type: UPDATE_DOMAIN,\n payload,\n };\n}\n\nexport function fetchSource(source) {\n return (dispatch) => {\n if (!SOURCES_URL) {\n dispatch(fetchSourceError(\"No source extension specified.\"));\n } else {\n dispatch(toggleFetchingSources());\n\n fetch(`${SOURCES_URL}`)\n .then((response) => {\n if (!response.ok) {\n throw new Error(\n \"No sources are available at the URL specified in the config specified.\"\n );\n } else {\n return response.json();\n }\n })\n .catch((err) => {\n dispatch(fetchSourceError(err.message));\n dispatch(toggleFetchingSources());\n });\n }\n };\n}\n\nexport const UPDATE_HIGHLIGHTED = \"UPDATE_HIGHLIGHTED\";\nexport function updateHighlighted(highlighted) {\n return {\n type: UPDATE_HIGHLIGHTED,\n highlighted: highlighted,\n };\n}\n\nexport const UPDATE_SELECTED = \"UPDATE_SELECTED\";\nexport function updateSelected(selected) {\n return {\n type: UPDATE_SELECTED,\n selected: selected,\n };\n}\n\nexport const UPDATE_DISTRICT = \"UPDATE_DISTRICT\";\nexport function updateDistrict(district) {\n return {\n type: UPDATE_DISTRICT,\n district,\n };\n}\n\nexport const CLEAR_FILTER = \"CLEAR_FILTER\";\nexport function clearFilter(filter) {\n return {\n type: CLEAR_FILTER,\n filter,\n };\n}\n\nexport const TOGGLE_ASSOCIATIONS = \"TOGGLE_ASSOCIATIONS\";\nexport function toggleAssociations(association, value, shouldColor) {\n return {\n type: TOGGLE_ASSOCIATIONS,\n association,\n value,\n shouldColor,\n };\n}\n\nexport const TOGGLE_SHAPES = \"TOGGLE_SHAPES\";\nexport function toggleShapes(shape) {\n return {\n type: TOGGLE_SHAPES,\n shape,\n };\n}\n\nexport const SET_LOADING = \"SET_LOADING\";\nexport function setLoading() {\n return {\n type: SET_LOADING,\n };\n}\n\nexport const SET_NOT_LOADING = \"SET_NOT_LOADING\";\nexport function setNotLoading() {\n return {\n type: SET_NOT_LOADING,\n };\n}\n\nexport const SET_INITIAL_CATEGORIES = \"SET_INITIAL_CATEGORIES\";\nexport function setInitialCategories(values) {\n return {\n type: SET_INITIAL_CATEGORIES,\n values,\n };\n}\n\nexport const SET_INITIAL_SHAPES = \"SET_INITIAL_SHAPES\";\nexport function setInitialShapes(values) {\n return {\n type: SET_INITIAL_SHAPES,\n values,\n };\n}\n\nexport const UPDATE_TIMERANGE = \"UPDATE_TIMERANGE\";\nexport function updateTimeRange(timerange) {\n return {\n type: UPDATE_TIMERANGE,\n timerange,\n };\n}\n\nexport const UPDATE_DIMENSIONS = \"UPDATE_DIMENSIONS\";\nexport function updateDimensions(dims) {\n return {\n type: UPDATE_DIMENSIONS,\n dims,\n };\n}\n\nexport const UPDATE_NARRATIVE = \"UPDATE_NARRATIVE\";\nexport function updateNarrative(narrative) {\n return {\n type: UPDATE_NARRATIVE,\n narrative,\n };\n}\n\nexport const UPDATE_NARRATIVE_STEP_IDX = \"UPDATE_NARRATIVE_STEP_IDX\";\nexport function updateNarrativeStepIdx(idx) {\n return {\n type: UPDATE_NARRATIVE_STEP_IDX,\n idx,\n };\n}\n\nexport const UPDATE_SOURCE = \"UPDATE_SOURCE\";\nexport function updateSource(source) {\n return {\n type: UPDATE_SOURCE,\n source,\n };\n}\n\nexport const UPDATE_COLORING_SET = \"UPDATE_COLORING_SET\";\nexport function updateColoringSet(coloringSet) {\n return {\n type: UPDATE_COLORING_SET,\n coloringSet,\n };\n}\n\nexport const UPDATE_TICKS = \"UPDATE_TICKS\";\nexport function updateTicks(ticks) {\n return {\n type: UPDATE_TICKS,\n ticks,\n };\n}\n\n// UI\n\nexport const TOGGLE_SITES = \"TOGGLE_SITES\";\nexport function toggleSites() {\n return {\n type: TOGGLE_SITES,\n };\n}\n\nexport const TOGGLE_FETCHING_DOMAIN = \"TOGGLE_FETCHING_DOMAIN\";\nexport function toggleFetchingDomain() {\n return {\n type: TOGGLE_FETCHING_DOMAIN,\n };\n}\n\nexport const TOGGLE_FETCHING_SOURCES = \"TOGGLE_FETCHING_SOURCES\";\nexport function toggleFetchingSources() {\n return {\n type: TOGGLE_FETCHING_SOURCES,\n };\n}\n\nexport const TOGGLE_LANGUAGE = \"TOGGLE_LANGUAGE\";\nexport function toggleLanguage(language) {\n return {\n type: TOGGLE_LANGUAGE,\n language,\n };\n}\n\nexport const CLOSE_TOOLBAR = \"CLOSE_TOOLBAR\";\nexport function closeToolbar() {\n return {\n type: CLOSE_TOOLBAR,\n };\n}\n\nexport const TOGGLE_INFOPOPUP = \"TOGGLE_INFOPOPUP\";\nexport function toggleInfoPopup() {\n return {\n type: TOGGLE_INFOPOPUP,\n };\n}\n\nexport const TOGGLE_INTROPOPUP = \"TOGGLE_INTROPOPUP\";\nexport function toggleIntroPopup() {\n return {\n type: TOGGLE_INTROPOPUP,\n };\n}\n\nexport const TOGGLE_NOTIFICATIONS = \"TOGGLE_NOTIFICATIONS\";\nexport function toggleNotifications() {\n return {\n type: TOGGLE_NOTIFICATIONS,\n };\n}\n\nexport const MARK_NOTIFICATIONS_READ = \"MARK_NOTIFICATIONS_READ\";\nexport function markNotificationsRead() {\n return {\n type: MARK_NOTIFICATIONS_READ,\n };\n}\n\nexport const TOGGLE_COVER = \"TOGGLE_COVER\";\nexport function toggleCover() {\n return {\n type: TOGGLE_COVER,\n };\n}\n\nexport const TOGGLE_TILE_OVERLAY = \"TOGGLE_TILE_OVERLAY\";\nexport function toggleTileOverlay() {\n return {\n type: TOGGLE_TILE_OVERLAY,\n };\n}\n\nexport const UPDATE_SEARCH_QUERY = \"UPDATE_SEARCH_QUERY\";\nexport function updateSearchQuery(searchQuery) {\n return {\n type: UPDATE_SEARCH_QUERY,\n searchQuery,\n };\n}\n\n// ERRORS\n\nexport const FETCH_SOURCE_ERROR = \"FETCH_SOURCE_ERROR\";\nexport function fetchSourceError(msg) {\n return {\n type: FETCH_SOURCE_ERROR,\n msg,\n };\n}\n\nexport const TOGGLE_SATELLITE_VIEW = \"TOGGLE_SATELLITE_VIEW\";\nexport function toggleSatelliteView() {\n return {\n type: TOGGLE_SATELLITE_VIEW,\n };\n}\n\nexport const REHYDRATE_STATE = \"REHYDRATE_STATE\";\nexport function rehydrateState() {\n return {\n type: REHYDRATE_STATE,\n };\n}\n\nexport const UPDATE_MAP_VIEW = \"UPDATE_MAP_VIEW\";\nexport function updateMapView(lat, lng, zoom) {\n return {\n type: UPDATE_MAP_VIEW,\n lat,\n lng,\n zoom,\n };\n}\n" }, { "path": "src/common/constants.js", "content": "export const ASSOCIATION_MODES = {\n CATEGORY: \"CATEGORY\",\n NARRATIVE: \"NARRATIVE\",\n FILTER: \"FILTER\",\n};\n\nexport const SHAPE = \"SHAPE\";\n\nexport const DEFAULT_TAB_ICONS = {\n CATEGORY: \"widgets\",\n NARRATIVE: \"timeline\",\n FILTER: \"filter_list\",\n SHAPE: \"change_history\",\n DOWNLOAD: \"download\",\n};\n\nexport const AVAILABLE_SHAPES = {\n STAR: \"STAR\",\n DIAMOND: \"DIAMOND\",\n PENTAGON: \"PENTAGON\",\n SQUARE: \"SQUARE\",\n DOT: \"DOT\",\n BAR: \"BAR\",\n TRIANGLE: \"TRIANGLE\",\n};\n\nexport const POLYGON_CLIP_PATH = {\n STAR: \"polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)\",\n DIAMOND: \"polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)\",\n PENTAGON: \"polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)\",\n TRIANGLE: \"polygon(50% 0%, 0% 100%, 100% 100%)\",\n};\n\nexport const DEFAULT_CHECKBOX_COLOR = \"#ffffff\";\n" }, { "path": "src/common/data/copy.json", "content": "{\n \"es-MX\": {\n \"tiles\": {\n \"default\": \"Mapa\",\n \"satellite\": \"Sat\"\n },\n \"loading\": \"Cargando...\",\n \"legend\": {\n \"view2d\": {\n \"paragraphs\": [\n \"Seleccionando una serie de filtros verá aparecer eventos en el mapa y en la línea del tiempo.\",\n \"Cada evento estará coloreado según la persona que dio el testimonio del evento.\"\n ],\n \"colors\": [\n {\n \"class\": \"category_group00\",\n \"label\": \"Categoría Grupo 00\"\n },\n {\n \"class\": \"category_group01\",\n \"label\": \"Categoría Grupo 01\"\n },\n {\n \"class\": \"category_group02\",\n \"label\": \"Categoría Grupo 02\"\n },\n {\n \"class\": \"category_group03\",\n \"label\": \"Categoría Grupo 03\"\n },\n {\n \"class\": \"other\",\n \"label\": \"Otras categorías\"\n }\n ]\n },\n \"default\": {\n \"header\": \"Ayudas para explorar la plataforma\",\n \"intro\": [\n \"Cada **punto** representa un **evento en los datos** (o cada incidente). Al hacer clic en cada punto se ven los detalles del evento. Pero si le da clic en un **grupo** de puntos, verá cuantos eventos hay en ese grupo.\",\n \"Puede acercarse en el mapa *(zoom)* haciendo *scroll* con el ratón o haciendo clic en un grupo de puntos.\",\n \"Puede usar **filtros** para segmentar los datos. En el mapa sólo vemos los puntos relacionados con cada filtro seleccionado. Cuando no hay filtros seleccionados, vemos todos los puntos de la base de datos en el mapa.\",\n \"Al seleccionar más de un filtro se introducen diferentes colores para diferenciarlos. Esto permite comparar los tipos de incidentes tanto en el mapa, como en la línea de tiempo. Esto sirve con un máximo de 6 filtros-colores.\",\n \"Con el teclado puede usar las flechas de la derecha e izquierda para moverse entre eventos. También puede hacer clic y arrastrar la línea de tiempo hacia los lados para modificar el rango de tiempo.\"\n ],\n \"notation\": \"Cuando un circulo combina colores significa que hay varios eventos en esa misma ubicación.\",\n \"arrows\": \"Usar las flechas izquierda/derecha en el teclado para moverse entre eventos cronológicamente.\"\n }\n },\n \"toolbar\": {\n \"title\": \"Título\",\n \"filters\": \"Filtros\",\n \"explore_by_filter__title\": \"Explorar por filtros\",\n \"explore_by_filter__description\": \"Al seleccionar filtros, puede ver los eventos que tienen esa categoria. Para ver todos los eventos puede quitar todas las selecciones (o seleccionarlos todos).\",\n \"panels\": {\n \"mentions\": {\n \"title\": \"Personas\",\n \"overview\": \"Seleccionar los nombres de personas mostrará eventos en los que esta persona o organización ha sido mencionada, incluyendo el propio testimonio. Entre paréntesis encontrará el número de menciones. Ej. (34).\"\n },\n \"categories\": {\n \"title\": \"Testimonios\",\n \"overview\": \"Seleccionar el nombre de una persona mostrará los eventos descritos por su testimonio. Entre paréntesis encontrará el número de eventos descritos. Ej. (34).\"\n },\n \"search\": {\n \"title\": \"Directorio de etiquetas\",\n \"placeholder\": \"Búsqueda\"\n }\n }\n },\n \"timeline\": {\n \"zoomLevels\": [\n {\n \"label\": \"20 años\",\n \"duration\": 10512000\n },\n {\n \"label\": \"2 años\",\n \"duration\": 1051200\n },\n {\n \"label\": \"3 meses\",\n \"duration\": 129600\n },\n {\n \"label\": \"3 días\",\n \"duration\": 4320\n },\n {\n \"label\": \"12 horas\",\n \"duration\": 720\n },\n {\n \"label\": \"1 hora\",\n \"duration\": 60\n }\n ],\n \"labels_title\": \"Testimonios\",\n \"labels\": [\n \"Testimonio Grupo 00\",\n \"Testimonio Grupo 01\",\n \"Testimonio Grupo 02\",\n \"Testimonio Grupo 03\",\n \"Otras categorias\"\n ],\n \"info\": \"%n eventos ocurridos entre\",\n \"default_categories_label\": \"Eventos\"\n },\n \"cardstack\": {\n \"date_title\": \"Fecha incidente\",\n \"location_title\": \"Ubicación\",\n \"summary_title\": \"Resumen\",\n \"header\": \"eventos seleccionados\",\n \"unknown_location\": \"Ubicación desconocida\",\n \"unknown_time\": \"Día y hora desconocida\",\n \"timestamp\": \"Día y hora\",\n \"estimated\": \"aproximado\",\n \"location\": \"Ubicación\",\n \"incident_type\": \"Tipo de acción\",\n \"description\": \"Hechos\",\n \"people\": \"Personas en el evento\",\n \"sources\": \"Fuentes\",\n \"category\": \"Según el testimonio de\",\n \"communication\": \"Comunicación\",\n \"transmitter\": \"Transmisor\",\n \"receiver\": \"Receptor\",\n \"warning\": \"(!) HECHOS CUESTIONADOS\"\n }\n },\n \"en-US\": {\n \"tiles\": {\n \"default\": \"Map\",\n \"satellite\": \"Sat\"\n },\n \"loading\": \"Loading...\",\n \"legend\": {\n \"view2d\": {\n \"paragraphs\": [\n \"Selecting a series of filters, you will be able to explore events on the map of Iguala and on the timeline.\",\n \"Each event is colored according the person that gave category of the event.\"\n ],\n \"colors\": [\n {\n \"class\": \"category_group00\",\n \"label\": \"Category Group 00\"\n },\n {\n \"class\": \"category_group01\",\n \"label\": \"Category Group 01\"\n },\n {\n \"class\": \"category_group02\",\n \"label\": \"Category Group 02\"\n },\n {\n \"class\": \"category_group03\",\n \"label\": \"Category Group 03\"\n },\n {\n \"class\": \"other\",\n \"label\": \"Other categories\"\n }\n ]\n },\n \"default\": {\n \"header\": \"Navigating the Platform\",\n \"intro\": [\n \"Each small **dot** represents a **datapoint**, or incident. Click on a dot to see details. Hover over a larger ‘**cluster**’ dot to see how many events it represents.\",\n \"Zoom in either with a mouse-scroll or by clicking a ‘cluster’ dot.\",\n \"Use **filters** and **categories** to segment the data. Selecting certain filters and categories will show only the datapoints that relate to them. If no filters or categories are selected, all the datapoints are displayed.\",\n \"Selecting more than one filter will introduce colour-coded datapoints, which allow you to compare types of incident across time and space. This feature works up to a maximum of six filters.\",\n \"Once you have clicked on an event, use the left and right arrows to move back and forward day by day. You can also click and drag anywhere on the timeline. Use the handles on the right to select a date range.\"\n ],\n \"notation\": \"Combinations of colours within a circle indicate multiple events in a single location.\",\n \"arrows\": \"Use the left/right arrows on the keboard to move back and forth between events in time.\"\n }\n },\n \"toolbar\": {\n \"title\": \"TITLE\",\n \"panels\": {\n \"mentions\": {\n \"title\": \"Mentions\",\n \"overview\": \"Selecting the names of people/organisation will show events in which these have been mentioned in their own testimony and by others. The number in the parentheses shows how many events contain a mention of a person or organisation, e.g. (34)\"\n },\n \"categories\": {\n \"title\": \"Testimonies\",\n \"overview\": \"Selecting the name of a person will show the events only according to a person’s category or category. The number in the parentheses show how many events are contained in each category, e.g. (34).\"\n },\n \"search\": {\n \"title\": \"Directory of filters\",\n \"placeholder\": \"Search\"\n }\n },\n \"narratives\": \"Narratives\",\n \"narratives_label\": \"Narratives\",\n \"explore_by_narrative__title\": \"Explore events by narrative\",\n \"explore_by_narrative__description\": \"Follow a path through the data, from one key event to the next.\",\n \"filters\": \"Filters\",\n \"filters_label\": \"Filters\",\n \"explore_by_filter__title\": \"Explore by filter\",\n \"explore_by_filter__description\": \"'Filters' refer to the types of incident. Select multiple filters to introduce colour-coding, up to a maximum of four filters.

If no filters are selected, all datapoints are displayed.\",\n \"categories\": \"Categories\",\n \"categories_label\": \"Categories\",\n \"explore_by_category__title\": \"Explore events by category\",\n \"explore_by_category__description\": \"\",\n \"shapes\": \"Shapes\",\n \"shapes_label\": \"Shapes\",\n \"explore_by_shapes__title\": \"Explore events by shape breakdown\",\n \"explore_by_shape__description\": \"Shapes map to a given type of event that appears on the timeline.

Select the shape marker to toggle this type of event on / off\",\n \"fullscreen_enter\": \"Fullscreen\",\n \"fullscreen_exit\": \"Exit Fullscreen\",\n \"download\": {\n \"button\": \"Download\",\n \"panel\": {\n \"title\": \"Download events\",\n \"description\": \"Export the most recent available events in different formats.\",\n \"formats\": {\n \"api\": {\n \"label\": \"API\",\n \"description\": \"An API endpoint where you can always fetch the entire dataset in JSON format with tools like curl. Useful for integrating the data in other services and visualizaitons.\"\n },\n \"csv\": {\n \"label\": \"CSV\",\n \"description\": \"CSV file where sources and filters are concatenated into a single column each due to data structure limitations.\"\n },\n \"json\": {\n \"label\": \"JSON\",\n \"description\": \"JSON file where each event is a structured object containing nested arrays of sources and filters.\"\n }\n }\n }\n }\n },\n \"timeline\": {\n \"labels_title\": \"Testimonies\",\n \"labels\": [\n \"Testimony Group 00\",\n \"Testimony Group 01\",\n \"Testimony Group 02\",\n \"Testimony Group 03\",\n \"Other\"\n ],\n \"info\": \"Showing %n events that occurred between\",\n \"reset\": \"reset dates\",\n \"default_categories_label\": \"\"\n },\n \"cardstack\": {\n \"header\": \"selected events\",\n \"timestamp\": \"Day and time\",\n \"unknown_location\": \"Unknown location\",\n \"estimated\": \"estimated\",\n \"unknown_time\": \"Unknown time\",\n \"location\": \"Localization\",\n \"incident_type\": \"Type of action\",\n \"description\": \"Summary\",\n \"filters\": \"Filters\",\n \"nofilters\": \"No known filters for this event.\",\n \"sources\": \"Sources\",\n \"unknown_source\": \"The information for this source could not be retrieved.\",\n \"category\": \"Category\",\n \"communication\": \"Communication\",\n \"transmitter\": \"Transmitter\",\n \"receiver\": \"Receiver\",\n \"warning\": \"(!) Highly questioned\"\n }\n }\n}\n" }, { "path": "src/common/data/es-MX.json", "content": "{\n \"dateTime\": \"%x, %X\",\n \"date\": \"%d/%m/%Y\",\n \"time\": \"%-I:%M:%S %p\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\n \"domingo\",\n \"lunes\",\n \"martes\",\n \"miércoles\",\n \"jueves\",\n \"viernes\",\n \"sábado\"\n ],\n \"shortDays\": [\"dom\", \"lun\", \"mar\", \"mié\", \"jue\", \"vie\", \"sáb\"],\n \"months\": [\n \"enero\",\n \"febrero\",\n \"marzo\",\n \"abril\",\n \"mayo\",\n \"junio\",\n \"julio\",\n \"agosto\",\n \"septiembre\",\n \"octubre\",\n \"noviembre\",\n \"diciembre\"\n ],\n \"shortMonths\": [\n \"ene\",\n \"feb\",\n \"mar\",\n \"abr\",\n \"may\",\n \"jun\",\n \"jul\",\n \"ago\",\n \"sep\",\n \"oct\",\n \"nov\",\n \"dic\"\n ]\n}\n" }, { "path": "src/common/global.js", "content": "export const colors = {\n fa_red: \"#eb443e\",\n yellow: \"#ffd800\",\n black: \"#000\",\n white: \"#fff\",\n};\n\nconst exports = {\n fallbackEventColor: colors.fa_red,\n darkBackground: colors.black,\n primaryHighlight: colors.fa_red,\n secondaryHighlight: colors.white,\n};\n\nexport default exports;\n" }, { "path": "src/common/utilities.js", "content": "import config from \"../../config\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport dayjs from \"dayjs\";\nimport hash from \"object-hash\";\nimport { timeFormatDefaultLocale } from \"d3\";\nimport esMxData from \"./data/es-MX.json\";\n\nimport { ASSOCIATION_MODES, POLYGON_CLIP_PATH } from \"./constants\";\n\ndayjs.extend(customParseFormat);\n\nconst DATE_FMT = config.DATE_FMT ?? \"MM/DD/YYYY\";\nconst TIME_FMT = config.TIME_FMT ?? \"HH:mm\";\n\nexport const language = config.store.app.language || \"en-US\";\n\nexport function getPathLeaf(path) {\n const splitPath = path.split(\"/\");\n return splitPath[splitPath.length - 1];\n}\n\nexport function calcDatetime(date, time) {\n if (!time) time = \"00:00\";\n const dt = dayjs(`${date} ${time}`, `${DATE_FMT} ${TIME_FMT}`);\n return dt.toDate();\n}\n\nexport function getCoordinatesForPercent(radius, percent) {\n const x = radius * Math.cos(2 * Math.PI * percent);\n const y = radius * Math.sin(2 * Math.PI * percent);\n return [x, y];\n}\n\n/**\n * This function takes the array of percentages: [0.5, 0.5, ...]\n * and maps it by index to the set of colors ['#fff', '#000', ...]\n * If there aren't enough colors in the set, it raises an error for the user\n *\n * Return value:\n * ex. {'#fff': 0.5, '#000': 0.5, ...} */\nexport function zipColorsToPercentages(colors, percentages) {\n if (colors.length < percentages.length) {\n throw new Error(\"You must declare an appropriate number of filter colors\");\n }\n\n return percentages.reduce((map, percent, idx) => {\n map[colors[idx]] = percent;\n return map;\n }, {});\n}\n\n/**\n * Compare two arrays of scalars\n * @param {array} arr1: array of numbers\n * @param {array} arr2: array of numbers\n */\nexport function areEqual(arr1, arr2) {\n return (\n arr1.length === arr2.length &&\n arr1.every((element, index) => {\n return element === arr2[index];\n })\n );\n}\n\n/**\n * Return whether the variable is neither null nor undefined\n * @param {object} variable\n */\nexport function isNotNullNorUndefined(variable) {\n return typeof variable !== \"undefined\" && variable !== null;\n}\n\n/*\n * Taken from: https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript\n */\nexport function capitalize(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\nexport function trimAndEllipse(string, stringNum) {\n if (string.length > stringNum) {\n return string.substring(0, 120) + \"...\";\n }\n return string;\n}\n\n/**\n * Takes the complete set of filters, and according to their paths places them at the correct node\n *\n * Returns a nested object where:\n * Key: filter_path_0/filter_path_1/filter_path_2...\n * Value: {...nested children}\n */\nexport function aggregateFilterPaths(filters) {\n function insertPath(\n children = {},\n [headOfPath, ...remainder],\n accumulatedPath\n ) {\n const childKey = Object.keys(children).find((path) => {\n const pathLeaf = getPathLeaf(path);\n return pathLeaf === headOfPath;\n });\n accumulatedPath.push(headOfPath);\n const accumulatedPlusHead = accumulatedPath.join(\"/\");\n if (!childKey) children[accumulatedPlusHead] = {};\n if (remainder.length > 0)\n insertPath(children[accumulatedPlusHead], remainder, accumulatedPath);\n return children;\n }\n\n const allPaths = [];\n filters.forEach((filterItem) => allPaths.push(filterItem.filter_paths));\n const aggregatedPaths = allPaths.reduce(\n (children, path) => insertPath(children, path, []),\n {}\n );\n return aggregatedPaths;\n}\n\n/**\n * From the set of associations, grab a given filter's set of parents,\n * ie. all the elements in the path array before the idx where the filter is located.\n * If we can't find the filter by the ID, we know its a meta filter, so we look\n * through every association's given path attribute to find its location.\n *\n * Returns the list of parents: ex. ['Chemical', 'Tear Gas', ...]\n */\nexport function getFilterAncestors(filter) {\n const splitFilter = filter.split(\"/\");\n const ancestors = [];\n splitFilter.forEach((f, index) => {\n const accumulatedPath = splitFilter.slice(0, index + 1).join(\"/\");\n ancestors.push(accumulatedPath);\n });\n // The last element here will be the leaf node aka the filter passed in\n ancestors.pop();\n return ancestors;\n}\n\n/**\n * Grabs the second to last element in the paths array for a given existing filter.\n * This is the filter's most immediate ancestor.\n */\nexport function getImmediateFilterParent(filter) {\n const ancestors = getFilterAncestors(filter);\n return ancestors[ancestors.length - 1];\n}\n\n/**\n * Grabs a given filter's siblings: the set of associations that share the same immediate filter parent.\n */\nexport function getFilterSiblings(allFilters, filterParent, filterKey) {\n function findSiblings(filterPathObj, ancestors) {\n if (ancestors.length === 0 || filterPathObj === {}) return {};\n const nextAncestor = ancestors.shift();\n if (Object.keys(filterPathObj).includes(nextAncestor)) {\n const nextObjToSearch = filterPathObj[nextAncestor];\n if (ancestors.length === 0) {\n return nextObjToSearch;\n } else {\n return findSiblings(nextObjToSearch, ancestors);\n }\n }\n }\n const aggregatedFilters = aggregateFilterPaths(allFilters);\n const ancestors = getFilterAncestors(filterKey);\n const siblings = findSiblings(aggregatedFilters, ancestors);\n return Object.keys(siblings).filter((sib) => sib !== filterKey);\n}\n\n/**\n * Looks at the current coloring set (ie. a map between sets of filters and colors) and configures where to add next set\n */\nexport function addToColoringSet(coloringSet, filters) {\n const flattenedColoringSet = coloringSet.flatMap((f) => f);\n const newColoringSet = filters.filter(\n (k) => flattenedColoringSet.indexOf(k) === -1\n );\n return [...coloringSet, newColoringSet];\n}\n\n/**\n * Looks at the current coloring set (ie. a map between sets of filters and colors) and configures new sets based off of existing filters\n */\nexport function removeFromColoringSet(coloringSet, filters) {\n const newColoringSets = coloringSet.map((set) =>\n set.filter((s) => {\n return !filters.includes(s);\n })\n );\n return newColoringSets.filter((item) => item.length !== 0);\n}\n\nexport function getEventCategories(event, activeCategories) {\n const eventCats = event.associations.filter(\n (a) => a.mode === ASSOCIATION_MODES.CATEGORY\n );\n return eventCats.reduce((acc, val) => {\n const activeCatTitle = activeCategories.find((cat) => cat === val.title);\n if (activeCatTitle) acc.push(activeCatTitle);\n return acc;\n }, []);\n}\n\n/**\n * Takes a filter's path and concatenates it like so: Parent 1/Parent 2/Child\n */\nexport function createFilterPathString(filter) {\n return filter.filter_paths.join(\"/\");\n}\n\n/**\n * Inset the full source represenation from 'allSources' into an event. The\n * function is 'curried' to allow easy use with maps. To use for a single\n * source, call with two sets of parentheses:\n * const src = insetSourceFrom(sources)(anEvent)\n */\nexport function insetSourceFrom(allSources) {\n return (event) => {\n let sources;\n if (!event.sources) {\n sources = [];\n } else {\n sources = event.sources.map((id) => {\n return allSources.hasOwnProperty(id) ? allSources[id] : null;\n });\n }\n return {\n ...event,\n sources,\n };\n };\n}\n\n/**\n * Debugging function: put in place of a mapStateToProps function to\n * view that source modal by default\n */\nexport function injectSource(id) {\n return (state) => {\n return {\n ...state,\n app: {\n ...state.app,\n source: state.domain.sources[id],\n },\n };\n };\n}\n\nconst API_ROOT =\n import.meta.env.MODE === \"development\" ? \"\" : config.SERVER_ROOT;\n\nexport function urlFromEnv(ext) {\n if (config[ext]) {\n if (!Array.isArray(config[ext])) {\n return [`${API_ROOT}${config[ext]}`];\n } else {\n return config[ext].map((suffix) => `${API_ROOT}${suffix}`);\n }\n } else {\n return null;\n }\n}\n\nexport function toggleFlagAC(flag) {\n return (appState) => ({\n ...appState,\n flags: {\n ...appState.flags,\n [flag]: !appState.flags[flag],\n },\n });\n}\n\nexport function selectTypeFromPath(path) {\n let type;\n switch (true) {\n case /\\.(png|jpg)$/.test(path):\n type = \"Image\";\n break;\n case /\\.(mp4)$/.test(path):\n type = \"Video\";\n break;\n case /\\.(md)$/.test(path):\n type = \"Text\";\n break;\n default:\n type = \"Unknown\";\n break;\n }\n return { type, path };\n}\n\nexport function typeForPath(path) {\n let type;\n path = path.trim();\n switch (true) {\n case /\\.((png)|(jpg)|(jpeg))$/.test(path):\n type = \"Image\";\n break;\n case /\\.(mp4)$/.test(path):\n type = \"Video\";\n break;\n case /\\.(md)$/.test(path):\n type = \"Text\";\n break;\n case /\\.(pdf)$/.test(path):\n type = \"Document\";\n break;\n case /.+(twitter\\.com).+/.test(path):\n type = \"Tweet\";\n break;\n case /.+(t\\.me).+/.test(path):\n type = \"Telegram\";\n break;\n\n default:\n type = \"Unknown\";\n break;\n }\n return type;\n}\n\nexport function selectTypeFromPathWithPoster(path, poster) {\n return { type: typeForPath(path), path, poster };\n}\n\nexport function isIdentical(obj1, obj2) {\n return hash(obj1) === hash(obj2);\n}\n\nexport function calcOpacity(num) {\n /* Events have opacity 0.5 by default, and get added to according to how many\n * other events there are in the same render. The idea here is that the\n * overlaying of events builds up a 'heat map' of the event space, where\n * darker areas represent more events with proportion */\n const base = num >= 1 ? 0.9 : 0;\n return base + Math.min(0.5, 0.08 * (num - 1));\n}\n\nexport function calcClusterOpacity(pointCount, totalPoints) {\n /* Clusters represent multiple events within a specific radius. The darker the cluster,\n the larger the number of underlying events. We use a multiplication factor (50) here as well\n to ensure that the larger clusters have an appropriately darker shading. */\n return Math.min(0.85, 0.08 + (pointCount / totalPoints) * 50);\n}\n\nexport function calcClusterSize(pointCount, totalPoints) {\n /* The larger the cluster size, the higher the count of points that the cluster represents.\n Just like with opacity, we use a multiplication factor to ensure that clusters with higher point\n counts appear larger. */\n //TO-DO: Convert maxSize into a config var\n const maxSize = totalPoints > 60 ? 60 : 35;\n return Math.min(maxSize, 10 + (pointCount / totalPoints) * 100);\n}\n\nexport function calculateTotalClusterPoints(clusters) {\n return clusters.reduce((total, cl) => {\n if (cl && cl.properties && cl.properties.cluster) {\n total += cl.properties.point_count;\n }\n return total;\n }, 0);\n}\n\nexport function isLatitude(lat) {\n return !!lat && isFinite(lat) && Math.abs(lat) <= 90;\n}\n\nexport function isLongitude(lng) {\n return !!lng && isFinite(lng) && Math.abs(lng) <= 180;\n}\n\nexport function mapClustersToLocations(clusters, locations) {\n return clusters.reduce((acc, cl) => {\n const foundLocation = locations.find(\n (location) => location.label === cl.properties.id\n );\n if (foundLocation) acc.push(foundLocation);\n return acc;\n }, []);\n}\n\n/**\n * Loops through a set of either locations or events\n * and calculates the proportionate percentage of every given association in relation to the coloring set\n */\nexport function calculateColorPercentages(set, coloringSet) {\n if (coloringSet.length === 0) return [1];\n const associationMap = {};\n\n for (const [idx, value] of coloringSet.entries()) {\n for (const filter of value) {\n associationMap[filter] = idx;\n }\n }\n\n const associationCounts = new Array(coloringSet.length);\n associationCounts.fill(0);\n\n let totalAssociations = 0;\n\n set.forEach((item) => {\n let innerSet = \"events\" in item ? item.events : item;\n\n if (!Array.isArray(innerSet)) innerSet = [innerSet];\n\n innerSet.forEach((val) => {\n val.associations.forEach((a) => {\n const idx = associationMap[createFilterPathString(a)];\n if (!idx && idx !== 0) return;\n associationCounts[idx] += 1;\n totalAssociations += 1;\n });\n });\n });\n\n if (totalAssociations === 0) return [1];\n\n return associationCounts.map((count) => count / totalAssociations);\n}\n\n/**\n * Gets the idx of a given filter in relation to its position in the coloring set\n *\n * Example coloringSet = [['Chemical', 'Tear Gas'], ['Procedural', 'Destruction of property']]\n */\nexport function getFilterIdxFromColorSet(filter, coloringSet) {\n let filterIdx = -1;\n coloringSet.map((set, idx) => {\n const foundIdx = set.indexOf(filter);\n if (foundIdx !== -1) filterIdx = idx;\n return null;\n });\n return filterIdx;\n}\n\nexport const dateMin = function () {\n return Array.prototype.slice.call(arguments).reduce(function (a, b) {\n return a < b ? a : b;\n });\n};\n\nexport const dateMax = function () {\n return Array.prototype.slice.call(arguments).reduce(function (a, b) {\n return a > b ? a : b;\n });\n};\n\n/** Taken from\n * https://stackoverflow.com/questions/22697936/binary-search-in-javascript\n * **/\nexport function binarySearch(ar, el, compareFn) {\n let m = 0;\n let n = ar.length - 1;\n while (m <= n) {\n const k = (n + m) >> 1;\n const cmp = compareFn(el, ar[k]);\n if (cmp > 0) {\n m = k + 1;\n } else if (cmp < 0) {\n n = k - 1;\n } else {\n return k;\n }\n }\n return -m - 1;\n}\n\nexport function makeNiceDate(datetime) {\n if (datetime === null) return null;\n // see https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date\n const dateTimeFormat = new Intl.DateTimeFormat(language, {\n year: \"numeric\",\n month: \"long\",\n day: \"2-digit\",\n });\n const [{ value: month }, , { value: day }, , { value: year }] =\n dateTimeFormat.formatToParts(datetime);\n\n return `${day} ${month}, ${year}`;\n}\n\n/**\n * Sets the default locale for d3 to format dates in each available language.\n */\nexport function setD3Locale() {\n const languages = {\n \"es-MX\": esMxData,\n };\n\n if (language !== \"es-US\" && languages[language]) {\n timeFormatDefaultLocale(languages[language]);\n }\n}\n\n/**\n * Gets the set of associated styles for a given shape type from the entire set of shapes\n * @param list shapes - The aggregated set of shapes\n * @param list activeShapes - The set of active shapes in the app\n */\nexport function mapStyleByShape(shapes, activeShapes) {\n const styledShapes = shapes.map((s) => {\n const { colour, shape, id } = s;\n const style = {\n checkboxStyles: {\n background: activeShapes.includes(id) ? colour : \"black\",\n border: \"none\",\n clipPath: POLYGON_CLIP_PATH[shape],\n },\n containerStyles: {\n background: colour,\n clipPath: POLYGON_CLIP_PATH[shape],\n },\n };\n s.styles = style;\n return s;\n });\n return styledShapes;\n}\n\nexport function mapCategoriesToPaths(categories, panelCategories) {\n const mappedCats = categories.reduce((acc, cat) => {\n const type = cat.filter_paths[0];\n if (!(type in acc)) {\n acc[type] = [];\n }\n acc[type].push(cat);\n return acc;\n }, {});\n\n const categoryMap =\n panelCategories.length > 1 ? mappedCats : { default: categories };\n return categoryMap;\n}\n\nexport function getCategoryIdxs(panelCategories, startingIdx) {\n let idxCounter = startingIdx;\n // If there are specified categories from the config, filter out the default value; else, leave the default value\n const catTypes =\n panelCategories.length > 1\n ? panelCategories.filter((val) => val !== \"default\")\n : panelCategories;\n return catTypes.reduce((set, val) => {\n set[val] = idxCounter;\n idxCounter += 1;\n return set;\n }, {});\n}\n\nexport function getFilterIdx(\n narrativesExist,\n categoriesExist,\n numCategoryPanels\n) {\n if (narrativesExist && !categoriesExist) return 1;\n else if (!narrativesExist && categoriesExist) return numCategoryPanels;\n else if (narrativesExist && categoriesExist) return numCategoryPanels + 1;\n else return 0;\n}\n\nexport function downloadAsFile(filename, content) {\n let element = document.createElement(\"a\");\n element.setAttribute(\n \"href\",\n `data:application/octet-stream;charset=utf-8,${encodeURIComponent(content)}`\n );\n element.setAttribute(\"download\", filename);\n\n element.style.display = \"none\";\n document.body.appendChild(element);\n\n element.click();\n\n document.body.removeChild(element);\n}\n\nexport const isEmptyString = (s) => s.length === 0;\nexport const isOdd = (num) => num % 2 !== 0;\n\nexport function isEmptyObject(o) {\n return o == null || (typeof o === \"object\" && !Object.keys(o).length);\n}\n" }, { "path": "src/components/App.jsx", "content": "import \"../scss/main.scss\";\nimport { Component } from \"react\";\nimport Layout from \"./Layout\";\n\nclass App extends Component {\n render() {\n return ;\n }\n}\n\nexport default App;\n" }, { "path": "src/components/InfoPopup.jsx", "content": "import Popup from \"./atoms/Popup\";\nimport copy from \"../common/data/copy.json\";\n\nconst Infopopup = ({ isOpen, onClose, language, styles }) => (\n \n);\n\nexport default Infopopup;\n" }, { "path": "src/components/Layout.jsx", "content": "import { Component } from \"react\";\n\nimport { bindActionCreators } from \"redux\";\nimport { connect } from \"react-redux\";\nimport * as actions from \"../actions\";\nimport * as selectors from \"../selectors\";\n\nimport Toolbar from \"./Toolbar\";\nimport InfoPopup from \"./InfoPopup\";\nimport Notification from \"./Notification\";\nimport TemplateCover from \"./TemplateCover\";\n\nimport Popup from \"./atoms/Popup\";\nimport StaticPage from \"./atoms/StaticPage\";\nimport MediaOverlay from \"./atoms/Media\";\nimport LoadingOverlay from \"./atoms/Loading\";\n\nimport Timeline from \"./time/Timeline\";\nimport Space from \"./space/Space\";\nimport Search from \"./controls/Search\";\nimport CardStack from \"./controls/CardStack\";\nimport NarrativeControls from \"./controls/NarrativeControls\";\n\nimport colors from \"../common/global\";\nimport { binarySearch, insetSourceFrom } from \"../common/utilities\";\n\nclass Dashboard extends Component {\n constructor(props) {\n super(props);\n\n this.handleViewSource = this.handleViewSource.bind(this);\n this.handleHighlight = this.handleHighlight.bind(this);\n this.setNarrative = this.setNarrative.bind(this);\n this.setNarrativeFromFilters = this.setNarrativeFromFilters.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n this.getCategoryColor = this.getCategoryColor.bind(this);\n this.findEventIdx = this.findEventIdx.bind(this);\n this.onKeyDown = this.onKeyDown.bind(this);\n this.selectNarrativeStep = this.selectNarrativeStep.bind(this);\n }\n\n componentDidMount() {\n this.props.actions.fetchDomain().then((domain) => {\n this.props.actions.updateDomain({\n domain,\n features: this.props.features,\n });\n this.props.actions.rehydrateState();\n });\n\n // NOTE: hack to get the timeline to always show. Not entirely sure why\n // this is necessary.\n window.dispatchEvent(new Event(\"resize\"));\n }\n\n handleHighlight(highlighted) {\n this.props.actions.updateHighlighted(highlighted || null);\n }\n\n handleViewSource(source) {\n this.props.actions.updateSource(source);\n }\n\n findEventIdx(theEvent) {\n const { events } = this.props.domain;\n return binarySearch(events, theEvent, (theev, otherev) => {\n return theev.datetime - otherev.datetime;\n });\n }\n\n handleSelect(selected, axis) {\n if (selected.length <= 0) {\n this.props.actions.updateSelected([]);\n return;\n }\n\n const matchedEvents = [];\n const TIMELINE_AXIS = 0;\n if (axis === TIMELINE_AXIS) {\n matchedEvents.push(selected);\n // find in events\n const { events } = this.props.domain;\n const idx = this.findEventIdx(selected);\n // binary search can return event with different id\n if (events[idx].id !== selected.id) {\n matchedEvents.push(events[idx]);\n }\n\n // check events before\n let ptr = idx - 1;\n while (\n ptr >= 0 &&\n events[idx].datetime.getTime() === events[ptr].datetime.getTime()\n ) {\n if (events[ptr].id !== selected.id) {\n matchedEvents.push(events[ptr]);\n }\n ptr -= 1;\n }\n\n // check events after\n ptr = idx + 1;\n while (\n ptr < events.length &&\n events[idx].datetime.getTime() === events[ptr].datetime.getTime()\n ) {\n if (events[ptr].id !== selected.id) {\n matchedEvents.push(events[ptr]);\n }\n ptr += 1;\n }\n } else {\n // Map..\n const std = { ...selected };\n delete std.sources;\n Object.values(std).forEach((ev) => matchedEvents.push(ev));\n }\n\n this.props.actions.updateSelected(matchedEvents);\n }\n\n getCategoryColor(category) {\n if (!this.props.features.USE_CATEGORIES) {\n return colors.fallbackEventColor;\n }\n\n const cat = this.props.ui.style.categories[category];\n if (cat) {\n return cat;\n } else {\n return this.props.ui.style.categories.default;\n }\n }\n\n setNarrative(narrative) {\n // only handleSelect if narrative is not null and has associated events\n if (narrative && narrative.steps.length >= 1) {\n this.handleSelect([narrative.steps[0]]);\n }\n this.props.actions.updateNarrative(narrative);\n }\n\n setNarrativeFromFilters(withSteps) {\n const { app, domain } = this.props;\n let activeFilters = app.associations.filters;\n\n if (activeFilters.length === 0) {\n alert(\"No filters selected, cant narrativise\");\n return;\n }\n\n activeFilters = activeFilters.map((f) => ({ name: f }));\n\n const evs = domain.events.filter((ev) => {\n let hasOne = false;\n // add event if it has at least one matching filter\n for (let i = 0; i < activeFilters.length; i++) {\n if (ev.associations.includes(activeFilters[i].name)) {\n hasOne = true;\n break;\n }\n }\n if (hasOne) return true;\n return false;\n });\n\n if (evs.length === 0) {\n alert(\"No associated events, cant narrativise\");\n return;\n }\n\n const name = activeFilters.map((f) => f.name).join(\"-\");\n const desc = activeFilters.map((f) => f.description).join(\"\\n\\n\");\n this.setNarrative({\n id: name,\n label: name,\n description: desc,\n withLines: withSteps,\n steps: evs.map(insetSourceFrom(domain.sources)),\n });\n }\n\n selectNarrativeStep(idx) {\n // Try to find idx if event passed rather than number\n if (typeof idx !== \"number\") {\n const e = idx[0] || idx;\n\n if (this.props.app.associations.narrative) {\n const { steps } = this.props.app.associations.narrative;\n // choose the first event at a given location\n const locationEventId = e.id;\n const narrativeIdxObj = steps.find((s) => s.id === locationEventId);\n const narrativeIdx = steps.indexOf(narrativeIdxObj);\n\n if (narrativeIdx > -1) {\n idx = narrativeIdx;\n }\n }\n }\n\n const { narrative } = this.props.app.associations;\n if (narrative === null) return;\n\n if (idx < narrative.steps.length && idx >= 0) {\n const step = narrative.steps[idx];\n\n this.handleSelect([step]);\n this.props.actions.updateNarrativeStepIdx(idx);\n }\n }\n\n onKeyDown(e) {\n const { narrative, selected } = this.props.app;\n const { events } = this.props.domain;\n\n const prev = (idx) => {\n if (narrative === null) {\n this.handleSelect(events[idx - 1], 0);\n } else {\n this.selectNarrativeStep(this.props.narrativeIdx - 1);\n }\n };\n const next = (idx) => {\n if (narrative === null) {\n this.handleSelect(events[idx + 1], 0);\n } else {\n this.selectNarrativeStep(this.props.narrativeIdx + 1);\n }\n };\n if (selected.length > 0) {\n const ev = selected[selected.length - 1];\n const idx = this.findEventIdx(ev);\n switch (e.keyCode) {\n case 37: // left arrow\n case 38: // up arrow\n if (idx <= 0) return;\n prev(idx);\n break;\n case 39: // right arrow\n case 40: // down arrow\n if (idx < 0 || idx >= this.props.domain.length - 1) return;\n next(idx);\n break;\n default:\n }\n }\n }\n\n renderIntroPopup(styles) {\n const { app, actions } = this.props;\n const localStorageKey = \"rememberDismissedIntro2\"; // can be incremented when new data appears on the cover\n\n let searchParams = new URLSearchParams(window.location.href.split(\"?\")[1]);\n let rememberDismissedIntro =\n localStorage.getItem(localStorageKey) === \"true\";\n let forceShowIntro = searchParams.get(\"cover\") === \"true\";\n if (\n (forceShowIntro || !rememberDismissedIntro) &&\n !searchParams.has(\"id\")\n ) {\n return (\n {\n actions.toggleIntroPopup();\n localStorage.setItem(localStorageKey, \"true\");\n }}\n content={app.intro}\n styles={styles}\n >\n );\n } else {\n return null;\n }\n }\n\n render() {\n const { actions, app, domain, timeline, features } = this.props;\n\n const popupStyles = {};\n\n return (\n
\n {\n \n actions.toggleAssociations(\"filters\", filters),\n onCategoryFilter: (categories) =>\n actions.toggleAssociations(\"categories\", categories),\n onShapeFilter: actions.toggleShapes,\n onSelectNarrative: this.setNarrative,\n }}\n />\n }\n this.handleSelect(ev, 1),\n }}\n />\n {\n this.handleSelect(ev, 0),\n onUpdateTimerange: actions.updateTimeRange,\n getCategoryColor: this.getCategoryColor,\n }}\n />\n }\n null\n }\n onHighlight={this.handleHighlight}\n onToggleCardstack={() => actions.updateSelected([])}\n getCategoryColor={this.getCategoryColor}\n />\n this.selectNarrativeStep(this.props.narrativeIdx + 1),\n onPrev: () => this.selectNarrativeStep(this.props.narrativeIdx - 1),\n onSelectNarrative: this.setNarrative,\n }}\n />\n \n {this.renderIntroPopup(popupStyles)}\n {app.debug ? (\n \n ) : null}\n {features.USE_SEARCH && (\n \n )}\n {app.source ? (\n {\n actions.updateSource(null);\n }}\n />\n ) : null}\n \n {features.USE_COVER && (\n \n {/* enable USE_COVER in config.js features, and customise your header */}\n {/* pass 'actions.toggleCover' as a prop to your custom header */}\n \n \n )}\n
\n );\n }\n}\n\nfunction mapDispatchToProps(dispatch) {\n return {\n actions: bindActionCreators(actions, dispatch),\n };\n}\n\nexport default connect(\n (state) => ({\n ...state,\n timeline: {\n dimensions: selectors.selectDimensions(state),\n },\n narrativeIdx: selectors.selectNarrativeIdx(state),\n narratives: selectors.selectNarratives(state),\n selected: selectors.selectSelected(state),\n }),\n mapDispatchToProps\n)(Dashboard);\n" }, { "path": "src/components/Notification.jsx", "content": "import { Component } from \"react\";\n\nexport default class Notification extends Component {\n constructor(props) {\n super();\n this.state = {\n isExtended: false,\n };\n }\n\n toggleDetails() {\n this.setState({ isExtended: !this.state.isExtended });\n }\n\n renderItems(items) {\n if (!items) return \"\";\n return (\n
\n {items.map((item, idx) => {\n if (item.error) {\n return

{item.error.message}

;\n }\n return null;\n })}\n
\n );\n }\n\n renderNotificationContent(notification) {\n const { type, message, items } = notification;\n\n return (\n
\n
{message}
\n
\n {items !== null ? this.renderItems(items) : \"\"}\n
\n
\n );\n }\n\n render() {\n if (!this.props.notifications) return null;\n const notificationsToRender = this.props.notifications.filter(\n (n) => !(\"isRead\" in n && n.isRead)\n );\n if (notificationsToRender.length > 0) {\n return (\n
\n {this.props.notifications.map((notification, idx) => {\n return (\n this.toggleDetails()}\n key={idx}\n >\n \n \n \n {this.renderNotificationContent(notification)}\n
\n );\n })}\n \n );\n }\n return
;\n }\n}\n" }, { "path": "src/components/Portal.jsx", "content": "import { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nclass Portal extends Component {\n render() {\n const { children, node } = this.props;\n if (!node) return null;\n return ReactDOM.createPortal(children, node);\n }\n}\n\nexport default Portal;\n" }, { "path": "src/components/TemplateCover.jsx", "content": "import { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Player } from \"video-react\";\nimport { marked } from \"marked\";\nimport MediaOverlay from \"./atoms/Media\";\n// import falogo from \"../assets/fa-logo.png\";\nimport bcatlogo from \"../assets/bellingcat-logo.png\";\nconst MEDIA_HIDDEN = -2;\n\n/**\n * Manages the presentation of props that come in from the store's app.cover.\n * These are documented in docs/custom-cover.md.\n * The component is a bit of a mess, keeping a lot of internal state and using\n * a couple of weird offset calculations... but it works for the time being.\n */\nclass TemplateCover extends Component {\n constructor(props) {\n super(props);\n this.state = {\n video: MEDIA_HIDDEN,\n featureLang: 0,\n };\n }\n\n getVideo(index, headerEndIndex) {\n if (index < headerEndIndex) {\n return this.props.cover.headerVideos[index];\n } else if (index >= 0) {\n return this.props.cover.videos[index - headerEndIndex];\n } else {\n return null;\n }\n }\n\n onVideoClickHandler(index) {\n const buffer = this.props.cover.headerVideos\n ? this.props.cover.headerVideos.length\n : 0;\n return () => {\n this.setState({\n video: index + buffer,\n });\n };\n }\n\n renderFeature() {\n const { featureVideo } = this.props.cover;\n const { featureLang } = this.state;\n const { translations } = featureVideo;\n const source =\n featureLang === 0\n ? featureVideo\n : {\n ...translations[featureLang - 1],\n poster: featureVideo.poster,\n };\n\n return (\n
\n
\n {translations &&\n translations.map((trans, idx) => {\n const langIdx = idx + 1; // default lang idx is 0\n if (featureLang !== langIdx) {\n return (\n this.setState({ featureLang: langIdx })}\n className=\"trans-button\"\n >\n {trans.code}\n
\n );\n } else {\n return (\n this.setState({ featureLang: 0 })}\n className=\"trans-button\"\n >\n ENG\n
\n );\n }\n })}\n
\n\n \n \n );\n }\n\n renderHeaderVideos() {\n const { headerVideos } = this.props.cover;\n return (\n
\n {headerVideos.slice(0, 2).map((media, index) => (\n this.setState({ video: index })}\n >\n {media.buttonTitle}\n
\n ))}\n \n );\n }\n\n renderButton(button, yellow) {\n return (\n \n );\n }\n\n renderMediaOverlay() {\n const video = this.getVideo(\n this.state.video,\n this.props.cover.headerVideos ? this.props.cover.headerVideos.length : 0\n );\n return (\n this.setState({ video: MEDIA_HIDDEN })}\n />\n );\n }\n\n render() {\n if (!this.props.cover) {\n return (\n
\n You haven't specified any cover props. Put them in the values that\n overwrite the store in app.cover\n
\n );\n }\n\n const { videos, footerButton } = this.props.cover;\n const { showing } = this.props;\n return (\n
\n
\n \n \"Bellingcat\n \n
\n
\n {this.props.cover.bgVideo ? (\n \n \n \n \n
\n ) : null}\n

\n {this.props.cover.subtitle ? (\n

{this.props.cover.subtitle}

\n ) : null}\n {this.props.cover.subsubtitle ? (\n
{this.props.cover.subsubtitle}
\n ) : null}\n\n {this.props.cover.featureVideo ? this.renderFeature() : null}\n
\n {this.props.cover.headerVideos ? this.renderHeaderVideos() : null}\n {this.props.cover.headerButton\n ? this.renderButton(this.props.cover.headerButton)\n : null}\n
\n
\n {this.props.cover.exploreButton}\n
\n
\n
\n\n {Array.isArray(this.props.cover.description) ? (\n this.props.cover.description.map((e, index) => (\n \n ))\n ) : (\n \n )}\n\n {videos ? (\n
\n
\n {/* NOTE: only take first four videos, drop any others for style reasons */}\n {videos &&\n videos.slice(0, 2).map((media, index) => (\n \n {media.buttonTitle}\n
\n {media.buttonSubtitle}\n
\n ))}\n
\n
\n {videos.length > 2 &&\n this.props.cover.videos.slice(2, 4).map((media, index) => (\n \n {media.buttonTitle}\n
\n {media.buttonSubtitle}\n
\n ))}\n
\n \n ) : null}\n {footerButton ? (\n
\n
{this.renderButton(footerButton)}
\n
\n ) : null}\n \n\n {this.state.video !== MEDIA_HIDDEN ? this.renderMediaOverlay() : null}\n \n );\n }\n}\n\nfunction mapStateToProps(state) {\n return {\n cover: state.app.cover,\n };\n}\n\nexport default connect(mapStateToProps)(TemplateCover);\n" }, { "path": "src/components/Toolbar.jsx", "content": "import { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { bindActionCreators } from \"redux\";\nimport * as actions from \"../actions\";\nimport * as selectors from \"../selectors\";\nimport config from \"../../config\";\n\nimport { Tabs, TabList, TabPanel } from \"react-tabs\";\nimport FilterListPanel from \"./controls/FilterListPanel\";\nimport CategoriesListPanel from \"./controls/CategoriesListPanel\";\nimport ShapesListPanel from \"./controls/ShapesListPanel\";\nimport BottomActions from \"./controls/BottomActions\";\nimport copy from \"../common/data/copy.json\";\nimport {\n trimAndEllipse,\n getImmediateFilterParent,\n getFilterSiblings,\n getFilterAncestors,\n addToColoringSet,\n removeFromColoringSet,\n mapCategoriesToPaths,\n getCategoryIdxs,\n getFilterIdx,\n} from \"../common/utilities\";\nimport { ToolbarButton } from \"./controls/atoms/ToolbarButton\";\nimport { FullscreenToggle } from \"./controls/FullScreenToggle\";\nimport DownloadPanel from \"./controls/DownloadPanel\";\n\nclass Toolbar extends Component {\n constructor(props) {\n super(props);\n this.onSelectFilter = this.onSelectFilter.bind(this);\n this.state = { _selected: 0, _active: false };\n }\n\n selectTab(selected) {\n let active = true;\n if (this.state._selected === selected && this.state._active === true) {\n active = false;\n }\n this.setState({ _selected: selected, _active: active });\n }\n\n onSelectFilter(key, matchingKeys) {\n const { filters, activeFilters, coloringSet, maxNumOfColors } = this.props;\n\n const parent = getImmediateFilterParent(key);\n const isTurningOff = activeFilters.includes(key);\n\n if (!isTurningOff) {\n const updatedColoringSet = addToColoringSet(coloringSet, matchingKeys);\n if (updatedColoringSet.length <= maxNumOfColors) {\n this.props.actions.updateColoringSet(updatedColoringSet);\n }\n } else {\n if (parent && activeFilters.includes(parent)) {\n const siblings = getFilterSiblings(filters, parent, key);\n let siblingsOff = true;\n for (const sibling of siblings) {\n if (activeFilters.includes(sibling)) {\n siblingsOff = false;\n break;\n }\n }\n\n if (siblingsOff) {\n const grandparentsOn = getFilterAncestors(key).filter((filt) =>\n activeFilters.includes(filt)\n );\n matchingKeys = matchingKeys.concat(grandparentsOn);\n }\n }\n\n const updatedColoringSet = removeFromColoringSet(\n coloringSet,\n matchingKeys\n );\n this.props.actions.updateColoringSet(updatedColoringSet);\n }\n this.props.methods.onSelectFilter(matchingKeys);\n this.props.actions.updateSelected([]);\n }\n\n renderClosePanel() {\n return (\n this.selectTab(this.state._selected)}\n >\n
\n
\n );\n }\n\n goToNarrative(narrative) {\n // this.selectTab(-1); // set all unselected within this component\n this.props.methods.onSelectNarrative(narrative);\n }\n\n renderToolbarNarrativePanel() {\n const { panels } = this.props.toolbarCopy;\n return (\n \n

{panels.narratives.label}

\n

{panels.narratives.description}

\n {this.props.narratives.map((narr) => {\n return (\n
\n {\n this.goToNarrative(narr);\n }}\n >\n

{narr.id}

\n

\n {trimAndEllipse(narr.desc, 120)}\n

\n \n
\n );\n })}\n \n );\n }\n\n renderToolbarCategoriesPanel() {\n const { categories: panelCategories } = this.props.toolbarCopy.panels;\n const catMap = mapCategoriesToPaths(\n this.props.categories,\n Object.keys(panelCategories)\n );\n\n return (\n
\n {Object.keys(catMap).map((type) => {\n const children = catMap[type];\n return (\n \n \n \n );\n })}\n
\n );\n }\n\n renderToolbarFilterPanel() {\n const { panels } = this.props.toolbarCopy;\n return (\n \n \n \n );\n }\n\n renderToolbarShapePanel() {\n const { panels } = this.props.toolbarCopy;\n\n if (this.props.features.USE_SHAPES) {\n return (\n \n \n \n );\n }\n }\n\n renderToolbarDownloadPanel() {\n const { panels } = this.props.toolbarCopy;\n\n return (\n \n \n \n );\n }\n\n renderToolbarTab(_selected, label, iconKey, key) {\n return (\n {\n this.selectTab(_selected);\n }}\n />\n );\n }\n\n renderToolbarCategoryTabs(idxs) {\n const { categories: panelCategories } = this.props.toolbarCopy.panels;\n return (\n
\n {Object.keys(idxs).map((key) => {\n return this.renderToolbarTab(\n idxs[key],\n panelCategories[key].label,\n panelCategories[key].icon,\n key\n );\n })}\n
\n );\n }\n\n renderToolbarPanels() {\n const { features, narratives } = this.props;\n const classes =\n this.state._active === true ? \"toolbar-panels\" : \"toolbar-panels folded\";\n return (\n
\n {this.renderClosePanel()}\n {narratives && narratives.length !== 0\n ? this.renderToolbarNarrativePanel()\n : null}\n {features.USE_CATEGORIES ? this.renderToolbarCategoriesPanel() : null}\n {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}\n {features.USE_SHAPES ? this.renderToolbarShapePanel() : null}\n {features.USE_DOWNLOAD ? this.renderToolbarDownloadPanel() : null}\n
\n );\n }\n\n renderToolbarNavs() {\n if (this.props.narratives) {\n return this.props.narratives.map((nar, idx) => {\n const isActive =\n idx === this.state._selected && this.state._active === true;\n\n const classes = isActive ? \"toolbar-tab active\" : \"toolbar-tab\";\n\n return (\n {\n this.selectTab(idx);\n }}\n >\n
{nar.label}
\n \n );\n });\n }\n return null;\n }\n\n renderToolbarTabs() {\n const { features, narratives, toolbarCopy } = this.props;\n const narrativesExist = narratives && narratives.length !== 0;\n let title = copy[this.props.language].toolbar.title;\n if (config.display_title) title = config.display_title;\n const { panels } = toolbarCopy;\n\n const narrativesIdx = 0;\n const categoryIdxs = getCategoryIdxs(\n Object.keys(panels.categories),\n narrativesExist ? 1 : 0\n );\n const numCategoryPanels = Object.keys(categoryIdxs).length;\n const filtersIdx = getFilterIdx(\n narrativesExist,\n features.USE_CATEGORIES,\n numCategoryPanels || 0\n );\n const shapesIdx = filtersIdx + features.USE_SHAPES;\n const downloadIdx = shapesIdx + features.USE_DOWNLOAD;\n\n return (\n
\n
\n

{title}

\n
\n
\n \n {narrativesExist\n ? this.renderToolbarTab(\n narrativesIdx,\n panels.narratives.label,\n panels.narratives.icon\n )\n : null}\n {features.USE_CATEGORIES\n ? this.renderToolbarCategoryTabs(categoryIdxs)\n : null}\n {features.USE_ASSOCIATIONS\n ? this.renderToolbarTab(\n filtersIdx,\n panels.filters.label,\n panels.filters.icon\n )\n : null}\n {features.USE_SHAPES\n ? this.renderToolbarTab(\n shapesIdx,\n panels.shapes.label,\n panels.shapes.icon\n )\n : null}\n {features.USE_DOWNLOAD\n ? this.renderToolbarTab(\n downloadIdx,\n panels.download.label,\n panels.download.icon\n )\n : null}\n {features.USE_FULLSCREEN && (\n \n )}\n \n
\n \n\n
\n Made with{\" \"}\n TimeMap\n
\n Free software from{\" \"}\n Forensic Architecture\n
\n
\n );\n }\n\n render() {\n const { isNarrative } = this.props;\n\n return (\n \n null} selectedIndex={this.state._selected}>\n {this.renderToolbarTabs()}\n {this.renderToolbarPanels()}\n \n \n );\n }\n}\n\nfunction mapStateToProps(state) {\n return {\n filters: selectors.getFilters(state),\n categories: selectors.getCategories(state),\n narratives: selectors.selectNarratives(state),\n shapes: selectors.getShapes(state),\n language: state.app.language,\n toolbarCopy: state.app.toolbar,\n activeFilters: selectors.getActiveFilters(state),\n activeCategories: selectors.getActiveCategories(state),\n activeShapes: selectors.getActiveShapes(state),\n viewFilters: state.app.associations.views,\n narrative: state.app.associations.narrative,\n sitesShowing: state.app.flags.isShowingSites,\n infoShowing: state.app.flags.isInfopopup,\n coloringSet: state.app.associations.coloringSet,\n maxNumOfColors: state.ui.coloring.maxNumOfColors,\n filterColors: state.ui.coloring.colors,\n eventRadius: state.ui.eventRadius,\n features: selectors.getFeatures(state),\n };\n}\n\nfunction mapDispatchToProps(dispatch) {\n return {\n actions: bindActionCreators(actions, dispatch),\n };\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Toolbar);\n" }, { "path": "src/components/atoms/Checkbox.jsx", "content": "import { DEFAULT_CHECKBOX_COLOR } from \"../../common/constants\";\n\nconst Checkbox = ({ label, isActive, onClickCheckbox, color, styleProps }) => {\n const checkboxColor = color ? color : DEFAULT_CHECKBOX_COLOR;\n const baseStyles = {\n checkboxStyles: {\n background: isActive ? checkboxColor : \"none\",\n border: `1px solid ${checkboxColor}`,\n },\n };\n const containerStyles = styleProps ? styleProps.containerStyles : {};\n const checkboxStyles = styleProps\n ? styleProps.checkboxStyles\n : baseStyles.checkboxStyles;\n\n const generatedId = label.toLowerCase().replaceAll(\" \", \"-\");\n const onClickCheckboxWrapper = (e) => {\n // stop propagation in order to call method only one time\n e.stopPropagation();\n onClickCheckbox(e);\n };\n return (\n \n \n \n \n );\n};\n\nexport default Checkbox;\n" }, { "path": "src/components/atoms/CoeventIcon.jsx", "content": "const CoeventIcon = ({ isEnabled, toggleMapViews }) => {\n return (\n \n );\n};\n\nexport default CoeventIcon;\n" }, { "path": "src/components/atoms/ColoredMarkers.jsx", "content": "import { getCoordinatesForPercent } from \"../../common/utilities\";\n\nfunction ColoredMarkers({ radius, colorPercentMap, styles, className }) {\n let cumulativeAngleSweep = 0;\n const colors = Object.keys(colorPercentMap);\n\n return (\n <>\n {colors.map((color, idx) => {\n const colorPercent = colorPercentMap[color];\n\n const [startX, startY] = getCoordinatesForPercent(\n radius,\n cumulativeAngleSweep\n );\n\n cumulativeAngleSweep += colorPercent;\n\n const [endX, endY] = getCoordinatesForPercent(\n radius,\n cumulativeAngleSweep\n );\n // if the slices are less than 2, take the long arc\n const largeArcFlag = colors.length === 1 || colorPercent > 0.5 ? 1 : 0;\n\n // create an array and join it just for code readability\n const arc = [\n `M ${startX} ${startY}`, // Move\n `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc\n \"L 0 0 \", // Line\n `L ${startX} ${startY} Z`, // Line\n ].join(\" \");\n\n const extraStyles = {\n ...styles,\n fill: color,\n };\n\n return (\n \n );\n })}\n \n );\n}\n\nexport default ColoredMarkers;\n" }, { "path": "src/components/atoms/Content.jsx", "content": "import { Player } from \"video-react\";\nimport { Img } from \"react-image\";\nimport Md from \"./Md\";\nimport Spinner from \"../atoms/Spinner\";\nimport NoSource from \"../atoms/NoSource\";\n\nconst Content = ({ media, viewIdx, translations, switchLanguage, langIdx }) => {\n const el = document.querySelector(\".source-media-gallery\");\n const shiftW = el ? el.getBoundingClientRect().width : 0;\n\n function renderMedia(media) {\n const { path, type, poster } = media;\n switch (type) {\n case \"Image\":\n return (\n
\n \n \n
\n }\n unloader={}\n onClick={() => window.open(path, \"_blank\")}\n />\n \n );\n case \"Video\":\n return (\n
\n
\n {translations\n ? translations.map((trans, idx) =>\n langIdx !== idx + 1 ? (\n switchLanguage(idx + 1)}\n >\n {trans.code}\n
\n ) : (\n switchLanguage(0)}\n >\n EN\n
\n )\n )\n : null}\n \n \n \n );\n case \"Text\":\n return (\n
\n }\n unloader={() => this.renderError()}\n />\n
\n );\n case \"Document\":\n return