From d89e3934fe4b301f961da92aa21069a75f9dc0bd Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Sat, 21 Oct 2023 10:02:51 +0200 Subject: [PATCH] minor app timelines adjustments --- .../helpers/RunnableComponent.svelte | 3 +- .../components/apps/editor/AppTimeline.svelte | 2 +- .../apps/editor/component/default-codes.ts | 886 +++++++++--------- 3 files changed, 446 insertions(+), 445 deletions(-) diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index eb1c6d805e..7093dd59f0 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -184,7 +184,8 @@ $jobsById[jobId] = { component: id, job: jobId, - started_at: Date.now() + started_at: Date.now(), + started_compute_at: jobId.startsWith('Frontend') ? Date.now() : undefined } jobs.update((jobs) => { const njobs = [...jobs, jobId] diff --git a/frontend/src/lib/components/apps/editor/AppTimeline.svelte b/frontend/src/lib/components/apps/editor/AppTimeline.svelte index 52fcdb2f10..12dec70bbf 100644 --- a/frontend/src/lib/components/apps/editor/AppTimeline.svelte +++ b/frontend/src/lib/components/apps/editor/AppTimeline.svelte @@ -139,7 +139,7 @@ {min} gray started_at={b.started_at} - len={waitingLen < 100 ? 0 : waitingLen} + len={waitingLen < 100 ? 0 : waitingLen - 100} running={b?.started_compute_at == undefined} /> {#if b.started_compute_at} diff --git a/frontend/src/lib/components/apps/editor/component/default-codes.ts b/frontend/src/lib/components/apps/editor/component/default-codes.ts index 746311c818..e61826cec3 100644 --- a/frontend/src/lib/components/apps/editor/component/default-codes.ts +++ b/frontend/src/lib/components/apps/editor/component/default-codes.ts @@ -1,517 +1,517 @@ import type { AppComponent } from '.' export function defaultCode(component: string, language: string): string | undefined { - return DEFAULT_CODES[component]?.[language] + return DEFAULT_CODES[component]?.[language] } export const DEFAULT_CODES: Partial< - Record< - AppComponent['type'], - Partial> - > + Record< + AppComponent['type'], + Partial> + > > = { - tablecomponent: { - deno: `export async function main() { - return [ - { - "id": 1, - "name": "A cell with a long name", - "age": 42 - }, - { - "id": 2, - "name": "A briefer cell", - "age": 84 - } - ] + tablecomponent: { + deno: `export async function main() { + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ] }`, - python3: `def main(): - return [ - { - "id": 1, - "name": "A cell with a long name", - "age": 42 - }, - { - "id": 2, - "name": "A briefer cell", - "age": 84 - } - ]`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ]`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(db: Postgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return query.rows; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return query.rows; }` - }, - aggridcomponent: { - deno: `export async function main() { - return [ - { - "id": 1, - "name": "A cell with a long name", - "age": 42 - }, - { - "id": 2, - "name": "A briefer cell", - "age": 84 - } - ] + }, + aggridcomponent: { + deno: `export async function main() { + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ] }`, - python3: `def main(): - return [ - { - "id": 1, - "name": "A cell with a long name", - "age": 42 - }, - { - "id": 2, - "name": "A briefer cell", - "age": 84 - } - ]`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return [ + { + "id": 1, + "name": "A cell with a long name", + "age": 42 + }, + { + "id": 2, + "name": "A briefer cell", + "age": 84 + } + ]`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(db: Postgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return query.rows; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return query.rows; }` - }, - steppercomponent: { - deno: `export async function main(stepIndex: number) { - // if (stepIndex == 0) { - // if (page0Invalid) throw Error("first step invalid") - // } else if ... + }, + steppercomponent: { + deno: `export async function main(stepIndex: number) { + // if (stepIndex == 0) { + // if (page0Invalid) throw Error("first step invalid") + // } else if ... }`, - python3: `def main(stepIndex: int): + python3: `def main(stepIndex: int): # if stepIndex == 0: # if page0Invalid: # raise Exception("first step invalid") # elif ... ` - }, - textcomponent: { - deno: `export async function main() { - return "foo" + }, + textcomponent: { + deno: `export async function main() { + return "foo" }`, - python3: `def main(): - return "foo"` - }, - barchartcomponent: { - deno: `export async function main() { - return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Bar", - "Charts", - "<3" - ] - } + python3: `def main(): + return "foo"` + }, + barchartcomponent: { + deno: `export async function main() { + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Bar", + "Charts", + "<3" + ] + } }`, - python3: `def main(): - return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Bar", - "Charts", - "<3" - ] - }`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Bar", + "Charts", + "<3" + ] + }`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(db: Postgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return { - data: query.rows.map((row) => row['0']), - labels: query.rows.map((row) => row['1']?.slice(0, 6)) - }; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: query.rows.map((row) => row['0']), + labels: query.rows.map((row) => row['1']?.slice(0, 6)) + }; }` - }, - displaycomponent: { - deno: `export async function main(x = 42) { - return { - foo: x - } + }, + displaycomponent: { + deno: `export async function main(x = 42) { + return { + foo: x + } }`, - python3: `def main(): - return { - "foo": 42 - }` - }, - htmlcomponent: { - deno: `export async function main() { - return \` -

- Hello world -

\` + python3: `def main(): + return { + "foo": 42 + }` + }, + htmlcomponent: { + deno: `export async function main() { + return \` +

+ Hello world +

\` }`, - python3: `def main(): - return ''' -

- Hello world -

'''` - }, - vegalitecomponent: { - deno: `export async function main() { - return { - data: { - values: [ - { a: "A", b: 28 }, - { a: "B", b: 55 }, - { a: "C", b: 43 }, - { a: "D", b: 91 }, - ], - }, - mark: "bar", - encoding: { - x: { field: "a", type: "ordinal" }, - y: { field: "b", type: "quantitative" }, - } - } + python3: `def main(): + return ''' +

+ Hello world +

'''` + }, + vegalitecomponent: { + deno: `export async function main() { + return { + data: { + values: [ + { a: "A", b: 28 }, + { a: "B", b: 55 }, + { a: "C", b: 43 }, + { a: "D", b: 91 }, + ], + }, + mark: "bar", + encoding: { + x: { field: "a", type: "ordinal" }, + y: { field: "b", type: "quantitative" }, + } + } }`, - python3: `def main(): - return { - "data": { - "values": [ - { "a": "A", "b": 28 }, - { "a": "B", "b": 55 }, - { "a": "C", "b": 43 }, - { "a": "D", "b": 91 }, - ], - }, - "mark": "bar", - "encoding": { - "x": { "field": "a", "type": "ordinal" }, - "y": { "field": "b", "type": "quantitative" }, - }, - }`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return { + "data": { + "values": [ + { "a": "A", "b": 28 }, + { "a": "B", "b": 55 }, + { "a": "C", "b": 43 }, + { "a": "D", "b": 91 }, + ], + }, + "mark": "bar", + "encoding": { + "x": { "field": "a", "type": "ordinal" }, + "y": { "field": "b", "type": "quantitative" }, + }, + }`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(Postgresqlstgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return { - data: { - values: query.rows.map((row) => { - row['1'] = row['1']?.slice(0, 6); - return row; - }) - }, - mark: "bar", - encoding: { - x: { field: "1", type: "ordinal" }, - y: { field: "0", type: "quantitative" }, - } - }; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: { + values: query.rows.map((row) => { + row['1'] = row['1']?.slice(0, 6); + return row; + }) + }, + mark: "bar", + encoding: { + x: { field: "1", type: "ordinal" }, + y: { field: "0", type: "quantitative" }, + } + }; }` - }, - plotlycomponent: { - deno: `export async function main() { - return { - type: 'bar', - x: [1, 2, 3, 4], - y: [5, 10, 2, 8], - marker: { - color: '#C8A2C8', - line: { - width: 2.5 - } - } - }; + }, + plotlycomponent: { + deno: `export async function main() { + return { + type: 'bar', + x: [1, 2, 3, 4], + y: [5, 10, 2, 8], + marker: { + color: '#C8A2C8', + line: { + width: 2.5 + } + } + }; }`, - python3: `def main(): - return { - "type": "bar", - "x": [1, 2, 3, 4], - "y": [5, 10, 2, 8], - "marker": { - "color": "#C8A2C8", - "line": { - "width": 2.5 - } - } - }`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return { + "type": "bar", + "x": [1, 2, 3, 4], + "y": [5, 10, 2, 8], + "marker": { + "color": "#C8A2C8", + "line": { + "width": 2.5 + } + } + }`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(Postgresqlstgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return { - type: 'bar', - x: query.rows.map((row) => row['1']?.slice(0, 6)), - y: query.rows.map((row) => row['0']), - marker: { - color: '#C8A2C8', - line: { - width: 2.5 - } - } - }; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + type: 'bar', + x: query.rows.map((row) => row['1']?.slice(0, 6)), + y: query.rows.map((row) => row['0']), + marker: { + color: '#C8A2C8', + line: { + width: 2.5 + } + } + }; }` - }, - piechartcomponent: { - deno: `export async function main() { - return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Pie", - "Charts", - "<3" - ] - } + }, + piechartcomponent: { + deno: `export async function main() { + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Pie", + "Charts", + "<3" + ] + } }`, - python3: `def main(): - return { - "data": [ - 25, - 50, - 25 - ], - "labels": [ - "Pie", - "Charts", - "<3" - ] - }`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return { + "data": [ + 25, + 50, + 25 + ], + "labels": [ + "Pie", + "Charts", + "<3" + ] + }`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(db: Postgresql) { - const query = await pgSql(db)\`SELECT * FROM demo;\`; - return { - data: query.rows.map((row) => row['0']), - labels: query.rows.map((row) => row['1']?.slice(0, 6)) - }; + const query = await pgSql(db)\`SELECT * FROM demo;\`; + return { + data: query.rows.map((row) => row['0']), + labels: query.rows.map((row) => row['1']?.slice(0, 6)) + }; }` - }, - scatterchartcomponent: { - deno: `export async function main() { - return [ - { - label: "foo", - data: [ - { x: 25, y: 50 }, - { x: 23, y: 23 }, - { x: 12, y: 37 } - ], - backgroundColor: "rgb(255, 12, 137)" - }, - { - label: "bar", - data: [ - { x: 32, y: 32 }, - { x: 25, y: 42 }, - { x: 3, y: 27 } - ], - backgroundColor: "orange" - } - ]; + }, + scatterchartcomponent: { + deno: `export async function main() { + return [ + { + label: "foo", + data: [ + { x: 25, y: 50 }, + { x: 23, y: 23 }, + { x: 12, y: 37 } + ], + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: [ + { x: 32, y: 32 }, + { x: 25, y: 42 }, + { x: 3, y: 27 } + ], + backgroundColor: "orange" + } + ]; }`, - python3: `def main(): - return [ - { - "label": "foo", - "data": [ - { "x": 25, "y": 50 }, - { "x": 23, "y": 23 }, - { "x": 12, "y": 37 } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { "x": 32, "y": 32 }, - { "x": 25, "y": 42 }, - { "x": 3, "y": 27 } - ], - "backgroundColor": "orange" - } - ]`, - pgsql: `import { pgSql } from "npm:windmill-client@1"; + python3: `def main(): + return [ + { + "label": "foo", + "data": [ + { "x": 25, "y": 50 }, + { "x": 23, "y": 23 }, + { "x": 12, "y": 37 } + ], + "backgroundColor": "rgb(255, 12, 137)" + }, + { + "label": "bar", + "data": [ + { "x": 32, "y": 32 }, + { "x": 25, "y": 42 }, + { "x": 3, "y": 27 } + ], + "backgroundColor": "orange" + } + ]`, + pgsql: `import { pgSql } from "npm:windmill-client@1"; type Postgresql = object export async function main(db: Postgresql) { - try { - const query = await pgSql(db)\`SELECT * FROM demo;\`; + try { + const query = await pgSql(db)\`SELECT * FROM demo;\`; const rows = query.rows.map((row, i) => ({ x: row['0'], y: query.rows[query.rows.length - (i + 1)]['0'] })) - return [ + return [ { - label: "foo", - data: rows, - backgroundColor: "rgb(255, 12, 137)" - }, - { - label: "bar", - data: rows.map(({x, y}) => ({ + label: "foo", + data: rows, + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: rows.map(({x, y}) => ({ x: x * 2, y: y * 1.5 })), - backgroundColor: "orange" - } + backgroundColor: "orange" + } ]; - } catch (e) { - return []; - } + } catch (e) { + return []; + } }` - }, - timeseriescomponent: { - deno: `export async function main() { - return [ - { - label: "foo", - data: [ - { - x: "2021-11-06 23:39:30", - y: 50 - }, - { - x: "2021-11-07 01:00:28", - y: 60 - }, - { - x: "2021-11-07 09:00:28", - y: 20 - } - ], - backgroundColor: "rgb(255, 12, 137)" - }, - { - label: "bar", - data: [ - { - x: "2021-11-06 23:39:30", - y: 20 - }, - { - x: "2021-11-07 01:00:28", - y: 13 - }, - { - x: "2021-11-07 09:00:28", - y: 45 - } - ], - backgroundColor: "orange" - } - ] + }, + timeseriescomponent: { + deno: `export async function main() { + return [ + { + label: "foo", + data: [ + { + x: "2021-11-06 23:39:30", + y: 50 + }, + { + x: "2021-11-07 01:00:28", + y: 60 + }, + { + x: "2021-11-07 09:00:28", + y: 20 + } + ], + backgroundColor: "rgb(255, 12, 137)" + }, + { + label: "bar", + data: [ + { + x: "2021-11-06 23:39:30", + y: 20 + }, + { + x: "2021-11-07 01:00:28", + y: 13 + }, + { + x: "2021-11-07 09:00:28", + y: 45 + } + ], + backgroundColor: "orange" + } + ] }`, - python3: `def main(): - return [ - { - "label": "foo", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 50 - }, - { - "x": "2021-11-07 01:00:28", - "y": 60 - }, - { - "x": "2021-11-07 09:00:28", - "y": 20 - } - ], - "backgroundColor": "rgb(255, 12, 137)" - }, - { - "label": "bar", - "data": [ - { - "x": "2021-11-06 23:39:30", - "y": 20 - }, - { - "x": "2021-11-07 01:00:28", - "y": 13 - }, - { - "x": "2021-11-07 09:00:28", - "y": 45 - } - ], - "backgroundColor": "orange" - } - ]` - }, - iconcomponent: { - deno: `export async function main() { - return "Smile"; + python3: `def main(): + return [ + { + "label": "foo", + "data": [ + { + "x": "2021-11-06 23:39:30", + "y": 50 + }, + { + "x": "2021-11-07 01:00:28", + "y": 60 + }, + { + "x": "2021-11-07 09:00:28", + "y": 20 + } + ], + "backgroundColor": "rgb(255, 12, 137)" + }, + { + "label": "bar", + "data": [ + { + "x": "2021-11-06 23:39:30", + "y": 20 + }, + { + "x": "2021-11-07 01:00:28", + "y": 13 + }, + { + "x": "2021-11-07 09:00:28", + "y": 45 + } + ], + "backgroundColor": "orange" + } + ]` + }, + iconcomponent: { + deno: `export async function main() { + return "Smile"; }`, - python3: `def main(): - return "Smile"` - }, - schemaformcomponent: { - deno: `export async function main() { + python3: `def main(): + return "Smile"` + }, + schemaformcomponent: { + deno: `export async function main() { return { - properties: { - first_name: { - type: 'string', - description: 'your name', - default: 'default' - } - }, - required: [] - } + properties: { + first_name: { + type: 'string', + description: 'your name', + default: 'default' + } + }, + required: [] + } }`, - python3: `def main(): - return { - "properties": { - "first_name": { - "type": "string", - "description": "your name", - "default": "default" - } - }, - "required": [] - } + python3: `def main(): + return { + "properties": { + "first_name": { + "type": "string", + "description": "your name", + "default": "default" + } + }, + "required": [] + } ` - }, - listcomponent: { - deno: `export async function main() { - return [{ - "foo": 1, - }, { - "foo": 2, - }, { - "foo": 3, - }]; + }, + listcomponent: { + deno: `export async function main() { + return [{ + "foo": 1, + }, { + "foo": 2, + }, { + "foo": 3, + }]; }`, - python3: `def main(): - return [{"foo": 1}, {"foo": 2}, {"foo": 3}]` - } + python3: `def main(): + return [{"foo": 1}, {"foo": 2}, {"foo": 3}]` + } } as const