Aggregation

frontend/src/components/details.svelte

@@ -54,6 +54,10 @@
   }
   summary::before {
     content: '';
+    display: none;
+  }
+  summary::-webkit-details-marker {
+    display: none;
   }
   summary :global(svg) {
     width: 14px;

frontend/src/components/icon.svelte

@@ -87,5 +87,9 @@
     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
   {:else if name === 'save'}
     <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/>
+  {:else if name === 're'}
+    <path d="m17 1 4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
+  {:else if name === 'chart'}
+    <path d="M18 20V10M12 20V4M6 20v-6"/>
   {/if}
 </svg>

frontend/src/components/mongo-collation.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { locales } from '$lib/mongo';
+
+  const defaultCollation = {
+    locale: 'en_US',
+    strength: 3,
+    caseLevel: false,
+    caseFirst: 'off',
+    numericOrdering: false,
+    alternate: 'non-ignorable',
+    maxVariable: 'punct',
+    backwards: false,
+    normalization: false,
+  };
+
+  export let collation = { ...defaultCollation };
+</script>
+
+<div class="settinggrid">
+  <label for="collationLocale">Locale</label>
+  <div class="field">
+    <select id="collationLocale" bind:value={collation.locale}>
+      {#each Object.entries(locales) as [value, name]}
+        <option {value}>({value}) {name}</option>
+      {/each}
+    </select>
+  </div>
+
+  <label for="collationStrength">Strength</label>
+  <div class="field">
+    <select id="collationStrength" bind:value={collation.strength}>
+      <option value={1}>(1) Collate base characters only.</option>
+      <option value={2}>(2) Collate up to secondary differences, such as diacritics.</option>
+      <option value={3}>(3) Collate up to tertiary differences, such as case and letter variants.</option>
+      <option value={4}>(4) Limited for specific use case such as processing Japanese text.</option>
+      <option value={5}>(5) Identical Level. Limited for specific use case of tie breaker.</option>
+    </select>
+  </div>
+
+  <label for="collationCaseLevel">Use case level</label>
+  <div class="field">
+    <span class="checkbox">
+      <input type="checkbox" id="collationCaseLevel" bind:checked={collation.caseLevel} />
+    </span>
+  </div>
+
+  <label for="collationCaseFirst">Case first</label>
+  <div class="field">
+    <select id="collationCaseFirst" bind:value={collation.caseFirst}>
+      <option value="off">(off) Similar to "lower" with slight differences.</option>
+      <option value="upper">(upper) Uppercase sorts before lowercase.</option>
+      <option value="lower">(lower) Lowercase sorts before uppercase.</option>
+    </select>
+  </div>
+
+  <label for="collationNumericOrdering">Numeric ordering</label>
+  <div class="field">
+    <span class="checkbox">
+      <input type="checkbox" id="collationNumericOrdering" bind:checked={collation.numericOrdering} />
+    </span>
+  </div>
+
+  <label for="collationAlternate">Alternate</label>
+  <div class="field">
+    <select id="collationAlternate" bind:value={collation.alternate}>
+      <option value="non-ignorable">(non-ignorable) Whitespace and punctuation are considered base characters.</option>
+      <option value="shifted">(shifted) Whitespace and punctuation are considered base characters.</option>
+    </select>
+  </div>
+
+  <label for="collationMaxVariable">Max Variable</label>
+  <div class="field">
+    <select id="collationMaxVariable" bind:value={collation.maxVariable}>
+      <option value="punct">(punct) Both whitespace and punctuation are ignorable and not considered base characters.</option>
+      <option value="space">(space) Whitespace is ignorable and not considered to be base characters.</option>
+    </select>
+  </div>
+
+  <label for="collationBackwards">Backwards</label>
+  <div class="field">
+    <span class="checkbox">
+      <input type="checkbox" id="collationBackwards" bind:checked={collation.backwards} />
+    </span>
+  </div>
+
+  <label for="collationNormalization">Normalization</label>
+  <div class="field">
+    <span class="checkbox">
+      <input type="checkbox" id="collationNormalization" bind:checked={collation.normalization} />
+    </span>
+  </div>
+</div>

frontend/src/components/tabbar.svelte

@@ -18,7 +18,10 @@
   <ul>
     {#each tabs as tab (tab.key)}
       <li class:active={tab.key === selectedKey}>
-        <button class="tab" on:click={() => select(tab.key)}>{tab.title}</button>
+        <button class="tab" on:click={() => select(tab.key)}>
+          {#if tab.icon} <Icon name={tab.icon} /> {/if}
+          {tab.title}
+        </button>
         {#if tab.closable}
           <button class="btn-sm" on:click={() => dispatch('closeTab', tab.key)}>
             <Icon name="x" />