new build

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules/
+public/build/

public/build/bundle.css.map

@@ -40,7 +40,7 @@
   ],
   "sourcesContent": [
     "<script>\n  // the root component\n  import Catch from './Catch.svelte';\n  import Visualization from './components/Visualization.svelte';\n  import CookieBanner from './CookieBanner.svelte';\n\n  let width;\n\n  console.log('🎉 Fantastic! You are interested in our source code! Check it out – uncompiled: https://github.com/DFRLab/interference2020');\n</script>\n\n<div class=\"app-wrapper\" bind:clientWidth={width}>\n  <CookieBanner />\n  {#if (width < 600)}\n    <Catch content={'Please visit us on a larger screen to explore the visualization.'} />\n  {:else if (/MSIE|Trident/.test(window.navigator.userAgent))}\n    <Catch content={'Please visit us with a modern browser.'} />\n  {:else}\n    <Visualization />\n  {/if}\n</div>\n\n<style>\n  .app-wrapper {\n    width: 100%;\n    margin: 0;\n    padding: 0.3rem 0;\n  }\n</style>\n",
-    "<script>\n  // shown when the viz cannot be displayed\n  export let content = '';\n\n  function sendMail() {\n    const subject = encodeURIComponent('Foreign Interference Attribution Tracker');\n    const body = encodeURIComponent('I have seen this project on the web:\\nhttps://interference2020.org');\n    window.location.href = `mailto:?subject=${subject}&body=${body}`;\n  }\n</script>\n\n<section class=\"content catch\">\n  <p>{content}</p>\n  <span class=\"pseudolink\" on:click={sendMail}>Send eMail with link.</span>\n</section>\n<div class=\"placeholder-image\">\n  <img src=\"images/screenshots/fiat_placeholder.jpg\" alt=\"Screenshot of the visualization showing red balloons on a timeline.\" />\n</div>\n\n<style>\n  section.catch {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    max-width: none;\n    margin: 2rem 0;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  p, span {\n    width: 100%;\n    margin: 1rem 0;\n    font-family: var(--font-02);\n    font-size: 1.1rem;\n    color: var(--text-black);\n    text-align: center;\n  }\n\n  .placeholder-image {\n    width: 100%;\n    max-width: 1100px;\n    margin: 0 auto;\n    overflow: hidden;\n  }\n\n  img {\n    width: 100%;\n  }\n</style>\n",
+    "<script>\n  // shown when the viz cannot be displayed\n  export let content = '';\n\n  function sendMail() {\n    const subject = encodeURIComponent('Foreign Interference Attribution Tracker');\n    const body = encodeURIComponent('I have seen this project on the web:\\nhttps://interference2020.org');\n    window.location.href = `mailto:?subject=${subject}&body=${body}`;\n  }\n</script>\n\n<section class=\"content catch\">\n  <p>{content}</p>\n  <span class=\"pseudolink\" on:click={sendMail}>Send Email with Link</span>\n</section>\n<div class=\"placeholder-image\">\n  <img src=\"images/screenshots/fiat_placeholder.jpg\" alt=\"Screenshot of the visualization showing red balloons on a timeline.\" />\n</div>\n\n<style>\n  section.catch {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    max-width: none;\n    margin: 2rem 0;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  p, span {\n    width: 100%;\n    margin: 1rem 0;\n    font-family: var(--font-02);\n    font-size: 1.1rem;\n    color: var(--text-black);\n    text-align: center;\n  }\n\n  .placeholder-image {\n    width: 100%;\n    max-width: 1100px;\n    margin: 0 auto;\n    overflow: hidden;\n  }\n\n  img {\n    width: 100%;\n  }\n</style>\n",
     "<script>\n  // the cookie banner\n</script>\n\n<div id=\"cookies-eu-banner\">\n  <div class=\"content\">\n    <p>This page wants to use cookies.</p>\n    <button id=\"cookies-eu-accept\">Accept</button>\n    <button id=\"cookies-eu-reject\">Reject</button>\n    <a href=\"https://www.atlanticcouncil.org/privacy-policy/\" target=\"_blank\">Privacy</a>\n  </div>\n</div>\n\n<style>\n  #cookies-eu-banner {\n    display: none;\n    width: 100%;\n    min-height: 10%;\n    padding: 1rem;\n    color: var(--bg);\n    font-family: var(--font-02);\n    font-size: 1rem;\n    opacity: 0.95;\n    background-color: var(--usa-lightred);\n    position: fixed;\n    z-index: 1000000;\n    left: 0;\n    bottom: 0;\n  }\n\n  .content {\n    display: flex;\n    align-items: baseline;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  .content > p, button {\n    margin-right: 1rem;\n  }\n\n  button {\n    cursor: pointer;\n  }\n\n  #cookies-eu-banner button {\n    padding: 0.1rem 0.3rem;\n    font-size: 1rem;\n    font-weight: normal;\n    text-decoration: none;\n    border: 1px solid var(--bg);\n    border-radius: 2px;\n    outline: none;\n    position: relative;\n  }\n\n  button#cookies-eu-reject {\n    color: var(--bg);\n    background-color: var(--usa-lightred);\n  }\n\n  button#cookies-eu-accept {\n    color: var(--usa-lightred);\n    background-color: var(--bg);\n  }\n\n  a {\n    display: block;\n    justify-self: flex-end;\n    font-size: 0.8rem;\n    color: var(--bg);\n  }\n</style>\n",
     "<script>\n  // the single balloon implementation\n  import { onMount } from 'svelte';\n  import { fade } from 'svelte/transition';\n  import { width, height } from '../stores/dimensions';\n  import { oneLineTrim } from 'common-tags';\n  import { bloomDuration, growDuration, jitterFactor } from '../transitions/constants';\n  import { usaRed } from '../utils/colors';\n  import { sortConsistently } from '../utils/misc';\n  import { createEventDispatcher } from 'svelte';\n\n  import EventTooltip from './EventTooltip.svelte';\n\n  export let timePoint;\n  export let selected = false;\n\n  const dispatch = createEventDispatcher();\n\n  function handleMouseOver(e) {\n    if (e.buttons === 1) return;\n    dispatch('mouseover', {id: timePoint.id, tp: timePoint, e})\n  }\n\n  function handleMouseClick(e) {\n    dispatch('click', {id: timePoint.id, tp: timePoint, e})\n  }\n</script>\n\n<g class=\"balloon\"\n   class:selected\n   transform=\"translate({timePoint.x} {timePoint.fy})\"\n   on:mouseover|stopPropagation={handleMouseOver}\n   on:click|stopPropagation={handleMouseClick}\n   in:fade|local={{duration: bloomDuration, delay: growDuration + timePoint.id * jitterFactor}}\n   out:fade|local={{duration: bloomDuration, delay: timePoint.id * jitterFactor}}>\n  {#if (timePoint.recentlyAdded)}\n    <circle class=\"glow\"\n            cx=\"0\"\n            cy=\"0\"\n            r={timePoint.rSmiTot * 0.95}></circle>\n  {/if}\n  <circle class=\"balloon-main\"\n          cx=\"0\"\n          cy=\"0\"\n          r={timePoint.rSmiTot}\n          fill={timePoint.color}></circle>\n  <circle class=\"balloon-effect\"\n          class:smi-pending={timePoint.smiPending}\n          cx=\"0\"\n          cy=\"0\"\n          r={timePoint.rSmiTot}></circle>\n</g>\n\n<style>\n  circle {\n    stroke: none;\n    opacity: 1;\n  }\n\n  .balloon {\n    cursor: pointer;\n  }\n\n  .glow {\n    stroke: var(--usa-lightred);\n    stroke-width: 0.05rem;\n    fill: none;\n    animation: pulse 3s infinite ease-in-out;\n    animation-iteration-count: 20;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .balloon-effect {\n    fill: url('#radial-gradient');\n  }\n\n  .balloon-effect.smi-pending {\n    stroke: var(--usa-lightblue);\n    stroke-width: 0.18rem;\n    stroke-linecap: round;\n    stroke-dasharray: 3px 5px;\n  }\n\n  .selected .balloon-effect {\n    stroke: var(--usa-blue);\n    stroke-width: 0.18rem;\n  }\n\n  @keyframes pulse {\n    0% {\n      transform: scale(0.5);\n      opacity: 0.9;\n    }\n    50% {\n      opacity: 0.8;\n    }\n    70% {\n      opacity: 0.09;\n    }\n    100% {\n      transform: scale(3);\n      opacity: 0;\n    }\n  }\n</style>\n",
     "<script>\n  // the time scale brush / zoom\n  import { onMount } from 'svelte';\n  import { timeScale } from '../stores/scales';\n  import { panelHeight, margin } from '../stores/dimensions';\n  import { brushable } from '../actions/brushable';\n  import { originalTimeDomain } from '../stores/filters';\n\n  let x = 0;\n  let fx = 0;\n  let fy = 0;\n  let width = 0;\n  let fWidth = 0;\n  let fHeight = 0;\n  let resetText;\n\n  let invisible = true;\n\n  function resetBrush() {\n    x = fx = $timeScale.range()[0];\n    fy = $margin.top;\n    width = fWidth = $timeScale.range()[1] - $timeScale.range()[0];\n    fHeight = ($panelHeight - $margin.top) * 1.05;\n  }\n\n  function resetTimeDomain() {\n    if ($originalTimeDomain) {\n      $timeScale.domain($originalTimeDomain);\n      $originalTimeDomain = null;\n      $timeScale = $timeScale;\n    }\n  }\n\n  function handleBrushStart(e) {\n    invisible = false;\n    width = 0;\n  }\n\n  function handleBrush(e) {\n    width = e.detail.width;\n    x = e.detail.x;\n  }\n\n  function handleBrushEnd(e) {\n    invisible = true;\n\n    const { x1, x2 } = e.detail;\n    if (!x1 || !x2 || isNaN(x1) || isNaN(x2) || Math.abs(x2 - x1) < 10) return;\n\n    if (!$originalTimeDomain) $originalTimeDomain = [...$timeScale.domain()];\n\n    $timeScale.domain([$timeScale.invert(x1), $timeScale.invert(x2)]);\n    $timeScale = $timeScale;\n    \n    resetBrush();\n  }\n\n  function handleKeyUp(e) {\n    if (e.keyCode === 27) {\n      resetTimeDomain();\n    }\n  }\n\n  function handleResetButtonClick() {\n    resetTimeDomain();\n  }\n\n  onMount(() => {\n    resetBrush();\n  });\n</script>\n\n<svelte:window on:keyup={handleKeyUp}/>\n\n<g class=\"brush disable-select\">\n  <rect class=\"brush-area\"\n        class:invisible\n        x={x}\n        y={$panelHeight - 40}\n        width={width}\n        height={80}\n        rx=\"3\"\n        ry=\"3\"></rect>\n  <rect class=\"brush-catcher\"\n        x={fx}\n        y={fy}\n        width={fWidth}\n        height={fHeight}\n        use:brushable\n        on:brushstart={handleBrushStart}\n        on:brush={handleBrush}\n        on:brushend={handleBrushEnd}></rect>\n</g>\n{#if ($originalTimeDomain)}\n  <g class=\"reset-brush\"\n     transform=\"translate({$timeScale.range()[0] - $margin.left / 1.5} {$panelHeight + 50})\"\n     on:click={handleResetButtonClick}>\n    <rect x=\"-3\"\n          y=\"-15\"\n          width={resetText ? resetText.getComputedTextLength() + 6 : 0}\n          height=\"20\"\n          rx=\"3\"\n          ry=\"3\"></rect>\n    <text class=\"disable-select\" bind:this={resetText}>Reset time scale</text>\n  </g>\n{/if}\n\n<style>\n  .brush-area {\n    visibility: visible;\n    fill: var(--usa-red);\n    opacity: 0.3;\n    pointer-events: none;\n  }\n\n  .brush-catcher {\n    visibility: hidden;\n    fill: black;\n    pointer-events: all;\n    cursor: ew-resize;\n  }\n\n  .invisible {\n    visibility: hidden;\n  }\n\n  .reset-brush {\n    cursor: pointer;\n  }\n\n  .reset-brush rect {\n    fill: var(--usa-lightred);\n    stroke: var(--usa-lightred);\n    stroke-width: 0.15rem;\n    transition: fill 200ms ease;\n  }\n\n  .reset-brush:hover rect {\n    fill: var(--bg);\n  }\n\n  .reset-brush text {\n    font-family: var(--font-02);\n    font-size: 0.8rem;\n    fill: var(--bg);\n    transition: fill 200ms ease;\n  }\n\n  .reset-brush:hover text {\n    fill: var(--usa-lightred);\n  }\n</style>\n",