Progress indicator

[eevleevs]

I have some large models that take minutes to generate, could use a way to display a progress indicator instead of the spinner.

[hrgdavor]

Unfortunately, not at the moment or near future. Script is executed directly, there is no csg to even know how many operations are left to do (even that would be inaccurate because one op can take minutes and second milliseconds, and it is not trivial to predict).

[eevleevs]

I was rather thinking that the script could actively report the progress to the UI, if there was a way for messaging.

[hrgdavor]

As the developer prototyping, you can use console.log to report progress.

Jscad app is meant to push user in the direction of a reusable module, so script communication with the environment is not something I would accept adding easily to jscad.app.

On the other hand, if you want to create a page that runs a script with more user friendly UI, I am very interested to provide an easy way to do so in the long run. jscad.app is a prototype that should give us more insight what are the different components that are needed to create interesting things with jscad scripts. And jscad.app is also aimed to be the next playground for jscad scripts without those scripts being too dependent on the app, and that they also can be run with jscad-cli.

[eevleevs]

I think the playground will also be very useful in production for customising models by non developers, when using getParameterDefinitions.

Not sure what would be the problem for reusability when messaging like the following. Would it not be just ignored on jscad-cli?

this.postMessage?.({ method: 'progress', params: { progress: value } })

I made a test on https://github.com/eevleevs/jscadui/tree/progress, seems to work quite well.

[hrgdavor]

it has some potential.

I tried with this script

const jscad = require('@jscad/modeling')
const { intersect, subtract } = jscad.booleans
const { colorize } = jscad.colors
const { cube, sphere } = jscad.primitives

const sendProgress = progress => globalThis.postMessage?.({ method: 'progress', params: { progress } })

async function main() {
  let _resolve
  setTimeout(()=>sendProgress(0.25), 500)
  setTimeout(()=>sendProgress(0.5), 1000)
  setTimeout(()=>sendProgress(0.75), 1500)
  setTimeout(()=>_resolve(), 2000)
  
  await new Promise(resolve=>_resolve = resolve)

  const outer = subtract(
    cube({ size: 10 }),
    sphere({ radius: 6.8 })
  )
  const inner = intersect(
    sphere({ radius: 4 }),
    cube({ size: 7 })
  )
  return [
    colorize([0.65, 0.25, 0.8], outer),
    colorize([0.7, 0.7, 0.1], inner),
  ]
}

module.exports = { main }

The signature of the postMessage will likely change in the near future from { method: 'progress', params: { progress } } to { method: 'progress', params: [{ progress }] } tos tandardize the communication so it can be used combining a Proxy and jsdoc/ts typings for the methods and parameters of the worker.

example ts interface:

export interface Agent {
  // { method: 'progressV1', params: [{ progress:0.5, note:'drilling' }] }
  progressV1(options: { progress: number, note:string }): void 

  // { method: 'progressV2', params: [0.5, 'drilling'] }
  progressV2(progress: number, note:string): void 
}

[eevleevs]

Great! Let me know if I should PR this. Please keep us updated here about the signature change.

[eevleevs]

What should I do with note? Log it to the console?

[hrgdavor]

it would be nice to show the note above the progressbar (when note is not null/undefined/'')

[hrgdavor]

BTW @eevleevs, you can easily upload the version you are testing somewhere, and it will work ... for example I put your variant here: https://3d.hrg.hr/jscad/progress/

if you are testing with npm start you can do it by simply copying files from build_dev fodler (feel free to skip docs folder for faster upload)

[eevleevs]

Thanks, actually I managed to deploy to Github pages, see https://github.com/eevleevs/jscadui/blob/main/.github/workflows/build.yml

I did not think of giving you a link to that because I am testing a deployment hiding the editor, in fact indended for non-devs.

[hrgdavor]

I have a plan how to tweak the worker sou you can interact with is far beyond just calling the main method of your module/script ... actually to enable you to call any method exported by your module from the main page. This is something that is made possible by the mentioned refactor of postMessage handling

[hrgdavor]

@eevleevs after some deliberation I have made a choice how to discern messaging when response is expected (or at least info when the called method is done) and messaging when it is just a notification. Methods on the Proxy that start with on prefix will be considered one-directional.

ATM the target signature for the progress notification will be

const sendProgress = progress => globalThis.postMessage?.({ method: 'onProgress', params: [progress] })

I will let you know whet refactoring is done.

[hrgdavor]

@eevleevs refactoring is done. You can provide a PR for the progress feature.

[eevleevs]

I could also use a failure indicator. Might be the same progress element with a 100% value and a red background, where the note explains the error. I could make it, are you ok with the following?

globalThis.postMessage?.({ method: 'onError', params: [note] })

[hrgdavor]

you could just throw an error, and you also get the stack trace in red shown

[eevleevs]

Indeed. I was under the impression that that output could be weird for non-developers, but doesn't look that complex after all. Thanks!