Merge branch 'release/v0.4.4'

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Marcelle changelog
 
+## 0.4.4
+
+- Various minor bugfixes
+
 ## 0.4.3
 
 - Fixed svelte component compilation (reverted to svelte v3.39)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marcellejs/core",
   "description": "Marcelle Core API",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/marcellejs/marcelle"

src/components/dataset-browser/dataset-browser.view.svelte

@@ -171,7 +171,6 @@
       }
     });
   });
-
 </script>
 
 <svelte:window on:keydown={handleKeydown} on:keyup={handleKeyup} />
@@ -250,11 +249,10 @@
   .browser-class-body img {
     width: 60px;
     box-sizing: content-box;
-    @apply border-2 border-transparent rounded-md;
+    @apply border-solid border-2 border-transparent rounded-md;
   }
 
   .browser-class-body img.selected {
-    @apply border-teal-700;
+    @apply border-gray-600;
   }
-
 </style>

src/components/mlp-classifier/mlp-classifier.component.ts

@@ -20,6 +20,7 @@ import {
 import type { ServiceIterable } from '../../core/data-store/service-iterable';
 import { Dataset, isDataset } from '../../core/dataset';
 import { Catch, TrainingError } from '../../utils/error-handling';
+import { throwError } from '../../utils/error-handling';
 
 interface TrainingData {
   training_x: Tensor2D;
@@ -130,6 +131,13 @@ export class MLPClassifier extends TFJSBaseModel<TensorLike, ClassifierResults>
       : (this.labels = Array.from(new Set(await dataset.map(({ y }) => y).toArray())));
     const ds = isDataset(dataset) ? dataset.items() : dataset;
     this.$training.set({ status: 'start', epochs: this.parameters.epochs.value });
+    if (this.labels.length === 0) {
+      throwError(new TrainingError('This dataset is empty or is missing labels'));
+      this.$training.set({
+        status: 'error',
+      });
+      return;
+    }
     setTimeout(async () => {
       const data = await dataSplit(ds, 0.75, this.labels);
       this.buildModel(data.training_x.shape[1], data.training_y.shape[1]);

src/components/training-history/training-history.component.ts

@@ -1,6 +1,7 @@
 import { Paginated, Service } from '@feathersjs/feathers';
 import { logger, Model, Component, Stream, TrainingRun, TrainingStatus } from '../../core';
 import { DataStore } from '../../core/data-store';
+import { preventConcurrentCalls } from '../../utils/asynchronicity';
 import { noop } from '../../utils/misc';
 import View from './training-history.view.svelte';
 
@@ -38,9 +39,12 @@ export class TrainingHistory<InputType, OutputType> extends Component {
   protected modelName: string;
   protected nextIndex: number;
 
+  private lock = Promise.resolve();
+
   constructor(public dataStore: DataStore, options: TrainingHistoryOptions = {}) {
     super();
     this.options = { ...defaultOptions, ...options };
+    this.lock = this.lock.then(noop);
     this.start();
     this.ready = this.ready
       .then(() => this.dataStore.connect())
@@ -71,7 +75,7 @@ export class TrainingHistory<InputType, OutputType> extends Component {
       })
       .then(({ data: foundRuns }) => {
         if (foundRuns.length > 0) {
-          return parseInt(foundRuns[0].name.split(`${name}-`)[1]) + 1;
+          return parseInt(foundRuns[0].name.split(`${basename}-`)[1]) + 1;
         }
         return 1;
       })
@@ -85,6 +89,7 @@ export class TrainingHistory<InputType, OutputType> extends Component {
     return this;
   }
 
+  @preventConcurrentCalls('lock')
   protected async trackTrainingStream(x: TrainingStatus): Promise<void> {
     if (x.status === 'start') {
       this.crtRun = await this.runService.create({
@@ -119,6 +124,10 @@ export class TrainingHistory<InputType, OutputType> extends Component {
           },
         ]),
       });
+    } else if (x.status === 'error') {
+      this.runService.patch(this.crtRun.id, {
+        status: x.status,
+      });
     }
   }
 

src/components/training-history/training-history.view.svelte

@@ -47,6 +47,10 @@
     },
   });
 
+  provider.data.subscribe(() => {
+    selection.set([]);
+  });
+
   const columns: Column[] = [
     { name: 'name', sortable: true },
     { name: 'start', sortable: true, type: 'date' },
@@ -82,7 +86,7 @@
     {provider}
     actions={[
       ...actions.map((name) => (typeof name === 'string' ? { name } : name)),
-      { name: 'remove', confirm: true },
+      { name: 'delete', confirm: true },
     ]}
     bind:selection={$selection}
     bind:this={mainTable}

src/ui/components/Select.svelte

@@ -17,7 +17,7 @@
     on:change={(e) => dispatch('change', e.target.value)}
   >
     {#if placeholder}
-      <option value="">{placeholder}</option>
+      <option value="" disabled>{placeholder}</option>
     {/if}
     {#each options as option}
       <option value={option}>{option}</option>

src/ui/components/Table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import TableContentCell from './TableContentCell.svelte';
   import TableHeaderCell from './TableHeaderCell.svelte';
   import TableFooter from './TableFooter.svelte';
@@ -18,10 +18,7 @@
 
   $: data = provider.data;
   $: error = provider.error;
-
-  onMount(() => {
-    selected = selection.map((x) => get(data).indexOf(x));
-  });
+  $: selected = selection.map((x) => get(data).indexOf(x));
 
   const dispatch = createEventDispatcher();
 
@@ -93,7 +90,7 @@
             {#if !singleSelection}
               <input
                 type="checkbox"
-                checked={selected.length === $data.length}
+                checked={selected.length > 0 && selected.length === $data.length}
                 on:click={selectAll}
               />
             {/if}

src/ui/components/TableFooter.svelte

@@ -1,23 +1,48 @@
 <script lang="ts">
   import type { Action } from './table-types';
-  import { get } from 'svelte/store';
   import Button from './Button.svelte';
   import Select from './Select.svelte';
   import { TableDataProvider } from './table-abstract-provider';
   import TableActions from './TableActions.svelte';
+  import { noop } from '../../utils/misc';
 
   export let provider: TableDataProvider;
   export let actions: Action[];
   export let selected: number[];
 
-  $: total = provider.total;
+  // $: total = provider.total;
   $: itemsPerPage = provider.options.itemsPerPage;
 
   let page = 1;
+  let numPages = 1;
+  let start = 0;
+  let end = 0;
+  let total = 0;
+  let unsub = noop;
 
-  $: numPages = Math.ceil($total / itemsPerPage);
-  $: start = (page - 1) * itemsPerPage + 1;
-  $: end = Math.min($total, page * itemsPerPage);
+  $: {
+    unsub();
+    unsub = provider.total.subscribe((t) => {
+      if (t === undefined || t === 0) {
+        numPages = 1;
+        start = 0;
+        end = 0;
+        total = 0;
+      } else {
+        numPages = Math.ceil(total / itemsPerPage);
+        start = (page - 1) * itemsPerPage + 1;
+        end = Math.min(total || 0, page * itemsPerPage);
+        total = t;
+      }
+    });
+  }
+
+  // $: console.log('provider', provider);
+  // $: console.log('total', total);
+  // $: console.log('$total', $total);
+  // $: numPages = $total ? Math.ceil($total / itemsPerPage) : 1;
+  // $: start = $total ? (page - 1) * itemsPerPage + 1 : 0;
+  // $: end = Math.min($total || 0, page * itemsPerPage);
 
   function gotoPage(i: number): void {
     page = i;
@@ -41,15 +66,15 @@
           options={['10', '20', '50', 'all']}
           value={itemsPerPage.toString()}
           on:change={({ detail }) => {
-            const n = detail === 'all' ? get(total) : parseInt(detail);
+            const n = detail === 'all' ? total : parseInt(detail);
             provider.paginate(n);
             itemsPerPage = n;
           }}
         />
       </div>
     </div>
     <div class="mx-3">
-      {start}-{end} of {$total}
+      {start}-{end} of {total}
     </div>
     <Button
       round

src/ui/components/table-array-provider.ts

@@ -7,6 +7,7 @@ export class TableArrayProvider<T extends Record<string, unknown>> extends Table
   constructor({ data, ...options }: TableProviderOptions & { data: Array<T> }) {
     super(options);
     this.rawData = data;
+    this.total.set(data.length);
     this.data.set(this.rawData.slice(0, this.options.itemsPerPage));
   }
 

src/ui/components/table-service-provider.ts

@@ -66,6 +66,7 @@ export class TableServiceProvider<
       });
       this.data.set(data);
       this.total.set(res.total);
+      console.log('res.total', res.total);
       this.error.set(null);
     } catch (error) {
       this.data.set([]);