windmill-components 1.89.1 → 1.103.0

package/package/components/ModulePreviewForm.svelte

@@ -0,0 +1,87 @@
+<script>import { allTrue } from '../utils';
+import { RefreshCw } from 'lucide-svelte';
+import ArgInput from './ArgInput.svelte';
+import { Button } from './common';
+import { getContext } from 'svelte';
+import { evalValue } from './flows/utils';
+export let schema;
+export let args = {};
+export let mod;
+export let pickableProperties;
+export let isValid = true;
+export let autofocus = false;
+const { testStepStore } = getContext('FlowEditorContext');
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
+$: if (args == undefined || typeof args !== 'object') {
+    args = {};
+}
+function removeExtraKey() {
+    const nargs = {};
+    Object.keys(args ?? {}).forEach((key) => {
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
+        }
+    });
+    args = nargs;
+}
+let keys = [];
+$: {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+        keys = lkeys;
+        removeExtraKey();
+    }
+}
+function plugIt(argName) {
+    args[argName] = evalValue(argName, mod, testStepStore, pickableProperties, true);
+    try {
+        editor?.[argName]?.setCode(JSON.stringify(args[argName], null, 4));
+    }
+    catch {
+        //ignore
+    }
+}
+let editor = {};
+</script>
+
+<div class="w-full pt-2">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+				<div class="flex gap-2 items-center">
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						<ArgInput
+							minW={false}
+							autofocus={i == 0 && autofocus}
+							label={argName}
+							description={schema.properties[argName].description}
+							bind:value={args[argName]}
+							type={schema.properties[argName].type}
+							required={schema.required.includes(argName)}
+							pattern={schema.properties[argName].pattern}
+							bind:editor={editor[argName]}
+							bind:valid={inputCheck[argName]}
+							defaultValue={schema.properties[argName].default}
+							enum_={schema.properties[argName].enum}
+							format={schema.properties[argName].format}
+							contentEncoding={schema.properties[argName].contentEncoding}
+							properties={schema.properties[argName].properties}
+							itemsType={schema.properties[argName].items}
+							extra={schema.properties[argName]}
+						/>
+					{/if}
+					<div>
+						<Button
+							on:click={() => plugIt(argName)}
+							size="sm"
+							variant="border"
+							color="light"
+							title="Re-evaluate input step"><RefreshCw size={14} /></Button
+						>
+					</div>
+				</div>
+			{/if}
+		{/each}
+	{/if}
+</div>

package/package/components/ModulePreviewForm.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import type { FlowModule } from '../gen';
+import type { PickableProperties } from './flows/previousResults';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        mod: FlowModule;
+        pickableProperties: PickableProperties | undefined;
+        isValid?: boolean | undefined;
+        autofocus?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModulePreviewFormProps = typeof __propDef.props;
+export type ModulePreviewFormEvents = typeof __propDef.events;
+export type ModulePreviewFormSlots = typeof __propDef.slots;
+export default class ModulePreviewForm extends SvelteComponentTyped<ModulePreviewFormProps, ModulePreviewFormEvents, ModulePreviewFormSlots> {
+}
+export {};

package/package/components/MoveDrawer.svelte

@@ -1,10 +1,10 @@
-<script>import { isOwner } from '../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { userStore, workspaceStore } from '../stores';
 import { Alert, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Path from './Path.svelte';
-import { AppService, FlowService, ScriptService } from '../gen';
+import { AppService, FlowService, RawAppService, ScriptService } from '../gen';
+import { isOwner } from '../utils';
 const dispatch = createEventDispatcher();
 let kind;
 let initialPath = '';
@@ -14,6 +14,7 @@ let drawer;
 let own = false;
 export async function openDrawer(initialPath_l, summary_l, kind_l) {
     kind = kind_l;
+    path = undefined;
     initialPath = initialPath_l;
     summary = summary_l;
     loadOwner();
@@ -67,6 +68,16 @@ async function updatePath() {
             }
         });
     }
+    else if (kind == 'raw_app') {
+        await RawAppService.updateRawApp({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path: path != initialPath ? path : undefined,
+                summary
+            }
+        });
+    }
     dispatch('update', path);
     drawer.closeDrawer();
 }

package/package/components/MoveDrawer.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        openDrawer?: ((initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>) | undefined;
+        openDrawer?: ((initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "raw_app" | "schedule" | "variable") => Promise<void>) | undefined;
     };
     events: {
         update: CustomEvent<any>;
@@ -14,6 +14,6 @@ export type MoveDrawerProps = typeof __propDef.props;
 export type MoveDrawerEvents = typeof __propDef.events;
 export type MoveDrawerSlots = typeof __propDef.slots;
 export default class MoveDrawer extends SvelteComponentTyped<MoveDrawerProps, MoveDrawerEvents, MoveDrawerSlots> {
-    get openDrawer(): (initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "schedule" | "variable") => Promise<void>;
+    get openDrawer(): (initialPath_l: string, summary_l: string | undefined, kind_l: "flow" | "script" | "resource" | "app" | "raw_app" | "schedule" | "variable") => Promise<void>;
 }
 export {};

package/package/components/PageHeader.svelte

@@ -1,6 +1,7 @@
 <script>import Tooltip from './Tooltip.svelte';
 export let title;
 export let tooltip = '';
+export let documentationLink = undefined;
 export let primary = true;
 </script>
 
@@ -8,14 +9,14 @@ export let primary = true;
 	{#if primary}
 		<span class="flex items-center space-x-2 mb-2">
 			<h1>{title}</h1>
-			{#if tooltip}
-				<Tooltip scale={0.9}>{tooltip}</Tooltip>
+			{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}
 		<span class="flex items-center space-x-2">
 			<h2>{title}</h2>
-			{#if tooltip}
+			{#if tooltip != '' || documentationLink}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
 		</span>

package/package/components/PageHeader.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         title: string;
         tooltip?: string | undefined;
+        documentationLink?: string | undefined;
         primary?: boolean | undefined;
     };
     events: {

package/package/components/Path.svelte

@@ -54,13 +54,18 @@ function handleKeyUp(event) {
 }
 export async function reset() {
     if (path == '' || path == 'u//') {
-        if ($lastMetaUsed == undefined) {
+        if ($lastMetaUsed == undefined || $lastMetaUsed.owner != $userStore?.username) {
             meta = {
                 ownerKind: 'user',
                 name: random_adj() + '_' + namePlaceholder,
                 owner: ''
             };
-            meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9]/g, '');
+            if ($userStore?.username?.includes('@')) {
+                meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '');
+            }
+            else {
+                meta.owner = $userStore.username;
+            }
         }
         else {
             meta = { ...$lastMetaUsed, name: random_adj() + '_' + namePlaceholder };
@@ -285,6 +290,7 @@ async function addFolder() {
 					<label class="block grow w-48">
 						<span class="text-gray-700 text-sm"
 							>Folder <Tooltip
+								documentationLink="https://docs.windmill.dev/docs/core_concepts/groups_and_folders"
 								>Read and write permissions are given to groups and users at the folder level and
 								shared by all items inside the folder.</Tooltip
 							></span
@@ -292,6 +298,9 @@ async function addFolder() {
 
 						<div class="flex flex-row items-center gap-1 w-full">
 							<select class="grow w-full" {disabled} bind:value={meta.owner}>
+								{#if folders?.length == 0}
+									<option disabled>No folders</option>
+								{/if}
 								{#each folders as { name, write }}
 									<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
 								{/each}
@@ -301,6 +310,7 @@ async function addFolder() {
 								btnClasses="!p-1.5"
 								variant="border"
 								size="xs"
+								disabled={!meta.owner || meta.owner == ''}
 								on:click={viewFolder.openDrawer}
 							>
 								<Icon scale={0.8} data={faEye} /></Button

package/package/components/Path.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         error?: string | undefined;
         disabled?: boolean | undefined;
         checkInitialPathExistence?: boolean | undefined;
-        kind: "flow" | "script" | "resource" | "app" | "schedule" | "variable";
+        kind: "flow" | "script" | "resource" | "app" | "raw_app" | "schedule" | "variable";
         focus?: (() => void) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };

package/package/components/Popover.svelte

@@ -1,4 +1,5 @@
 <script>import { createPopperActions } from 'svelte-popperjs';
+import Portal from 'svelte-portal';
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';
@@ -39,15 +40,17 @@ function close() {
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<div
-		use:popperContent={popperOptions}
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class="z-50 py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
+	<Portal>
+		<div
+			use:popperContent={popperOptions}
+			on:mouseenter={open}
+			on:mouseleave={close}
+			class="z-[2000] py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800
 		whitespace-normal text-left {popupClass}"
-	>
-		<div class="max-w-sm">
-			<slot name="text" />
+		>
+			<div class="max-w-sm">
+				<slot name="text" />
+			</div>
 		</div>
-	</div>
+	</Portal>
 {/if}

package/package/components/PropertyRow.svelte

@@ -0,0 +1,80 @@
+<script>import Required from './Required.svelte';
+import { createEventDispatcher } from 'svelte';
+import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
+import SchemaEditorProperty from './SchemaEditorProperty.svelte';
+import { Button } from './common';
+export let displayInfo;
+export let isAnimated;
+export let lightMode;
+let depth = displayInfo.path.length;
+const required = displayInfo.isRequired;
+const dispatch = createEventDispatcher();
+function startEditArgument(name) {
+    dispatch('startEditArgument', name);
+}
+function handleDeleteArgument(argPath) {
+    dispatch('deleteArgument', argPath);
+}
+function changePosition(i, up) {
+    dispatch('changePosition', { i, up });
+}
+function getArgPath(displayInfo) {
+    return [...displayInfo.path, displayInfo.name];
+}
+const indentStyle = depth > 0 ? `margin-left :${depth}rem` : '';
+</script>
+
+<td class="font-bold">
+	<span style={indentStyle}>
+		{displayInfo.name}
+		<Required {required} class="!ml-0" />
+	</span>
+</td>
+<td>
+	<SchemaEditorProperty property={displayInfo.property} />
+</td>
+{#if !lightMode}
+	<td>{displayInfo.property.default ? JSON.stringify(displayInfo.property.default) : ''}</td>
+	<td>{displayInfo.property.description ?? ''}</td>
+{/if}
+<td />
+<td class="justify-end flex">
+	{#if depth === 0}
+		{#if displayInfo.index > 0}
+			<button
+				on:click={() => changePosition(displayInfo.index, true)}
+				class="text-lg mr-2 {isAnimated ? 'invisible' : ''}"
+			>
+				&uparrow;</button
+			>
+		{/if}
+		{#if displayInfo.index < displayInfo.propertiesNumber - 1}
+			<button
+				on:click={() => changePosition(displayInfo.index, false)}
+				class="text-lg mr-2 {isAnimated ? 'invisible' : ''}">&downarrow;</button
+			>
+		{/if}
+
+		<Button
+			color="light"
+			variant="border"
+			size={lightMode ? 'xs' : 'sm'}
+			startIcon={{ icon: faPen }}
+			on:click={() => startEditArgument(displayInfo.name)}
+			iconOnly={lightMode}
+		>
+			Edit
+		</Button>
+	{/if}
+	<Button
+		color="red"
+		variant="border"
+		btnClasses="mx-2"
+		size={lightMode ? 'xs' : 'sm'}
+		startIcon={{ icon: faTrash }}
+		on:click={() => handleDeleteArgument(getArgPath(displayInfo))}
+		iconOnly={lightMode}
+	>
+		Delete
+	</Button>
+</td>

package/package/components/PropertyRow.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PropertyDisplayInfo } from '../common';
+declare const __propDef: {
+    props: {
+        displayInfo: PropertyDisplayInfo;
+        isAnimated: boolean;
+        lightMode: boolean;
+    };
+    events: {
+        startEditArgument: CustomEvent<any>;
+        deleteArgument: CustomEvent<any>;
+        changePosition: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PropertyRowProps = typeof __propDef.props;
+export type PropertyRowEvents = typeof __propDef.events;
+export type PropertyRowSlots = typeof __propDef.slots;
+export default class PropertyRow extends SvelteComponentTyped<PropertyRowProps, PropertyRowEvents, PropertyRowSlots> {
+}
+export {};

package/package/components/ResourceEditor.svelte

@@ -1,5 +1,5 @@
 <script>import { ResourceService } from '../gen';
-import { canWrite, emptyString, isOwner, sendUserToast } from '../utils';
+import { canWrite, emptyString, isOwner } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import { Alert, Button, Drawer, Skeleton } from './common';
 import Path from './Path.svelte';
@@ -11,6 +11,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
+import { sendUserToast } from '../toast';
 let path = '';
 let initialPath = '';
 let resourceToEdit;

package/{dist/components/TestJobLoader.svelte → package/components/ResultJobLoader.svelte}

@@ -1,6 +1,6 @@
-<script>import { Job, JobService } from '../gen';
+<script>import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { onDestroy } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import { createEventDispatcher } from 'svelte';
 export let isLoading = false;
 export let job = undefined;
@@ -24,6 +24,7 @@ export async function abstractRun(fn) {
         if (lastStartedAt < startedAt) {
             lastStartedAt = startedAt;
             if (testId) {
+                dispatch('started', testId);
                 try {
                     await watchJob(testId);
                 }
@@ -37,6 +38,10 @@ export async function abstractRun(fn) {
         return testId;
     }
     catch (err) {
+        // if error happens on submitting the job, reset UI state so the user can try again
+        isLoading = false;
+        currentId = undefined;
+        job = undefined;
         throw err;
     }
 }
@@ -54,14 +59,15 @@ export async function runFlowByPath(path, args) {
         requestBody: args
     }));
 }
-export async function runPreview(path, code, lang, args) {
+export async function runPreview(path, code, lang, args, tag) {
     return abstractRun(() => JobService.runScriptPreview({
         workspace: $workspaceStore,
         requestBody: {
             path,
             content: code,
             args,
-            language: lang
+            language: lang,
+            tag
         }
     }));
 }
@@ -103,30 +109,15 @@ async function loadTestJob(id) {
     let isCompleted = false;
     if (currentId === id) {
         try {
-            if (job && `running` in job) {
-                let previewJobUpdates = await JobService.getJobUpdates({
-                    workspace: workspace,
-                    id,
-                    running: job.running,
-                    logOffset: job.logs?.length ? job.logs?.length + 1 : 0
-                });
-                if (previewJobUpdates.new_logs) {
-                    job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
-                }
-                if (previewJobUpdates.mem_peak && job) {
-                    job.mem_peak = previewJobUpdates.mem_peak;
-                }
-                if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
-                    job = await JobService.getJob({ workspace: workspace, id });
-                }
-            }
-            else {
-                job = await JobService.getJob({ workspace: workspace, id });
-            }
-            if (job?.type === 'CompletedJob') {
-                //only CompletedJob has success property
+            let maybe_job = await JobService.getCompletedJobResultMaybe({
+                workspace: workspace ?? '',
+                id
+            });
+            if (maybe_job.completed) {
                 isCompleted = true;
                 if (currentId === id) {
+                    job = { ...maybe_job, id };
+                    await tick();
                     dispatch('done', job);
                     currentId = undefined;
                 }
@@ -138,6 +129,7 @@ async function loadTestJob(id) {
             if (errorIteration == 5) {
                 notfound = true;
                 await clearCurrentJob();
+                dispatch('doneError', err);
             }
             console.warn(err);
         }
@@ -166,19 +158,3 @@ onDestroy(async () => {
     currentId = undefined;
 });
 </script>
-
-<slot
-	{job}
-	{isLoading}
-	{workspaceOverride}
-	{notfound}
-	{abstractRun}
-	{runScriptByPath}
-	{runFlowByPath}
-	{runPreview}
-	{cancelJob}
-	{clearCurrentJob}
-	{watchJob}
-	{loadTestJob}
-	{syncer}
-/>

package/{dist/components/TestJobLoader.svelte.d.ts → package/components/ResultJobLoader.svelte.d.ts}

@@ -1,50 +1,39 @@
 import { SvelteComponentTyped } from "svelte";
-import { Job } from '../gen';
 declare const __propDef: {
     props: {
         isLoading?: boolean | undefined;
-        job?: Job | undefined;
+        job?: {
+            completed: boolean;
+            result: any;
+            id: string;
+        } | undefined;
         workspaceOverride?: string | undefined;
         notfound?: boolean | undefined;
         abstractRun?: ((fn: () => Promise<string>) => Promise<string>) | undefined;
         runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
         runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
-        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>) => Promise<string>) | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>, tag: string | undefined) => Promise<string>) | undefined;
         cancelJob?: (() => Promise<void>) | undefined;
         clearCurrentJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string) => Promise<void>) | undefined;
     };
     events: {
+        started: CustomEvent<any>;
         done: CustomEvent<any>;
+        doneError: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            job: Job | undefined;
-            isLoading: boolean;
-            workspaceOverride: string | undefined;
-            notfound: boolean;
-            abstractRun: (fn: () => Promise<string>) => Promise<string>;
-            runScriptByPath: (path: string | undefined, args: Record<string, any>) => Promise<string>;
-            runFlowByPath: (path: string | undefined, args: Record<string, any>) => Promise<string>;
-            runPreview: (path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>) => Promise<string>;
-            cancelJob: () => Promise<void>;
-            clearCurrentJob: () => Promise<void>;
-            watchJob: (testId: string) => Promise<void>;
-            loadTestJob: (id: string) => Promise<boolean>;
-            syncer: (id: string) => Promise<void>;
-        };
-    };
+    slots: {};
 };
-export type TestJobLoaderProps = typeof __propDef.props;
-export type TestJobLoaderEvents = typeof __propDef.events;
-export type TestJobLoaderSlots = typeof __propDef.slots;
-export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderProps, TestJobLoaderEvents, TestJobLoaderSlots> {
+export type ResultJobLoaderProps = typeof __propDef.props;
+export type ResultJobLoaderEvents = typeof __propDef.events;
+export type ResultJobLoaderSlots = typeof __propDef.slots;
+export default class ResultJobLoader extends SvelteComponentTyped<ResultJobLoaderProps, ResultJobLoaderEvents, ResultJobLoaderSlots> {
     get abstractRun(): (fn: () => Promise<string>) => Promise<string>;
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>, tag: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/RunChart.svelte

@@ -74,47 +74,44 @@ $: maxTime = getMaxTime(jobs);
 function getMaxTime(jobs) {
     return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15);
 }
+$: scatterOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        zoom: zoomOptions,
+        legend: {
+            display: false
+        },
+        tooltip: {
+            callbacks: {
+                label: function (context) {
+                    return getPath(context.raw);
+                }
+            }
+        }
+    },
+    scales: {
+        x: {
+            type: 'time',
+            grid: {
+                display: false
+            },
+            min: minTime,
+            max: maxTime
+        },
+        y: {
+            grid: {
+                display: false
+            },
+            title: {
+                display: true,
+                text: 'job duration (ms)'
+            },
+            type: 'logarithmic'
+        }
+    },
+    animation: false
+};
 </script>
 
-<Scatter
-	{data}
-	options={{
-		responsive: true,
-		maintainAspectRatio: false,
-		plugins: {
-			zoom: zoomOptions,
-			legend: {
-				display: false
-			},
-			tooltip: {
-				callbacks: {
-					label: function (context) {
-						return getPath(context.raw)
-					}
-				}
-			}
-		},
-
-		scales: {
-			x: {
-				grid: {
-					display: false
-				},
-				type: 'time',
-				min: minTime,
-				max: maxTime
-			},
-			y: {
-				grid: {
-					display: false
-				},
-				title: {
-					display: true,
-					text: 'job duration (ms)'
-				},
-				type: 'logarithmic'
-			}
-		},
-		animation: false
-	}}
-/>
+<Scatter {data} options={scatterOptions} />