Select journal via dropdown

package.json

@@ -14,7 +14,8 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
+    "svelte": "^3.0.0",
+    "svelte-select": "^3.16.1"
   },
   "dependencies": {
     "d3-array": "^2.11.0",

src/SidePanel.svelte

@@ -1,7 +1,6 @@
 <script>
   import Legend from './components/Legend.svelte';
-
-  import { selectedJournal } from './stores/selections';
+  import SelectJournal from './components/SelectJournal.svelte';
 </script>
 
 <div class="side-panel">
@@ -16,11 +15,7 @@
   </p>
 
   <Legend />
-
-  <select bind:value={$selectedJournal}>
-    <option value="nature">Nature</option>
-    <option value="science">Science</option>
-  </select>
+  <SelectJournal />
 </div>
 
 <style>

src/components/CheckMark.svelte

@@ -0,0 +1,10 @@
+<svg width="18" height="18" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
+  <title>Checkmark</title>
+  <path
+    fill='none'
+    stroke='currentColor'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+    stroke-width='52'
+    d='M416 128L192 384l-96-96'/>
+</svg>

src/components/SelectItem.svelte

@@ -0,0 +1,76 @@
+<script>
+  // Adapted from https://github.com/rob-balfre/svelte-select/blob/master/src/Item.svelte
+
+  import CheckMark from './CheckMark.svelte';
+
+  export let isActive = false;
+  export let isFirst = false;
+  export let isHover = false;
+  export let getOptionLabel = undefined;
+  export let item = undefined;
+  export let filterText = '';
+
+  let itemClasses = '';
+
+  $: {
+    const classes = [];
+    if (isActive) { classes.push('active'); }
+    if (isFirst) { classes.push('first'); }
+    if (isHover) { classes.push('hover'); }
+    if (item.isGroupHeader) { classes.push('groupHeader'); }
+    if (item.isGroupItem) { classes.push('groupItem'); }
+    itemClasses = classes.join(' ');
+  }
+</script>
+
+<div class="item {itemClasses}">
+  {@html getOptionLabel(item, filterText)}
+  {#if isActive}
+    <CheckMark />
+  {/if}
+</div>
+
+<style>
+  .item {
+    cursor: default;
+    height: var(--height, 42px);
+    line-height: var(--height, 42px);
+    padding: var(--itemPadding, 0 20px);
+    color: var(--itemColor, inherit);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .groupHeader {
+    text-transform: var(--groupTitleTextTransform, uppercase);
+  }
+
+  .groupItem {
+    padding-left: var(--groupItemPaddingLeft, 40px);
+  }
+
+  .item:active {
+    background: var(--itemActiveBackground, #b9daff);
+    font-weight: bold;
+  }
+
+  .item.active {
+    background: var(--itemIsActiveBG, #007aff);
+    color: var(--itemIsActiveColor, #fff);
+    font-weight: bold;
+  }
+
+  .item.first {
+    border-radius: var(--itemFirstBorderRadius, 4px 4px 0 0);
+  }
+
+  .item.hover {
+    background: var(--itemHoverBG, #e7f2ff);
+    color: var(--itemHoverColor, #000);
+  }
+</style>

src/components/SelectJournal.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Select from 'svelte-select';
+  import SelectItem from './components/SelectItem.svelte';
+
+  import { journals } from './inputs/constants';
+  import { selectedJournal } from './stores/selections';
+
+  function handleSelect(event) {
+    selectedJournal.set(event.detail.value);
+  }
+</script>
+
+<div class="select">
+  <Select
+    items={journals}
+    Item={SelectItem}
+    selectedValue={journals[0]}
+    isClearable={false}
+    showIndicator
+    on:select={handleSelect} />
+</div>
+
+<style>
+  .select {
+    color: white;
+    --borderFocusColor: white;
+    --background: var(--background-color);
+    --listBackground: var(--background-color);
+    --itemColor: white;
+    --itemIsActiveColor: white;    
+    --inputColor: white;    
+    --itemActiveBackground: var(--background-color);    
+    --itemIsActiveBG: var(--background-color);
+    --itemHoverBG: white;
+    --itemHoverColor: var(--background-color);
+    --borderRadius: 5px;
+    --listBorderRadius: 5px;
+  }
+</style>

src/inputs/constants.js

@@ -2,3 +2,8 @@ export const dataPath = 'data/sources.csv';
 
 export const quantiles = [0, 0.9, 0.95, 0.99, 0.999];
 export const tickStep = 500;
+
+export const journals = [
+  {value: 'nature', label: 'Nature'},
+  {value: 'science', label: 'Science'},
+];

src/stores/selections.js

@@ -1,6 +1,8 @@
 import { writable } from 'svelte/store';
 
-export const selectedJournal = writable();
+import { journals } from '../inputs/constants';
+
+export const selectedJournal = writable(journals[0].value);
 export const selectedStar = writable();
 
 export const activeQuantile = writable(1);