longer .gitignore (#137)

There are a number of files that I have locally that I need to .gitignore. That's all!

.eslintrc

@@ -54,6 +54,7 @@
         }
       }
     ],
+    "typescript-eslint/no-unnecessary-type-assertion": "off",
     "unicorn/consistent-destructuring": "off",
     "unicorn/new-for-builtins": "off",
     "unicorn/prevent-abbreviations": "off",

.github/workflows/deploy-docs.yml

@@ -0,0 +1,32 @@
+name: Deploy Documentation
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Generate documentation
+        run: npm run docs
+
+      - name: Deploy page
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs
+          force_orphan: true

.github/workflows/npm-publish.yml

@@ -0,0 +1,42 @@
+name: Publish @next release to npm
+on:
+  push:
+    branches:
+      - dev
+
+permissions:
+  contents: write
+  packages: write
+  deployments: write
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - name: Configure Git user
+        run: |
+          git config --global user.email "github-actions@github.com"
+          git config --global user.name "GitHub Actions"
+      - run: npm version prerelease --preid=next
+      - name: Commit bumped version
+        run: |
+          # git add package.json package-lock.json
+          # git commit -m "Bump version to $(node -p "require('./package.json').version")"
+          git push
+
+      - run: npm publish --tag next
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
+      - name: Deploy TSDoc to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs
+          publish_branch: gh-pages
+          force_orphan: true

.gitignore

@@ -8,3 +8,24 @@ playwright-report/
 dist/tiles/*
 co2.feather co2.html
 dist
+docs
+tiles
+_deepscatter_tmp
+interfaces
+modules
+temp.html
+pubmed.html
+index3.html
+variables
+build
+classes
+c02*
+co2*
+donations.html
+modules.html
+.DS_Store
+cities.parquet
+city_tiles
+test_pages
+cities.html
+assets

dev/FourClasses.svelte

@@ -0,0 +1,64 @@
+<script>
+  import { Scatterplot } from '../src/deepscatter';
+  import { onMount } from 'svelte';
+  import SwitchPositions from './svelte/SwitchPositions.svelte';
+  import ColorChange from './svelte/ColorChange.svelte';
+  import SizeSlider from './svelte/SizeSlider.svelte';
+  import PositionScales from './svelte/PositionScales.svelte';
+  import SelectPoints from './svelte/SelectPoints.svelte';
+  const startSize = 2;
+  const prefs = {
+    source_url: '/tiles',
+    max_points: 1000000,
+    alpha: 35, // Target saturation for the full page.
+    zoom_balance: 0.22, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
+    point_size: startSize, // Default point size before application of size scaling
+    background_color: '#EEEDDE',
+    duration: 100,
+    encoding: {
+      color: {
+        field: 'class',
+        range: 'category10',
+      },
+      x: {
+        field: 'x',
+        transform: 'literal',
+      },
+      y: {
+        field: 'y',
+        transform: 'literal',
+      },
+    },
+  };
+
+  let scatterplot = null;
+  onMount(() => {
+    scatterplot = new Scatterplot('#deepscatter');
+    window.scatterplot = scatterplot;
+    scatterplot.plotAPI(prefs);
+  });
+</script>
+
+<div id="overlay">
+  <SwitchPositions {scatterplot}></SwitchPositions>
+  <ColorChange {scatterplot}></ColorChange>
+  <SizeSlider size={startSize} {scatterplot}></SizeSlider>
+  <PositionScales {scatterplot} />
+  <SelectPoints {scatterplot}></SelectPoints>
+</div>
+
+<div id="deepscatter"></div>
+
+<style>
+  #overlay {
+    position: fixed;
+    z-index: 10;
+    left: 40px;
+    top: 40px;
+  }
+  #deepscatter {
+    z-index: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+</style>

dev/Main.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount } from 'svelte';
+
+  // Each test file is a svelte component -- routing
+  // here is just grabbing the URL and instantiating that
+  // component.
+
+  import FourClasses from './FourClasses.svelte';
+  import SinglePoint from './SinglePoint.svelte';
+  import LabelMaker from './submodules/LabelMaker.svelte';
+
+  const modes = {
+    FourClasses,
+    SinglePoint,
+    LabelMaker,
+  };
+
+  $: mode = '';
+  onMount(() => {
+    mode = window.location.pathname.slice(1);
+  });
+</script>
+
+{#if mode in modes}
+  <svelte:component this={modes[mode]} />
+{:else}
+  Current mode, {mode} is not in the list of modes.
+  <h1>Put a load mode from the list in the hash.</h1>
+  <div>
+    {#each Object.keys(modes) as modename}
+      <a href="/{modename}">{modename}</a><br />
+    {/each}
+  </div>
+{/if}

dev/SinglePoint.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { Table, tableFromArrays, tableFromJSON } from 'apache-arrow';
+  import { Scatterplot } from '../src/deepscatter';
+  import { onMount } from 'svelte';
+
+  const tb = tableFromArrays({
+    x: new Float32Array([0.001, 0.5, -0.5]),
+    y: new Float32Array([0.001, -0.5, 0.5]),
+    ix: new Int32Array([1, 2, 3]),
+  });
+
+  tb.schema.metadata.set(
+    'extent',
+    JSON.stringify({
+      x: [-1.1, 1.1],
+      y: [-1.1, 1.1],
+    }),
+  );
+
+  const startSize = 480;
+
+  const prefs = {
+    arrow_table: tb,
+    max_points: 1,
+    alpha: 100, // Target saturation for the full page.
+    zoom_balance: 0.22, // Rate at which points increase size. https://observablehq.com/@bmschmidt/zoom-strategies-for-huge-scatterplots-with-three-js
+    point_size: startSize, // Default point size before application of size scaling
+    background_color: '#EEEEEE',
+    encoding: {
+      color: {
+        constant: '#00FF00',
+      },
+      x: {
+        field: 'x',
+        transform: 'literal',
+      },
+      y: {
+        field: 'y',
+        transform: 'literal',
+      },
+    },
+  };
+
+  let scatterplot = null;
+  onMount(() => {
+    scatterplot = new Scatterplot('#deepscatter', 480, 480);
+    window.scatterplot = scatterplot;
+    scatterplot.plotAPI(prefs);
+  });
+</script>
+
+<div id="overlay"></div>
+
+<div id="deepscatter"></div>
+
+<style>
+  #overlay {
+    position: fixed;
+    z-index: -10;
+    left: 40px;
+    top: 40px;
+  }
+  #deepscatter {
+    z-index: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+</style>

dev/main.ts

@@ -0,0 +1,7 @@
+import App from './Main.svelte';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

dev/submodules/LabelMaker.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { onMount } from 'svelte';
+  import { LabelMaker, Scatterplot } from '../../src/deepscatter';
+
+  onMount(() => {
+    const scatterplot = new Scatterplot('#labels');
+    const d = document.getElementById('labels');
+    d.ATTRIBUTE_NODE;
+    if (d === null) {
+      throw new Error('ComponentDidNotMount');
+    }
+    const maker = new LabelMaker(scatterplot, 'maker');
+  });
+</script>
+
+<div class="full" id="labels">
+  <canvas class="full fixed"> </canvas>
+  <svg class="full fixed"> </svg>
+</div>
+
+<style>
+  .full {
+    width: 100vw;
+    height: 100vh;
+  }
+  .fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+</style>

dev/svelte/ColorChange.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export let scatterplot;
+
+  let value = 'category10';
+  const schemes = ['okabe', 'category10', 'dark2', 'pastel2', 'observable10'];
+  function changeColor() {
+    scatterplot.plotAPI({
+      encoding: {
+        color: {
+          field: scatterplot.prefs.encoding.color.field,
+          range: value,
+          //          range: ["red", "yellow", "pink", "purple"],
+          //          domain: ["Apple", "Banana", "Strawberry", "Mulberry"]
+        },
+      },
+    });
+  }
+  function plotViridis() {
+    scatterplot.plotAPI({
+      encoding: {
+        color: {
+          field: 'x',
+          range: 'viridis',
+          //          range: ["red", "yellow", "pink", "purple"],
+          //          domain: ["Apple", "Banana", "Strawberry", "Mulberry"]
+        },
+      },
+    });
+  }
+</script>
+
+<select bind:value on:change={changeColor}>
+  {#each schemes as scheme}
+    <option value={scheme}>{scheme}</option>
+  {/each}
+</select>
+
+<button on:click={plotViridis}>ViridisLinear</button>