cib data filter

src/components/CheckboxPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { highlightPolarization } from '../stores/filters';
+  import { highlightPolarization, highlightCib } from '../stores/filters';
 
   import Checkbox from './Checkbox.svelte';
 
@@ -8,6 +8,9 @@
       case 'polarization':
         $highlightPolarization = !$highlightPolarization;
         break;
+      case 'cib':
+        $highlightCib = !$highlightCib;
+        break;
     }
   }
 </script>
@@ -20,6 +23,13 @@
       <span>Polarization data filter</span>
     </Checkbox>
   </li>
+  <li>
+    <Checkbox id="checkboxpanel-checkbox-cib"
+              checked={$highlightCib}
+              on:click={() => handleClick('cib')}>
+      <span>CIB data filter</span>
+    </Checkbox>
+  </li>
 </ul>
 
 <style>

src/components/Controls.svelte

@@ -12,7 +12,8 @@
     selectAllFilters,
     contextData,
     originalTimeDomain,
-    highlightPolarization } from '../stores/filters';
+    highlightPolarization,
+    highlightCib } from '../stores/filters';
   import { timeScale, attributionScoreScale } from '../stores/scales';
 
   import Dropdown from './Dropdown.svelte';
@@ -35,6 +36,7 @@
     selectAllFilters();
     contextData.unselectAll();
     $highlightPolarization = false;
+    $highlightCib = false;
     if ($originalTimeDomain) {
       $timeScale.domain($originalTimeDomain);
       $timeScale = $timeScale;

src/components/Share.svelte

@@ -11,7 +11,8 @@
     textSearchFilter,
     originalTimeDomain,
     contextData,
-    highlightPolarization } from '../stores/filters';
+    highlightPolarization,
+    highlightCib } from '../stores/filters';
   import { urlFromFilters } from '../utils/share';
 
   import Icon from 'svelte-awesome';
@@ -39,7 +40,8 @@
             $textSearchFilter,
             $contextData,
             caseId,
-            $highlightPolarization);
+            $highlightPolarization,
+            $highlightCib);
 </script>
 
 <div class="share">

src/components/Sources.svelte

@@ -6,7 +6,11 @@
   import { sortConsistently } from '../utils/misc';
   import { hovered as eHovered, selected as eSelected } from '../stores/eventSelections';
   import { hovered as cHovered } from '../stores/centroidSelections';
-  import { disinformantNationFilter, selectAllFilters, unselectAllFilters, highlightPolarization } from '../stores/filters';
+  import {
+    disinformantNationFilter,
+    selectAllFilters,
+    unselectAllFilters,
+    highlightPolarization } from '../stores/filters';
 
   import SourceLink from './SourceLink.svelte';
   import Centroid from './Centroid.svelte';

src/components/Visualization.svelte

@@ -37,13 +37,15 @@
     contextData,
     caseIdFilter,
     tagFilter,
-    highlightPolarization } from '../stores/filters';
+    highlightPolarization,
+    highlightCib } from '../stores/filters';
   import {
     haveOverlap,
     withinRange,
     includesTextSearch,
     isCaseId,
     showPolarization,
+    showCib,
     preloadImages } from '../utils/misc';
   import { selected } from '../stores/eventSelections';
   import { drawWrapper } from '../stores/elements';
@@ -143,6 +145,7 @@
       $textSearchFilter = urlFilters.textSearch;
       $caseIdFilter = urlFilters.caseId;
       $highlightPolarization = urlFilters.highlightPolarization;
+      $highlightCib = urlFilters.highlightCib;
     } 
   });
 
@@ -150,6 +153,7 @@
   $: 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,
@@ -214,6 +218,7 @@
               && withinRange($attributionScoreFilter, d.attributionScore)
               && isCaseId($caseIdFilter, d.id)
               && showPolarization($highlightPolarization, d.polarization)
+              && showCib($highlightCib, d.cib)
       }));
     }
 </script>

src/stores/filters.js

@@ -96,3 +96,5 @@ export const originalTimeDomain = writable(null);
 export const caseIdFilter = writable();
 
 export const highlightPolarization = writable(false);
+
+export const highlightCib = writable(false);

src/utils/misc.js

@@ -60,6 +60,12 @@ export const showPolarization = (filter, polarization) => {
   return(polarization.fulfills10Articles || polarization.fulfills25Percent);
 };
 
+// check, if cib data can be shown
+export const showCib = (filter, cib) => {
+  if (!filter) return(true);
+  return(cib.hasCib);
+};
+
 // extract filter items from data
 export const extractFilterCategories = (data, name) =>
   uniq(data.map((d) => d[name]).flat());

src/utils/share.js

@@ -11,13 +11,14 @@ export const urlFromFilters = (disinformantNations,
                                textSearch,
                                contextData,
                                caseId = '',
-                               highlightPolarization) => {
+                               highlightPolarization,
+                               highlightCib) => {
   const params = {
     ts: encodeURIComponent(textSearch),
     as: [attributionScores[0], attributionScores[1]].join(';'),
     f: filtersToHex([disinformantNations, platforms, methods, sources, sourceCategories, tags, contextData]),
     id: caseId,
-    bool: filtersToBin([highlightPolarization])
+    bool: filtersToBin([highlightPolarization, highlightCib])
   };
 
   return `${baseUrl}/#${params.f}-${params.id}-${params.ts}-${params.as}-${params.bool}`;
@@ -56,6 +57,7 @@ export const parseUrl = (hash) => {
     caseId: caseId === '' ? undefined : +caseId,
     textSearch: decodeURIComponent(textSearch),
     attributionScores: attributionScores.split(';').map((d) => +d),
-    highlightPolarization: boolArray[0]
+    highlightPolarization: boolArray[0],
+    highlightCib: boolArray[1]
   };
 };