Merge pull request #301 from wearepal/2024-tweaks

Add callback to saveModel function to prompt users about status of upload

app/javascript/projects/modelling/components/save_model_component.ts

@@ -4,9 +4,10 @@ import { dataSocket } from "../socket_types"
 import { BooleanTileGrid, CategoricalTileGrid, NumericTileGrid, TileGridJSON } from "../tile_grid"
 import { BaseComponent } from "./base_component"
 import { NumericConstant } from "../numeric_constant"
+import { LabelControl } from "../controls/label"
 
 
-export type SaveModel = (name: string, model: TileGridJSON) => void
+export type SaveModel = (name: string, model: TileGridJSON, callback?: (status: number) => void) => void
 
 export class SaveModelOutputComponent extends BaseComponent {
     callback: SaveModel
@@ -21,11 +22,15 @@ export class SaveModelOutputComponent extends BaseComponent {
         node.meta.toolTip = "Save models as a dataset. Dataets can be used as inputs to other models, or as layers from the map view."
 
         node.addInput(new Input("in", "Output", dataSocket))
+        node.addControl(new LabelControl('summary'))
     }
 
     async worker(node: NodeData, inputs: WorkerInputs, outputs: WorkerOutputs, ...args: unknown[]) {
         const editorNode = this.editor?.nodes.find(n => n.id === node.id)
         if (editorNode === undefined) { return }
+        const summaryControl: any = editorNode.controls.get('summary')
+        node.data.summary = "⏳ Saving..."
+        summaryControl.update()
 
         if (inputs['in'].length > 0) {
             if (inputs['in'][0] instanceof NumericConstant) {
@@ -35,7 +40,10 @@ export class SaveModelOutputComponent extends BaseComponent {
 
                 const name = (editorNode.data.name as string !== undefined && editorNode.data.name as string !== "") ? editorNode.data.name as string : `Untitled Dataset`
 
-                this.callback(name, (inputs['in'][0] as BooleanTileGrid | NumericTileGrid | CategoricalTileGrid).toJSON())
+                this.callback(name, (inputs['in'][0] as BooleanTileGrid | NumericTileGrid | CategoricalTileGrid).toJSON(), (status: number) => {
+                    node.data.summary = (status === 200 || status === 201) ? "✅ Saved!" : "❌ Failed to save!"
+                    summaryControl.update()
+                })
 
             }
 

app/javascript/projects/modelling/controls/select.tsx

@@ -1,4 +1,3 @@
-import { style } from "d3"
 import * as React from "react"
 import { Control, Emitter } from 'rete'
 import { EventsTypes } from "rete/types/events"

app/javascript/projects/project_editor.tsx

@@ -235,7 +235,7 @@ export function ProjectEditor({ projectId, projectSource, backButtonPath, dbMode
           autoProcessing={state.autoProcessing}
           process={process}
           setProcess={setProcess}
-          saveModel={(name: string, json: TileGridJSON) => saveModelOutput(name, json, teamId)}
+          saveModel={(name: string, json: TileGridJSON, callback?: (status: number) => void) => saveModelOutput(name, json, teamId, callback)}
           getDatasets={() => getDatasets(teamId)}
           extent={projectExtent}
           zoom={projectZoom}

app/javascript/projects/saved_dataset.ts

@@ -9,7 +9,7 @@ export interface CompiledDatasetRecord {
     updated_at: string
 }
 
-export function saveModelOutput(name: string, model: TileGridJSON, teamId: number) {
+export function saveModelOutput(name: string, model: TileGridJSON, teamId: number, callback?: (status: number) => void) {
     const formData = new FormData()
 
     const blob = new Blob([JSON.stringify(model)], { type: "application/json" })
@@ -20,6 +20,7 @@ export function saveModelOutput(name: string, model: TileGridJSON, teamId: numbe
     formData.append('gridtype', model.type)
 
     const request = new XMLHttpRequest()
+    if(callback) request.addEventListener('load', () => callback(request.status)) 
     request.open('POST', `/teams/${teamId}/datasets`)
     request.setRequestHeader('X-CSRF-Token', (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content)
     request.send(formData)