Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Visual canvas dashboard #6294

Open
wants to merge 90 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
90 commits
Select commit Hold shift + click to select a range
002a5f9
Remove data resolvers from components
begelundmuller Oct 25, 2024
e873f1e
wip
briangregoryholmes Nov 5, 2024
2b80cff
merge main
briangregoryholmes Nov 5, 2024
0ffe720
wip
briangregoryholmes Nov 7, 2024
27b579f
Merge branch 'main' into bgh/visual-explore-editing
briangregoryholmes Nov 7, 2024
05e361e
create theme input
briangregoryholmes Nov 7, 2024
27729ea
add default case when key not set
briangregoryholmes Nov 7, 2024
add21fd
cleanup
briangregoryholmes Nov 7, 2024
36c1a44
merge main
briangregoryholmes Nov 7, 2024
0c2d217
Merge branch 'main' into bgh/visual-explore-editing
briangregoryholmes Nov 8, 2024
96c827f
cleanup and set defaults feature
briangregoryholmes Nov 8, 2024
a6ce459
test fix
briangregoryholmes Nov 9, 2024
595ffbb
Init canvas screen
djbarnwal Nov 14, 2024
4d25035
uxqa
briangregoryholmes Nov 15, 2024
2a972b2
Merge branch 'main' into bgh/visual-explore-editing
briangregoryholmes Nov 15, 2024
c62f476
uxqa
briangregoryholmes Nov 15, 2024
e17b46d
add tabs for chart options
djbarnwal Nov 18, 2024
8ac6ccb
Working chart
djbarnwal Nov 18, 2024
d610d84
uxqa, exclude mode
briangregoryholmes Nov 18, 2024
0ed000b
Merge branch 'main' into feat/canvas-2.0
djbarnwal Nov 19, 2024
065bc28
Merge branch 'bgh/visual-explore-editing' into feat/canvas-2.0
djbarnwal Nov 19, 2024
a25becc
Update UI to match visual editing
djbarnwal Nov 19, 2024
a289a2f
Remove unused file
djbarnwal Nov 19, 2024
76835a6
Larger icons
djbarnwal Nov 19, 2024
1b356b9
merge main
djbarnwal Nov 24, 2024
e8ca858
Merge branch 'main' into feat/canvas-2.0
djbarnwal Nov 25, 2024
33fa567
Share props
djbarnwal Nov 25, 2024
0512cab
Merge branch 'main' into begelundmuller/remove-component-resolvers
begelundmuller Dec 4, 2024
9ffddc4
Fix test
begelundmuller Dec 4, 2024
a2a4d7f
Add `max_width` and `theme`; remove `gap` and `column`; move `vega_li…
begelundmuller Dec 4, 2024
3434bc0
Add state and visual inspector
djbarnwal Dec 5, 2024
fe72b44
Merge main
djbarnwal Dec 5, 2024
2faedd8
Remove logs
djbarnwal Dec 5, 2024
f4d976b
Add component framework
djbarnwal Dec 10, 2024
97f1b5a
Merge main
djbarnwal Dec 10, 2024
d91c5d3
Fallback for MesaureBigNum for canvas
djbarnwal Dec 10, 2024
f6a3199
Merge branch 'main' into feat/canvas-2.0
djbarnwal Dec 12, 2024
5c548e8
Add input UI
djbarnwal Dec 14, 2024
44b9013
Merge main
djbarnwal Dec 14, 2024
b99aebe
Update schema
djbarnwal Dec 17, 2024
453a46d
Merge branch 'main' into feat/canvas-2.0
djbarnwal Dec 17, 2024
bec6332
Add bar positional inputs
djbarnwal Dec 17, 2024
ee35a13
Remove old import
djbarnwal Dec 18, 2024
4476e5a
Merge main
djbarnwal Dec 18, 2024
6a998c1
Merge branch 'main' into begelundmuller/remove-component-resolvers
begelundmuller Dec 18, 2024
26cc8e3
Remove non required fields from spec
djbarnwal Dec 18, 2024
871b1a8
Merge branch 'begelundmuller/remove-component-resolvers' into feat/ca…
djbarnwal Dec 18, 2024
f237dde
Remove old canvas deprecated properties
djbarnwal Dec 18, 2024
4458b80
Code hygiene
djbarnwal Dec 18, 2024
6e3337b
Remove eslint errors
djbarnwal Dec 19, 2024
fd4020f
Relax types for updating property
djbarnwal Dec 19, 2024
0bb083f
Remove stale code
djbarnwal Dec 19, 2024
70a22a3
Update preview
djbarnwal Dec 19, 2024
40d5875
Merge main
djbarnwal Dec 19, 2024
eb5bcb9
Update file artifact references
djbarnwal Dec 20, 2024
41c2d12
Remove unused prop
djbarnwal Dec 20, 2024
dfe6d62
remove ai chart gen from codebase
djbarnwal Dec 20, 2024
302ca97
Add support for adding component from menu
djbarnwal Dec 20, 2024
f563a09
Fix Go lint and test
begelundmuller Dec 20, 2024
b656cff
Use first metricsView as default
djbarnwal Dec 20, 2024
223d203
Merge remote-tracking branch 'origin/feat/canvas-2.0' into feat/canva…
djbarnwal Dec 20, 2024
ba704d0
Code hygiene
djbarnwal Dec 20, 2024
001b84c
use query for valid spec store
djbarnwal Dec 20, 2024
edd973d
Wait for container dimensions to be available before render
djbarnwal Dec 20, 2024
bab44b4
Fix fileartifact reference in component class
djbarnwal Dec 20, 2024
432bb26
Add theme root class
djbarnwal Dec 20, 2024
5ddd484
Sanitize bindings for inputs
djbarnwal Dec 21, 2024
48ff51e
Update styling for inputs
djbarnwal Dec 21, 2024
a41c459
Sidebar header UI changes
djbarnwal Dec 21, 2024
80477d2
Add small styles for theme input
djbarnwal Dec 21, 2024
98f7523
Add measure titles to charts
djbarnwal Dec 23, 2024
dcea247
Generalize query for chart data
djbarnwal Dec 23, 2024
08fb7ca
add color field input
djbarnwal Dec 23, 2024
456e3dc
Fix xoffset field
djbarnwal Dec 23, 2024
849d56c
Add multi select for measure and dimensions
djbarnwal Dec 23, 2024
0f2a700
Make multi selections removable
djbarnwal Dec 23, 2024
1644b84
Update chart type selector to accomodate new artifact changes
djbarnwal Dec 23, 2024
d4f3157
Merge main
djbarnwal Dec 24, 2024
476d0b5
Lint fix
djbarnwal Dec 24, 2024
242b3eb
Add time filter UI controls
djbarnwal Dec 26, 2024
927a3cf
Use class based store of stores
djbarnwal Dec 27, 2024
9540afe
Update selectors to use chips
djbarnwal Dec 27, 2024
c9c1afa
Lint fix
djbarnwal Dec 27, 2024
a9958ad
Move to new API
djbarnwal Dec 28, 2024
c256aa5
Merge branch 'main' into feat/canvas-2.0
djbarnwal Jan 2, 2025
608828d
Add grain selector
djbarnwal Jan 2, 2025
c0a4357
Separate out filter params in config
djbarnwal Jan 3, 2025
ff2fdea
Remove canvas entities as a store and use class
djbarnwal Jan 3, 2025
9242858
Cleanup
djbarnwal Jan 3, 2025
68673a2
Review
djbarnwal Jan 3, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
cleanup
briangregoryholmes committed Nov 7, 2024
commit add21fdf248210e8757b8893cc21b3981ebda378
69 changes: 37 additions & 32 deletions web-common/src/components/color-picker/ColorInput.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import * as Popover from "@rilldata/web-common/components/popover";
import ColorSlider from "./ColorSlider.svelte";
import InputLabel from "../forms/InputLabel.svelte";
export let stringColor: string | undefined;
export let label: string;
@@ -196,41 +197,45 @@
/>
</Popover.Trigger>

<Popover.Content class="w-[270px] space-y-2" align="start" sideOffset={10}>
<ColorSlider
mode="hue"
bind:value={hue}
{hue}
color={hsl}
onChange={() => {
stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
onChange(stringColor);
}}
/>
<ColorSlider
mode="saturation"
bind:value={saturation}
{hue}
color={hsl}
onChange={() => {
stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
onChange(stringColor);
}}
/>
<ColorSlider
mode="lightness"
bind:value={lightness}
{hue}
color={hsl}
onChange={() => {
stringColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
onChange(stringColor);
}}
/>
<Popover.Content class="w-[270px] space-y-2" align="start" sideOffset={10}>
<div class="space-y-1">
<InputLabel label="Hue" id="hue" />
<ColorSlider
mode="hue"
bind:value={hue}
{hue}
color={hsl}
onChange={() => {
stringColor = `hsl(${hue}, ${saturation}%, 50%)`;
onChange(stringColor);
}}
/>
</div>
<div class="space-y-1">
<InputLabel label="Saturation" id="saturation" />
<ColorSlider
mode="saturation"
bind:value={saturation}
{hue}
color={hsl}
onChange={() => {
stringColor = `hsl(${hue}, ${saturation}%, 50%)`;
onChange(stringColor);
}}
/>
</div>
</Popover.Content>
</Popover.Root>

<input bind:value={stringColor} {disabled} />
<input
bind:value={stringColor}
{disabled}
on:keydown={(e) => {
if (e.key === "Enter") {
e.currentTarget.blur();
}
}}
/>

<p>{label}</p>
</div>
5 changes: 4 additions & 1 deletion web-common/src/components/forms/Input.svelte
Original file line number Diff line number Diff line change
@@ -32,6 +32,8 @@
export let enableSearch = false;
export let fields: string[] | undefined = [];
export let disabled = false;
export let lockable = false;
export let capitalizeLabel = true;
export let disabledMessage = "No valid options";
export let options:
| { value: string; label: string; type?: string }[]
@@ -92,7 +94,7 @@

<div class="component-wrapper" class:w-full={full} style:width>
{#if label}
<InputLabel {label} {optional} {id} {hint}>
<InputLabel {label} {optional} {id} {hint} capitalize={capitalizeLabel}>
<slot name="mode-switch" slot="mode-switch" />
</InputLabel>
{/if}
@@ -173,6 +175,7 @@
ringFocus
{sameWidth}
{id}
{lockable}
bind:selectElement
bind:value
{options}
2 changes: 2 additions & 0 deletions web-common/src/components/forms/Select.svelte
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@
export let ringFocus = true;
export let truncate = false;
export let enableSearch = false;
export let lockable = false;
export let onChange: (value: string) => void = () => {};
let searchText = "";
@@ -76,6 +77,7 @@
>
<Select.Trigger
{id}
{lockable}
bind:el={selectElement}
class="flex px-3 gap-x-2 max-w-full {width &&
`w-[${width}px]`} {ringFocus &&
31 changes: 29 additions & 2 deletions web-common/src/components/select/select-trigger.svelte
Original file line number Diff line number Diff line change
@@ -2,25 +2,52 @@
import { Select as SelectPrimitive } from "bits-ui";
import CaretDownIcon from "../icons/CaretDownIcon.svelte";
import { cn } from "@rilldata/web-common/lib/shadcn";
import Link from "../icons/Link.svelte";
// import { Link2, Link2Off } from "lucide-svelte";
import LinkBreak from "svelte-radix/LinkBreak2.svelte";
// import Link2 from "svelte-radix/Link1.svelte";
type $$Props = SelectPrimitive.TriggerProps;
type $$Props = SelectPrimitive.TriggerProps & {
lockable?: boolean;
// See: https://www.bits-ui.com/docs/components/select#selecttrigger
// Converts div to button tag
class?: string;
};
// type $$Events = SelectPrimitive.TriggerEvents;
let className: $$Props["class"] = undefined;
export let el: HTMLButtonElement | undefined = undefined;
export let lockable = false;
export { className as class };
let locked = lockable;
</script>

<SelectPrimitive.Trigger
bind:el
disabled={locked}
class={cn(
"flex h-8 w-full items-center justify-between rounded-[2px] border border-gray-300 bg-transparent px-2 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:border-primary-400 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-8 w-full items-center relative justify-between rounded-[2px] border border-gray-300 bg-transparent px-2 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:border-primary-400 disabled:cursor-not-allowed disabled:bg-gray-50 [&>span]:line-clamp-1",
className,
)}
{...$$restProps}
>
<slot />
{#if locked}
<button
on:click={() => {
locked = false;
}}
class="group active:bg-gray-50 grid bg-background place-content-center h-full absolute right-0 w-[40px] border-l pointer-events-auto cursor-pointer"
>
<Link size="14px" className="fill-gray-600 group-hover:hidden" />
<LinkBreak
class="text-primary-600 hidden group-hover:block"
size="14px"
/>
</button>
{/if}
<div class="caret transition-transform">
<CaretDownIcon size="12px" className="fill-gray-600" />
</div>
27 changes: 20 additions & 7 deletions web-common/src/features/visual-editing/SelectionDropdown.svelte
Original file line number Diff line number Diff line change
@@ -11,16 +11,28 @@
let searchValue = "";
let open = false;
let selectedProxy = new Set(selectedItems);
let allProxy = new Set(allItems);
$: filteredItems = Array.from(allItems).filter((item) => {
$: filteredItems = Array.from(allProxy).filter((item) => {
return (
!selectedItems.has(item) &&
!selectedProxy.has(item) &&
item.toLowerCase().includes(searchValue.toLowerCase())
);
});
</script>

<DropdownMenu.Root bind:open typeahead={false} closeOnItemClick={false}>
<DropdownMenu.Root
bind:open
typeahead={false}
closeOnItemClick={false}
onOpenChange={() => {
if (!open) {
selectedProxy = new Set(selectedItems);
allProxy = new Set(allItems);
}
}}
>
<DropdownMenu.Trigger asChild let:builder>
<button
use:builder.action
@@ -39,9 +51,9 @@
</div>
<div class="max-h-64 overflow-y-auto">
{#if !searchValue}
{#each selectedItems as item (item)}
{#each selectedProxy as item (item)}
<DropdownMenu.CheckboxItem
checked
checked={selectedItems.has(item)}
class="mx-1 cursor-pointer"
on:click={() => {
onSelect(item);
@@ -57,14 +69,15 @@
{/if}

{#each filteredItems as item (item)}
<DropdownMenu.Item
<DropdownMenu.CheckboxItem
checked={selectedItems.has(item)}
class="pl-8 mx-1"
on:click={() => {
onSelect(item);
}}
>
{item}
</DropdownMenu.Item>
</DropdownMenu.CheckboxItem>
{:else}
{#if searchValue}
<div class="ui-copy-disabled text-center p-2 w-full">no results</div>
10 changes: 7 additions & 3 deletions web-common/src/features/visual-editing/ThemeInput.svelte
Original file line number Diff line number Diff line change
@@ -31,7 +31,11 @@
</script>

<div class="flex flex-col gap-y-1">
<InputLabel label="Theme" id="visual-explore-theme" />
<InputLabel
label="Theme"
id="visual-explore-theme"
hint="Colors may be adjusted for legibility"
/>
<Select
fontSize={14}
sameWidth
@@ -48,15 +52,15 @@
<ColorInput
stringColor={theme.primaryColorRaw}
label="Primary"
disabled={themeName !== "Custom"}
disabled={themeName !== "Custom" && themeName !== "Default"}
onChange={(color) => {
onColorChange(color, theme.secondaryColorRaw ?? "");
}}
/>
<ColorInput
stringColor={theme.secondaryColorRaw}
label="Secondary"
disabled={themeName !== "Custom"}
disabled={themeName !== "Custom" && themeName !== "Default"}
onChange={(color) => {
onColorChange(theme.primaryColorRaw ?? "", color);
}}
2 changes: 1 addition & 1 deletion web-common/src/features/visual-editing/TimeInput.svelte
Original file line number Diff line number Diff line change
@@ -70,7 +70,7 @@
class:open
class="flex px-3 gap-x-2 h-8 max-w-full items-center text-sm border-gray-300 border rounded-[2px] break-all overflow-hidden"
>
{selectedItems.size} of {DEFAULT_TIMEZONES.length}
{selectedItems.size} time zones
<CaretDownIcon
size="12px"
className="!fill-gray-600 ml-auto flex-none"
4 changes: 2 additions & 2 deletions web-common/src/features/visual-editing/TimeRangeInput.svelte
Original file line number Diff line number Diff line change
@@ -73,7 +73,7 @@
class:open
class="flex px-3 gap-x-2 h-8 max-w-full items-center text-sm border-gray-300 border rounded-[2px] break-all overflow-hidden"
>
{selectedItems.size} of {ranges.length}
{selectedItems.size} time ranges
<CaretDownIcon
size="12px"
className="!fill-gray-600 ml-auto flex-none"
@@ -91,7 +91,7 @@
checked
on:click={() => onSelectCustomItem(item)}
>
{DEFAULT_TIME_RANGES[item].label}
{DEFAULT_TIME_RANGES[item]?.label ?? item}
</DropdownMenu.CheckboxItem>
{/each}

16 changes: 13 additions & 3 deletions web-common/src/features/workspaces/ExploreWorkspace.svelte
Original file line number Diff line number Diff line change
@@ -38,13 +38,21 @@
$: resourceQuery = getResource(queryClient, instanceId);
$: ({ data } = $resourceQuery);
$: allErrorsQuery = getAllErrors(queryClient, instanceId);
$: allErrors = $allErrorsQuery;
$: resourceIsReconciling = resourceIsLoading($resourceQuery.data);
$: resourceIsReconciling = resourceIsLoading(data);
$: workspace = workspaces.get(filePath);
$: selectedView = workspace.view;
$: exploreResource = data?.explore;
$: metricsViewName = data?.meta?.refs?.find(
(ref) => ref.kind === ResourceKind.MetricsView,
)?.name;
async function onChangeCallback(newTitle: string) {
const newRoute = await handleEntityRename(
instanceId,
@@ -86,10 +94,12 @@
{fileArtifact}
{allErrors}
/>
{:else}
{:else if exploreResource && metricsViewName}
{#key fileArtifact}
<VisualExploreEditing
errors={[]}
{exploreResource}
{metricsViewName}
{exploreName}
{fileArtifact}
switchView={() => {
$selectedView = "code";
147 changes: 35 additions & 112 deletions web-common/src/features/workspaces/VisualExploreEditing.svelte
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
<script lang="ts">
import { createQueryServiceMetricsViewTimeRange } from "@rilldata/web-common/runtime-client";
import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
import { FileArtifact } from "../entity-management/file-artifact";
import {
ResourceKind,
useFilteredResources,
} from "../entity-management/resource-selectors";
import Input from "@rilldata/web-common/components/forms/Input.svelte";
import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
import { getNameFromFile } from "../entity-management/entity-mappers";
import { initLocalUserPreferenceStore } from "../dashboards/user-preferences";
import { YAMLSeq, Scalar, YAMLMap, parseDocument } from "yaml";
import StateManagersProvider from "../dashboards/state-managers/StateManagersProvider.svelte";
import DashboardStateProvider from "../dashboards/stores/DashboardStateProvider.svelte";
@@ -25,47 +19,19 @@
import TimeInput from "../visual-editing/TimeInput.svelte";
import { DEFAULT_TIMEZONES } from "@rilldata/web-common/lib/time/config";
import TimeRangeInput from "../visual-editing/TimeRangeInput.svelte";
import ThemeInput from "../visual-editing/ThemeInput.svelte";
import type { V1Explore } from "@rilldata/web-common/runtime-client";
const itemTypes = ["measures", "dimensions"] as const;
export let fileArtifact: FileArtifact;
export let errors: LineStatus[];
export let exploreName: string;
export let exploreResource: V1Explore;
export let metricsViewName: string;
export let switchView: () => void;
$: ({ instanceId } = $runtime);
$: ({
hasUnsavedChanges,
autoSave,
path: filePath,
resourceName,
fileName,
getResource,
localContent,
remoteContent,
saveContent,
} = fileArtifact);
$: workspace = workspaces.get(filePath);
$: exploreName = $resourceName?.name ?? getNameFromFile(filePath);
$: resourceQuery = getResource(queryClient, instanceId);
$: ({ data } = $resourceQuery);
$: exploreResource = data?.explore;
$: metricsViewName = data?.meta?.refs?.find(
(ref) => ref.kind === ResourceKind.MetricsView,
)?.name;
$: initLocalUserPreferenceStore(exploreName);
$: allErrorsQuery = fileArtifact.getAllErrors(queryClient, instanceId);
$: allErrors = $allErrorsQuery;
$: selectedView = workspace.view;
$: ({ localContent, remoteContent, saveContent } = fileArtifact);
$: exploreSpec = exploreResource?.state?.validSpec;
@@ -91,20 +57,6 @@
$: metricsViewSpec = metricsViewResource?.state?.validSpec;
// $: timeZones = new Set(exploreResource?.state?.validSpec?.timeZones ?? []);
$: defaultTimeRange =
exploreResource?.state?.validSpec?.defaultPreset?.timeRange;
$: timeRangeQuery = createQueryServiceMetricsViewTimeRange(
instanceId,
metricsViewName ?? "",
{},
{
query: { enabled: !!metricsViewSpec?.timeDimension },
},
);
$: rawTitle = parsedDocument.get("title");
$: rawMetricsView = parsedDocument.get("metrics_view");
$: rawDimensions = parsedDocument.get("dimensions");
@@ -114,11 +66,15 @@
$: rawTimeRanges = parsedDocument.get("time_ranges");
$: timeZones = new Set(
rawTimeZones instanceof YAMLSeq ? rawTimeZones.toJSON() : [],
rawTimeZones instanceof YAMLSeq
? rawTimeZones.toJSON().filter(isString)
: [],
);
$: timeRanges = new Set(
rawTimeRanges instanceof YAMLSeq ? rawTimeRanges.toJSON() : [],
rawTimeRanges instanceof YAMLSeq
? rawTimeRanges.toJSON().filter(isString)
: [],
);
$: title = stringGuard(rawTitle);
@@ -181,37 +137,13 @@
.map((theme) => theme.meta?.name?.name ?? "")
.filter((string) => !string.endsWith("--theme"));
$: theme = parseTheme(rawTheme);
async function parseTheme(theme: string | YAMLMap | undefined | unknown) {
// if (typeof theme === "string") {
// const themeResource = await runtimeServiceGetResource(instanceId, {
// "name.kind": ResourceKind.Theme,
// "name.name": theme,
// });
// const spec = themeResource.resource?.theme?.spec;
// return {
// name: theme,
// ...spec,
// };
// }
if (theme instanceof YAMLMap) {
return {
name: "Custom",
...theme.toJSON().colors,
custom: true,
};
}
return {
name: "Default",
primary: undefined,
secondary: undefined,
};
}
$: themeName = !rawTheme
? "Default"
: typeof rawTheme === "string"
? rawTheme
: rawTheme instanceof YAMLMap
? "Custom"
: undefined;
export function isString(value: unknown): value is string {
return typeof value === "string";
@@ -241,14 +173,6 @@
await saveContent(parsedDocument.toString());
}
$: themeName = !rawTheme
? "Default"
: typeof rawTheme === "string"
? rawTheme
: rawTheme instanceof YAMLMap
? "Custom"
: undefined;
</script>

<div class="flex gap-x-2 size-full">
@@ -286,7 +210,9 @@
/>

<Input
lockable
label="Metrics view referenced"
capitalizeLabel={false}
bind:value={metricsView}
sameWidth
options={metricsViewNames.map((name) => ({
@@ -404,26 +330,23 @@
});
}}
/>

<footer
slot="footer"
class="flex flex-col gap-y-2 mt-auto border-t px-5 py-3 w-full"
>
<!-- <button class="text-primary-600 font-medium w-fit">
Use left settings as defaults
</button> -->
<p>
For more options,
<button on:click={switchView} class="text-primary-600 font-medium">
edit in YAML
</button>
</p>
</footer>
</SidebarWrapper>
</div>

<style lang="postcss">
.wrapper {
@apply size-full max-w-full max-h-full flex-none;
@apply overflow-hidden;
@apply flex gap-x-2;
}
h1 {
@apply text-[16px] font-medium;
}
.main-area {
@apply flex flex-col gap-y-4 size-full p-4 bg-background border;
@apply flex-shrink overflow-hidden rounded-[2px] relative;
}
.section {
@apply flex flex-none flex-col gap-y-2 justify-start w-full h-fit max-w-full;
}
</style>