integrate cib data in tooltips

src/components/CibTable.svelte

@@ -0,0 +1,95 @@
+<script>
+  import {
+    cibTableFields,
+    cibColumnHeaders } from '../inputs/cib';
+
+  import { format } from 'd3';
+
+  import Icon from 'svelte-awesome';
+  import { facebook, instagram } from 'svelte-awesome/icons';
+  
+  export let data;
+
+  const commaFormat = format(',');
+  const iconData = {
+    facebook,
+    instagram
+  };
+</script>
+
+<div class="cib-table-wrapper">
+  <table>
+    <thead>
+      <tr>
+        {#each cibColumnHeaders as { id, name } (id)}
+          <td>{name}</td>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each cibTableFields as field (field.id)}
+        <tr>
+          {#each cibColumnHeaders as { id, type } (id)}
+            <td>
+              {#if (type === 'platformName')}
+                <Icon data={iconData[field[type].toLowerCase()]}
+                      scale="0.9"
+                      label={field[type]} />
+              {:else if (type === 'fieldName')}
+                <span>{field[type]}</span>
+              {:else if (data[field[type]] !== undefined)}
+                <span class="right-align">{commaFormat(data[field[type]])}</span>
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  <div class="budget-and-events">
+    {#if (data.budgetTotalUsd && data.budgetTotalUsd > 0)}
+      <p>The Facebook activities required a budget of <strong>USD {commaFormat(data.budgetTotalUsd)}</strong>.</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .cib-table-wrapper {
+    display: flex;
+    width: 100%;
+  }
+
+  table {
+    flex: 1;
+    font-size: 0.8rem;
+    color: var(--text-black);
+  }
+
+  thead {
+    font-size: 0.7rem;
+  }
+
+  td {
+    min-width: 30px;
+    padding: 0 0.2rem;
+    vertical-align: middle;
+  }
+
+  td span {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 0.2rem;
+  }
+
+  td span.right-align {
+    text-align: right;
+  }
+
+  .budget-and-events {
+    padding: 1.1rem 0 0 1rem;
+  }
+
+  .budget-and-events p {
+    font-size: 0.7rem;
+  }
+</style>

src/components/EventTooltip.svelte

@@ -22,6 +22,7 @@
   import ScoreQuestions from './ScoreQuestions.svelte';
   import ImpactStrip from './ImpactStrip.svelte';
   import PolarizationLegend from './PolarizationLegend.svelte';
+  import CibTable from './CibTable.svelte';
   import Share from './Share.svelte';
 
   const offset = {
@@ -207,6 +208,12 @@
           <h3>Description</h3>
           <p>{@html highlight($tooltip.tp.shortDescription)}</p>
         </div>
+        {#if ($tooltip.tp.cib.hasCib)}
+          <div class="cib">
+            <h3>Removed content</h3>
+            <CibTable data={$tooltip.tp.cib} />
+          </div>
+        {/if}
         {#if (!($tooltip.tp.tags.length === 1 && $tooltip.tp.tags[0] === 'unspecified'))}
           <div class="tags">
             <h3>Tags</h3>

src/components/TopVisualContent.svelte

@@ -5,7 +5,9 @@
     contextData,
     sourceFilter,
     attributionScoreFilter,
-    selectAllFilters } from '../stores/filters';
+    selectAllFilters,
+    highlightPolarization,
+    highlightCib } from '../stores/filters';
   import { format, timeFormat } from 'd3';
   import { drawWrapper } from '../stores/elements';
   import { copytooltipable } from '../actions/copytooltipable';
@@ -19,6 +21,8 @@
   function handleApplyFilter(id) {
     selectAllFilters();
     contextData.unselectAll();
+    $highlightPolarization = false;
+    $highlightCib = false;
     switch (id) {
       case 0:
         disinformantNationFilter.selectOne('China');

src/components/Visualization.svelte

@@ -153,7 +153,6 @@
   $: setScales(data, $width, $minDim, $maxDim, $panelHeight, $margin);
 
   $: if (data) {
-    console.log(data.filter((d) => d.cib.hasCib));
     // calculate scaled data points
     const scaledData = data.map((d) => ({
       ...d,

src/inputs/cib.js

@@ -0,0 +1,51 @@
+export const cibTableFields = [
+  {
+    number: 'accountsTotalFb',
+    followers: null,
+    platformName: 'Facebook',
+    fieldName: 'Accounts'
+  },
+  {
+    number: 'pagesTotalFb',
+    followers: 'pagesFollowersTotalFb',
+    platformName: 'Facebook',
+    fieldName: 'Pages'
+  },
+  {
+    number: 'groupsTotalFb',
+    followers: 'groupsFollowersTotalFb',
+    platformName: 'Facebook',
+    fieldName: 'Groups'
+  },
+  {
+    number: 'eventsTotal',
+    followers: null,
+    platformName: 'Facebook',
+    fieldName: 'Events'
+  },
+  {
+    number: 'accountsTotalIg',
+    followers: 'followersTotalIg',
+    platformName: 'Instagram',
+    fieldName: 'Accounts'
+  }
+].map((d, i) => ({id: i, ...d}));
+
+export const cibColumnHeaders = [
+  {
+    name: '',
+    type: 'platformName'
+  },
+  {
+    name: '',
+    type: 'fieldName'
+  },
+  {
+    name: 'Entities',
+    type: 'number'
+  },
+  {
+    name: 'Followers',
+    type: 'followers'
+  }
+].map((d, i) => ({id: i, ...d}));