Remove udgl/

package.json

@@ -21,7 +21,9 @@
     "@graph-paper/elements": "0.0.0-alpha.15",
     "@graph-paper/guides": "0.0.0-alpha.15",
     "@graph-paper/icons": "0.0.0-alpha.15",
+    "@graph-paper/menu": "0.0.0-alpha.15",
     "@graph-paper/optionmenu": "0.0.0-alpha.15",
+    "@graph-paper/portal": "0.0.0-alpha.15",
     "@rollup/plugin-commonjs": "15.1.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",

scripts/eslint-health.js

@@ -42,7 +42,7 @@ const { ESLint } = require('eslint');
 const path = require('path');
 
 const config = {
-  maxProblems: 15,
+  maxProblems: 10,
   runFrom: path.join(__dirname, '..'),
   targets: ['.'],
 };

src/udgl/StatusLabel.svelte → src/components/StatusLabel.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { tooltip as tooltipAction } from './utils/tooltip';
+  import { tooltip as tooltipAction } from '@graph-paper/core/actions';
 
   export let level = 'info';
   export let tooltip;

src/components/controls/AggregationTypeSelector.svelte

@@ -1,9 +1,7 @@
 <script>
-import FloatingMenu from '../../udgl/menu/FloatingMenu.svelte';
-import MenuList from '../../udgl/menu/MenuList.svelte';
-import MenuListItem from '../../udgl/menu/MenuListItem.svelte';
-import DownCarat from '../../udgl/icons/DownCarat.svelte';
-import { tooltip as tooltipAction } from '../../udgl/utils/tooltip';
+import { CaretDown } from '@graph-paper/icons';
+import { FloatingMenu, MenuList, MenuListItem } from '@graph-paper/menu';
+import { tooltip as tooltipAction } from '@graph-paper/core/actions';
 
 export let aggregationTypes;
 export let currentAggregation;
@@ -69,7 +67,7 @@ export let aggregationInfo = {
 
 <div class=menu-button bind:this={button} use:tooltipAction={{ text: 'this probe has multiple aggregation methods – select one from this menu' }}>
   <button class=activating-button on:click={toggle} class:active>
-      <div>{aggregationInfo[currentAggregation].name}</div> <DownCarat size=16 />
+      <div>{aggregationInfo[currentAggregation].name}</div> <CaretDown size=16 />
   </button>
 </div>
 
@@ -78,10 +76,9 @@ export let aggregationInfo = {
     bind:width={width}
     offset={1}
     on:cancel={() => { active = false; }}
-    position='bottom-left'
     parent={button}
   >
-    <MenuList  on:selection={setValue}>
+    <MenuList on:selection={setValue}>
       {#each aggregationTypes as agg, i}
         <MenuListItem key={agg} value={agg}>
           <div class=menu-list-item__title>{aggregationInfo[agg].name}</div>

src/components/controls/AlertNotice.svelte

@@ -3,7 +3,6 @@
   import { cubicOut } from 'svelte/easing';
   import { Cancel } from '@graph-paper/icons';
 
-  export let dismissText = 'dismiss'; // Label of 'dismiss' button.
   // Required: Which localStorage key to check whether this notice has been dismissed.
   export let toggleKey = '';
 

src/components/controls/DimensionMenu.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-import { tooltip as tooltipAction } from '../../udgl/utils/tooltip';
-import FloatingMenu from '../../udgl/menu/FloatingMenu.svelte';
+import { createEventDispatcher } from 'svelte';
+import { FloatingMenu } from '@graph-paper/menu';
+import { tooltip as tooltipAction } from '@graph-paper/core/actions';
 
 const dispatch = createEventDispatcher();
 
@@ -16,8 +16,8 @@ export let tooltip;
 let width;
 
 function onParentSelect(kvPair) {
-    active = false;
-    dispatch('selection', kvPair);
+  active = false;
+  dispatch('selection', kvPair);
 }
 
 function toggle() { active = !active; }

src/components/controls/Pagination.svelte

@@ -1,8 +1,7 @@
 <script>
 import { createEventDispatcher } from 'svelte';
 import { Button, ButtonGroup } from '@graph-paper/button';
-import LeftCarat from '../../udgl/icons/LeftCarat.svelte';
-import RightCarat from '../../udgl/icons/RightCarat.svelte';
+import { CaretLeft, CaretRight } from '@graph-paper/icons';
 
 export let totalPages;
 export let currentPage;
@@ -40,8 +39,8 @@ div:hover {
 
 <div>
   <ButtonGroup>
-    <Button tooltip="move back a page" on:click={() => changePage(currentPage - 1)} level=medium compact><LeftCarat size={10} /></Button>
-    <Button tooltip="move forward a page" on:click={() => changePage(currentPage + 1)} level=medium compact><RightCarat size={10} /></Button>
+    <Button tooltip="move back a page" on:click={() => changePage(currentPage - 1)} level=medium compact><CaretLeft size={10} /></Button>
+    <Button tooltip="move forward a page" on:click={() => changePage(currentPage + 1)} level=medium compact><CaretRight size={10} /></Button>
   </ButtonGroup>
   page {currentPage < 9 ? '0' : ''}{currentPage + 1} of {totalPages < 9 ? '0' : ''}{totalPages}
 

src/components/controls/ProbeKeySelector.svelte

@@ -1,9 +1,7 @@
 <script>
-  import FloatingMenu from '../../udgl/menu/FloatingMenu.svelte';
-  import MenuList from '../../udgl/menu/MenuList.svelte';
-  import MenuListItem from '../../udgl/menu/MenuListItem.svelte';
-  import DownCarat from '../../udgl/icons/DownCarat.svelte';
-  import { tooltip as tooltipAction } from '../../udgl/utils/tooltip';
+  import { CaretDown } from '@graph-paper/icons';
+  import { FloatingMenu, MenuList, MenuListItem } from '@graph-paper/menu';
+  import { tooltip as tooltipAction } from '@graph-paper/core/actions';
 
   export let options;
   export let currentKey;
@@ -63,7 +61,7 @@
           ">{opt}</div>
           {/each}
         </div> 
-        <DownCarat size=16 />
+        <CaretDown size=16 />
     </button>
   </div>
 
@@ -72,10 +70,9 @@
       bind:width={width} 
       offset={1} 
       on:cancel={() => { active = false; }} 
-      position='bottom-left' 
       parent={button}
     >
-      <MenuList  on:selection={setValue}>
+      <MenuList on:selection={setValue}>
         {#each options as key, i}
           <MenuListItem key={key} value={key}>
             <div class=menu-list-item__title>{key}</div>

src/components/controls/ProbeViewControl.svelte

@@ -1,16 +1,15 @@
 <script>
 import page from 'page';
 import { fly } from 'svelte/transition';
-import Chart from '../../udgl/icons/Chart.svelte';
-import Table from '../../udgl/icons/Table.svelte';
+import { LineChart, Table } from '@graph-paper/icons/';
 import { store, currentQuery } from '../../state/store';
 
 
 import BodyControl from './BodyControl.svelte';
 
 let options = [
   {
-    value: 'explore', label: 'Explore', component: Chart, tooltip: "explore this probe's aggregated values over time",
+    value: 'explore', label: 'Explore', component: LineChart, tooltip: "explore this probe's aggregated values over time",
   },
   {
     value: 'table', label: 'Table', component: Table, tooltip: "view this probe's aggregated data in tabular form",

src/components/controls/ProductSelector.svelte

@@ -1,9 +1,8 @@
 <script>
-  import DownCarat from '../../udgl/icons/DownCarat.svelte';
-  import MenuList from '../../udgl/menu/MenuList.svelte';
-  import MenuListItem from '../../udgl/menu/MenuListItem.svelte';
-  import { store } from '../../state/store';
+  import { CaretDown } from '@graph-paper/icons';
+  import { MenuList, MenuListItem } from '@graph-paper/menu';
   import DimensionMenu from './DimensionMenu.svelte';
+  import { store } from '../../state/store';
   import { productKeys } from '../../config/products';
 
   const COMPACT = false;
@@ -36,7 +35,7 @@
   <DimensionMenu size=large variant=dark tooltip="Select a product" compact={COMPACT} offset={OFFSET} location="bottom" alignment="center">
     <div class="main-filter__label" slot="label">
       {productKeys.filter((p) => p.key === $store.searchProduct)[0].label}
-      <div class="pull-right-edge"><DownCarat size=14 /></div>
+      <div class="pull-right-edge"><CaretDown size=14 /></div>
     </div>
     <div slot="menu">
       <MenuList on:selection={(event) => { store.setField('searchProduct', event.detail.key); }}>

src/components/controls/ViewTypeSelector.svelte

@@ -1,8 +1,6 @@
 <script>
-import FloatingMenu from '../../udgl/menu/FloatingMenu.svelte';
-import MenuList from '../../udgl/menu/MenuList.svelte';
-import MenuListItem from '../../udgl/menu/MenuListItem.svelte';
-import DownCarat from '../../udgl/icons/DownCarat.svelte';
+import { CaretDown } from '@graph-paper/icons';
+import { FloatingMenu, MenuList, MenuListItem } from '@graph-paper/menu';
 
 // export let aggregationTypes;
 export let currentView;
@@ -67,7 +65,7 @@ div {
 
 <div class=menu-button bind:this={button}>
   <button class=activating-button on:click={toggle} class:active>
-      <div>{viewInfo[currentView].name}</div> <DownCarat size=16 />
+      <div>{viewInfo[currentView].name}</div> <CaretDown size=16 />
   </button>
 </div>
 
@@ -76,10 +74,9 @@ div {
     bind:width={width} 
     offset={1} 
     on:cancel={() => { active = false; }} 
-    position='bottom-left' 
     parent={button}
   >
-    <MenuList  on:selection={setValue}>
+    <MenuList on:selection={setValue}>
       {#each Object.entries(viewInfo) as [k, v], i}
         <MenuListItem  key={k} value={k}>
           <div class=menu-list-item__title>{v.name}</div>

src/components/explore/ChartTitle.svelte

@@ -1,6 +1,6 @@
 <script>
 import { tooltip as tooltipAction } from '@graph-paper/core/actions/tooltip';
-import Help from '../../udgl/icons/Help.svelte';
+import { Help } from '@graph-paper/icons';
 
 export let description;
 export let left = 0;

src/components/explore/ComparisonSummary.svelte

@@ -1,6 +1,6 @@
 <script>
 import { tooltip as tooltipAction } from '@graph-paper/core/actions';
-import Help from '../../udgl/icons/Help.svelte';
+import { Help } from '@graph-paper/icons';
 import Tweenable from '../Tweenable.svelte';
 
 import { formatPercentDecimal } from '../../utils/formatters';

src/components/explore/ToplineRow.svelte

@@ -1,7 +1,7 @@
 <script>
 import { tweened } from 'svelte/motion';
-import { tooltip as tooltipAction } from '../../udgl/utils/tooltip';
-import Help from '../../udgl/icons/Help.svelte';
+import { Help } from '@graph-paper/icons';
+import { tooltip as tooltipAction } from '@graph-paper/core/actions';
 import { formatToBuildID } from '../../utils/formatters';
 
 export let value;

src/components/regions/Footer.svelte

@@ -1,5 +1,5 @@
 <script>
-import MozillaLogo from '../../udgl/icons/MozillaLogo.svelte';
+import MozillaLogo from '../icons/MozillaLogo.svelte';
 </script>
 
 <style>

src/components/regions/GLAMMark.svelte

@@ -1,7 +1,7 @@
 <script>
-import { tooltip } from '../../udgl/utils/tooltip';
-import Logo from './GLAMLogo.svelte';
-import Text from './GLAMText.svelte';
+import { tooltip as tooltipAction } from '@graph-paper/core/actions';
+import Logo from '../icons/GLAMLogo.svelte';
+import Text from '../icons/GLAMText.svelte';
 import { store, currentQuery } from '../../state/store';
 </script>
 
@@ -20,7 +20,7 @@ a {
 </style>
 
 <a href={`/${$currentQuery}`} on:click={store.reset}>
-  <h1 use:tooltip={{
+  <h1 use:tooltipAction={{
       text: 'The Glean Aggregated Metrics Dashboard',
       distance: 16,
     }}>

src/components/regions/MainSelectors.svelte

@@ -1,15 +1,10 @@
 <script>
 import { fly } from 'svelte/transition';
-import MenuList from '../../udgl/menu/MenuList.svelte';
-import MenuListItem from '../../udgl/menu/MenuListItem.svelte';
-import DownCarat from '../../udgl/icons/DownCarat.svelte';
+import { CaretDown } from '@graph-paper/icons';
+import { MenuList, MenuListItem } from '@graph-paper/menu';
 import DimensionMenu from '../controls/DimensionMenu.svelte';
 import productConfig from '../../config/products';
-
-import {
-  store,
-  productConfigDimensions,
-} from '../../state/store';
+import { store, productConfigDimensions } from '../../state/store';
 
 const OFFSET = 10;
 const COMPACT = true;
@@ -63,12 +58,12 @@ const COMPACT = true;
       <DimensionMenu tooltip='Select a {dimension.title}' compact={COMPACT} offset={OFFSET} location='bottom' alignment='right'>
         <div class=main-filter__label slot="label">
           <span class='main-filter__label__dimension'>{dimension.title}</span>
-          {productConfigDimensions.dimensionValueLabel(dimension.key, $store.productDimensions[dimension.key])} <div class=pull-right-edge><DownCarat size=14 /></div></div>
+          {productConfigDimensions.dimensionValueLabel(dimension.key, $store.productDimensions[dimension.key])} <div class=pull-right-edge><CaretDown size=14 /></div></div>
         <div slot="menu">
           <MenuList on:selection={(event) => { store.setDimension(dimension.key, event.detail.key); }}>
               {#each dimension.values.filter((di) => dimension.isValidKey === undefined
                 || dimension.isValidKey(di.key, $store.probe, store)) as {key, label}, i (key)}
-                <MenuListItem  key={key} value={key}><span class='story-label
+                <MenuListItem key={key} value={key}><span class='story-label
                   first'></span>{label}</MenuListItem>
                 {/each}
             </MenuList>

src/components/regions/ProbeDetails.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from 'svelte';
 import { fly, fade } from 'svelte/transition';
-import LineSegSpinner from '../../udgl/LineSegSpinner.svelte';
+import LineSegSpinner from '../LineSegSpinner.svelte';
 import { store } from '../../state/store';
 
 const paneTransition = { x: 10, duration: 300 };

src/components/search/Search.svelte

@@ -2,9 +2,9 @@
 import { tick } from 'svelte';
 import { fade } from 'svelte/transition';
 import { throttle } from 'throttle-debounce';
-import SearchIcon from '../../udgl/icons/Search.svelte';
-import LineSegSpinner from '../../udgl/LineSegSpinner.svelte';
+import { Search as SearchIcon } from '@graph-paper/icons';
 
+import LineSegSpinner from '../LineSegSpinner.svelte';
 import { getSearchResults } from '../../state/api';
 import TelemetrySearchResults from './SearchResults.svelte';
 import { store } from '../../state/store';
@@ -144,7 +144,7 @@ const handleSearchInput = throttle(SEARCH_THROTTLE_TIME, (value) => {
     <div class="icon-container">
       {#if !searchWaiting}
         <div class="icon" in:fade>
-          <SearchIcon  />
+          <SearchIcon />
         </div>
       {:else}
         <div class="icon" in:fade>

src/components/search/SearchResults.svelte

@@ -2,10 +2,8 @@
 import page from 'page';
 import { fly } from 'svelte/transition';
 import { afterUpdate } from 'svelte';
-
-import Portal from '../../udgl/Portal.svelte';
-import LineSegSpinner from '../../udgl/LineSegSpinner.svelte';
-
+import { Portal } from '@graph-paper/portal';
+import LineSegSpinner from '../LineSegSpinner.svelte';
 import { currentQuery, store } from '../../state/store';
 
 export let results = [];

src/routing/pages/probe/Explore.svelte

@@ -5,8 +5,8 @@
   import ProportionExplorerView from '../../../components/explore/ProportionExplorerView.svelte';
   import QuantileExplorerView from '../../../components/explore/QuantileExplorerView.svelte';
   import ProbeTitle from '../../../components/regions/ProbeTitle.svelte';
+  import Spinner from '../../../components/LineSegSpinner.svelte';
   import { store } from '../../../state/store';
-  import Spinner from '../../../udgl/LineSegSpinner.svelte';
 
   function handleBodySelectors(event) {
     const { selection, type } = event.detail;

src/routing/pages/probe/FenixDetails.svelte

@@ -1,11 +1,11 @@
 <script>
   import { timeParse, timeFormat } from 'd3-time-format';
-  import ExternalLink from '../../../udgl/icons/ExternalLink.svelte';
-  import StatusLabel from '../../../udgl/StatusLabel.svelte';
-  import Doc from '../../../components/Doc.svelte';
-  import Brackets from '../../../components/Brackets.svelte';
+  import { DocumentationDark } from '@graph-paper/icons';
+  import Brackets from '../../../components/icons/Brackets.svelte';
   import { store, dataset } from '../../../state/store';
   import { downloadString } from '../../../utils/download';
+  import ExternalLink from '../../../components/icons/ExternalLink.svelte';
+  import StatusLabel from '../../../components/StatusLabel.svelte';
 
   async function exportData() {
     const data = await $dataset;
@@ -245,7 +245,7 @@
         class="docs-button"
         href="https://docs.google.com/document/d/1qIkEDemnODbYuVIfpciohgEXcaFjrK_mfVG5FOSeVuM/preview"
         target="_blank">
-        <Doc size={16} />
+        <DocumentationDark size={16} />
         Documentation
       </a>
     </div>