checkbox to highlight cases with polarization data

src/components/Checkbox.svelte

@@ -22,7 +22,7 @@
   } 
 
   input[type="checkbox"] {
-    display:none;
+    display: none;
     pointer-events: all;
   }
 
@@ -30,6 +30,7 @@
     display: block;
     width: 15px;
     height: 15px;
+    margin-top: 3px;
     margin-right: 0.4rem;
     border: 2px solid var(--usa-blue);
     border-radius: 3px;

src/components/CheckboxPanel.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { highlightPolarization } from '../stores/filters';
+
+  import Checkbox from './Checkbox.svelte';
+
+  function handleClick(type) {
+    switch (type) {
+      case 'polarization':
+        $highlightPolarization = !$highlightPolarization;
+        break;
+    }
+  }
+</script>
+
+<ul class="checkboxpanel-wrapper">
+  <li>
+    <Checkbox id="checkboxpanel-checkbox-polarization"
+              checked={$highlightPolarization}
+              on:click={() => handleClick('polarization')}>
+      <span>Highlight cases with polarization data</span>
+    </Checkbox>
+  </li>
+</ul>
+
+<style>
+  ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 0.5rem 0;
+    list-style-type: none;
+  }
+
+  li {
+    padding: 0.4rem 0;
+    position: relative;
+  }
+
+  span {
+    display: inline-block;
+    margin: 0 0 0 0.5rem;
+    font-family: var(--font-02);
+    font-size: 0.8rem;
+    color: var(--usa-blue);
+  }
+</style>

src/components/Controls.svelte

@@ -11,12 +11,14 @@
     textSearchFilter,
     selectAllFilters,
     contextData,
-    originalTimeDomain } from '../stores/filters';
+    originalTimeDomain,
+    highlightPolarization } from '../stores/filters';
   import { timeScale, attributionScoreScale } from '../stores/scales';
 
   import Dropdown from './Dropdown.svelte';
   import Slider from './Slider.svelte';
   import SearchText from './SearchText.svelte';
+  import CheckboxPanel from './CheckboxPanel.svelte';
   import Share from './Share.svelte';
 
   export let timePoints;
@@ -32,6 +34,7 @@
   function handleButtonClick() {
     selectAllFilters();
     contextData.unselectAll();
+    $highlightPolarization = false;
     if ($originalTimeDomain) {
       $timeScale.domain($originalTimeDomain);
       $timeScale = $timeScale;
@@ -89,6 +92,9 @@
         Reset
       </button>
     </div>
+    <div class="checkbox-panel">
+      <CheckboxPanel />
+    </div>
     <Share />
   </div>
 {/if}

src/components/PolarizationStrip.svelte

@@ -56,16 +56,18 @@
 
 <div class="polarization-strip"
      bind:clientWidth={width}>
-  <svg class="pol-magnifier"
-       width={width}
-       height={magnifierHeight}>
-    <path d={line(leftPathData)} />
-    <path d={line(rightPathData)} />
-    <text x={Math.max(15, valueWidth / 2)}
-          y={yScale(1)}>
-      {Math.round(engagementExplained * 100)}%
-    </text>
-  </svg>
+  {#if (width > 0)}
+    <svg class="pol-magnifier"
+         width={width}
+         height={magnifierHeight}>
+      <path d={line(leftPathData)} />
+      <path d={line(rightPathData)} />
+      <text x={Math.max(15, valueWidth / 2)}
+            y={yScale(1)}>
+        {Math.round(engagementExplained * 100)}%
+      </text>
+    </svg>
+  {/if}
   <div class="pol-layer-wrapper">
     {#each categories as category (category.id)}
       <div class="pol-layer pol-{category.id}"

src/components/Share.svelte

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

src/components/Visualization.svelte

@@ -35,8 +35,15 @@
     originalTimeDomain,
     contextData,
     caseIdFilter,
-    tagFilter } from '../stores/filters';
-  import { haveOverlap, withinRange, includesTextSearch, isCaseId, preloadImages } from '../utils/misc';
+    tagFilter,
+    highlightPolarization } from '../stores/filters';
+  import {
+    haveOverlap,
+    withinRange,
+    includesTextSearch,
+    isCaseId,
+    showPolarization,
+    preloadImages } from '../utils/misc';
   import { selected } from '../stores/eventSelections';
   import { drawWrapper } from '../stores/elements';
   
@@ -134,6 +141,7 @@
       $attributionScoreFilter = urlFilters.attributionScores;
       $textSearchFilter = urlFilters.textSearch;
       $caseIdFilter = urlFilters.caseId;
+      $highlightPolarization = urlFilters.highlightPolarization;
     } 
   });
 
@@ -203,6 +211,7 @@
               && includesTextSearch($textSearchFilter, d.search)
               && withinRange($attributionScoreFilter, d.attributionScore)
               && isCaseId($caseIdFilter, d.id)
+              && showPolarization($highlightPolarization, d.polarization)
       }));
     }
 </script>

src/stores/filters.js

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

src/utils/misc.js

@@ -53,6 +53,12 @@ export const includesTextSearch = (filter, s) => {
 // check if case id filter is set and if id is matching
 export const isCaseId = (filter, id) => filter === undefined ? true : (filter === id);
 
+// check, if polarization data can be shown
+export const showPolarization = (filter, polarization) => {
+  if (!filter) return(true);
+  return(polarization.fulfills10Articles || polarization.fulfills25Percent);
+};
+
 // extract filter items from data
 export const extractFilterCategories = (data, name) =>
   uniq(data.map((d) => d[name]).flat());

src/utils/share.js

@@ -1,5 +1,5 @@
-export const baseUrl = 'https://interference2020.org';
-// export const baseUrl = 'http://localhost:5000';
+// export const baseUrl = 'https://interference2020.org';
+export const baseUrl = 'http://localhost:5000';
 
 export const urlFromFilters = (disinformantNations,
                                platforms,
@@ -10,15 +10,17 @@ export const urlFromFilters = (disinformantNations,
                                attributionScores,
                                textSearch,
                                contextData,
-                               caseId = '') => {
+                               caseId = '',
+                               highlightPolarization) => {
   const params = {
     ts: encodeURIComponent(textSearch),
     as: [attributionScores[0], attributionScores[1]].join(';'),
     f: filtersToHex([disinformantNations, platforms, methods, sources, sourceCategories, tags, contextData]),
-    id: caseId
+    id: caseId,
+    bool: filtersToBin([highlightPolarization])
   };
 
-  return `${baseUrl}/#${params.f}-${params.id}-${params.ts}-${params.as}`;
+  return `${baseUrl}/#${params.f}-${params.id}-${params.ts}-${params.as}-${params.bool}`;
 };
 
 export const filtersToHex = (arr) => {
@@ -26,6 +28,11 @@ export const filtersToHex = (arr) => {
   return hex;
 };
 
+export const filtersToBin = (arr) => {
+  const bin = arr.map((d) => d ? 1 : 0).join('');
+  return bin;
+};
+
 export const binaryToHex = (binary) => parseInt(binary , 2).toString(16).toLowerCase();
 
 export const hexToBinary = (hex) => parseInt(hex, 16).toString(2);
@@ -34,7 +41,9 @@ export const binaryToBool = (binary) => binary.split('').map((d) => d === '0' ?
 
 export const parseUrl = (hash) => {
   const s = hash.substring(1);
-  const [ disinformantNations, platforms, methods, sources, sourceCategories, tags, contextData, caseId, textSearch, attributionScores] = s.split('-');
+  const [ disinformantNations, platforms, methods, sources, sourceCategories, tags, contextData, caseId, textSearch, attributionScores, bools] = s.split('-');
+
+  const boolArray = bools.split('').map((d) => +d === 1 ? true : false);
 
   return {
     disinformantNations: binaryToBool(hexToBinary(disinformantNations)),
@@ -46,6 +55,7 @@ export const parseUrl = (hash) => {
     contextData: binaryToBool(hexToBinary(contextData)),
     caseId: caseId === '' ? undefined : +caseId,
     textSearch: decodeURIComponent(textSearch),
-    attributionScores: attributionScores.split(';').map((d) => +d)
+    attributionScores: attributionScores.split(';').map((d) => +d),
+    highlightPolarization: boolArray[0]
   };
 };