From baddd6291c7cc44e95263478cd5e7df44970fd4e Mon Sep 17 00:00:00 2001 From: Foxino Date: Tue, 2 Jan 2024 14:40:53 +0000 Subject: [PATCH] Add callback to saveModel function to prompt users about status of upload --- .../modelling/components/save_model_component.ts | 12 ++++++++++-- .../projects/modelling/controls/select.tsx | 1 - app/javascript/projects/project_editor.tsx | 2 +- app/javascript/projects/saved_dataset.ts | 3 ++- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/javascript/projects/modelling/components/save_model_component.ts b/app/javascript/projects/modelling/components/save_model_component.ts index 25775b25..5a80b6e2 100644 --- a/app/javascript/projects/modelling/components/save_model_component.ts +++ b/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() + }) } diff --git a/app/javascript/projects/modelling/controls/select.tsx b/app/javascript/projects/modelling/controls/select.tsx index ab5c82aa..6103d310 100644 --- a/app/javascript/projects/modelling/controls/select.tsx +++ b/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" diff --git a/app/javascript/projects/project_editor.tsx b/app/javascript/projects/project_editor.tsx index 5970cdbe..52c794f7 100644 --- a/app/javascript/projects/project_editor.tsx +++ b/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} diff --git a/app/javascript/projects/saved_dataset.ts b/app/javascript/projects/saved_dataset.ts index a86e8fcd..4245fceb 100644 --- a/app/javascript/projects/saved_dataset.ts +++ b/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)