@reopt-ai/opt-ui 1.12.5 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +236 -0
- package/COMPONENT_CATALOG.md +670 -123
- package/README.md +9 -7
- package/dist/core/index.cjs +13 -13
- package/dist/core/index.d.cts +2 -2
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/01-core.md +260 -61
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +431 -63
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +4 -4
- package/dist/{field-sidebar-YaWHfLLW.d.ts → field-sidebar-CJ4HxP8D.d.cts} +824 -2
- package/dist/{field-sidebar-Ct8c9L4V.d.cts → field-sidebar-DnhpcT2A.d.ts} +824 -2
- package/dist/{field-sidebar-DwtrYSSt.cjs → field-sidebar-ePqFX6MN.cjs} +4339 -244
- package/dist/{field-sidebar-Ben7MQD4.js → field-sidebar-mSVCMAZp.js} +3976 -235
- package/dist/id-registry.cjs +80 -0
- package/dist/id-registry.js +80 -0
- package/dist/id-registry.json +170 -0
- package/dist/index.cjs +1096 -1476
- package/dist/index.d.cts +243 -92
- package/dist/index.d.ts +243 -92
- package/dist/index.js +1004 -1415
- package/dist/{key-pad-menu-BpQebDyw.cjs → key-pad-menu-BgtSL3xe.cjs} +60 -487
- package/dist/{key-pad-menu-CYYtS_Tl.js → key-pad-menu-CqFI6la9.js} +61 -422
- package/dist/{key-pad-menu-CwcY_Vps.d.cts → key-pad-menu-D6pYzaj-.d.cts} +14 -56
- package/dist/{key-pad-menu-WBJShCJn.d.ts → key-pad-menu-Yh7Fpb8m.d.ts} +14 -56
- package/dist/meta.cjs +1312 -12
- package/dist/meta.js +1312 -12
- package/dist/shells/index.cjs +20 -1
- package/dist/shells/index.d.cts +2 -2
- package/dist/shells/index.d.ts +2 -2
- package/dist/shells/index.js +2 -2
- package/dist/{text-truncate-CQyfUZvq.d.cts → text-truncate-Bbul-jMD.d.cts} +52 -30
- package/dist/{text-truncate-CQyfUZvq.d.ts → text-truncate-Bbul-jMD.d.ts} +52 -30
- package/dist/{text-truncate-Dlm7JwDf.js → text-truncate-Bd-0WkSP.js} +461 -97
- package/dist/{text-truncate-CqdiQuj8.cjs → text-truncate-BeYW6XZu.cjs} +523 -99
- package/dist/theme/server.cjs +2 -2
- package/dist/theme/server.d.cts +2 -2
- package/dist/theme/server.d.ts +2 -2
- package/dist/theme/server.js +2 -2
- package/package.json +6 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
import { B as
|
|
2
|
+
import { B as ProjectDef, D as EnvGroupDef, E as DomainDef, F as FormFieldDef, H as SelectOption, I as MenuDef, M as FaqItem, T as DeploymentStep, U as StatCard, W as TabDef, X as ToolbarButtonDef, _ as DateRangePreset, a as FieldDataType, j as FailureItem, m as DateRange, r as TruncationSide, w as CommandDef, y as BranchDef, z as NavItemDef } from "./text-truncate-Bbul-jMD.js";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { ReactNode, Ref } from "react";
|
|
5
5
|
import { TimeGranularity, TimeRange, TimeRange as TimeRange$1, TimeSeriesAnnotation, TimeSeriesChartProps, TimeSeriesDef, TimeSeriesPoint } from "@reopt-ai/opt-charts";
|
|
@@ -538,6 +538,828 @@ declare namespace WorkflowCanvas {
|
|
|
538
538
|
var displayName: string;
|
|
539
539
|
}
|
|
540
540
|
//#endregion
|
|
541
|
+
//#region src/shells/query-results-table.d.ts
|
|
542
|
+
/** A result column: its name and, when the backend told us, its type. */
|
|
543
|
+
interface QueryResultColumn {
|
|
544
|
+
name: string;
|
|
545
|
+
/** Native type as the backend spells it (`VARCHAR`, `DateTime64(3)`…). */
|
|
546
|
+
type?: string;
|
|
547
|
+
}
|
|
548
|
+
/** Sort state: which column, which way. */
|
|
549
|
+
interface QueryResultSort {
|
|
550
|
+
column: string;
|
|
551
|
+
direction: "asc" | "desc";
|
|
552
|
+
}
|
|
553
|
+
/** Localized labels for the query results table component. */
|
|
554
|
+
interface QueryResultsTableLabels {
|
|
555
|
+
emptyMessage?: string;
|
|
556
|
+
loadingMessage?: string;
|
|
557
|
+
rowsSuffix?: string;
|
|
558
|
+
rowNumber?: string;
|
|
559
|
+
sortAscending?: (column: string) => string;
|
|
560
|
+
sortDescending?: (column: string) => string;
|
|
561
|
+
clearSort?: (column: string) => string;
|
|
562
|
+
resizeColumn?: (column: string) => string;
|
|
563
|
+
openRow?: (index: number) => string;
|
|
564
|
+
rowDetailsTitle?: (index: number) => string;
|
|
565
|
+
nullValue?: string;
|
|
566
|
+
trueValue?: string;
|
|
567
|
+
falseValue?: string;
|
|
568
|
+
}
|
|
569
|
+
/** Props for the query results table component. */
|
|
570
|
+
interface QueryResultsTableProps {
|
|
571
|
+
/** Column names, or columns with their types for a typed header. */
|
|
572
|
+
columns: Array<string | QueryResultColumn>;
|
|
573
|
+
rows: Array<Record<string, unknown>>;
|
|
574
|
+
/** Scroll height in px. `"fill"` takes whatever the parent gives. */
|
|
575
|
+
maxHeight?: number | "fill";
|
|
576
|
+
emptyMessage?: string;
|
|
577
|
+
loading?: boolean;
|
|
578
|
+
error?: string;
|
|
579
|
+
/** Click a header to sort. On by default; the sort is local to the table. */
|
|
580
|
+
sortable?: boolean;
|
|
581
|
+
/** Controlled sort. Omit to let the table keep its own. */
|
|
582
|
+
sort?: QueryResultSort | null;
|
|
583
|
+
onSortChange?: (sort: QueryResultSort | null) => void;
|
|
584
|
+
/** Row height in px. Every row is this tall — it is what makes 10,000 rows scroll. */
|
|
585
|
+
rowHeight?: number;
|
|
586
|
+
/** Open a row in a detail panel. On by default. */
|
|
587
|
+
rowDetails?: boolean;
|
|
588
|
+
/** Extra content in the footer, after the row count — elapsed time, bytes read. */
|
|
589
|
+
footer?: ReactNode;
|
|
590
|
+
labels?: QueryResultsTableLabels;
|
|
591
|
+
className?: string;
|
|
592
|
+
}
|
|
593
|
+
/** Render a cell value the way a query tool should: nothing is silently blank. */
|
|
594
|
+
declare function formatQueryCell(value: unknown, labels: Pick<Required<QueryResultsTableLabels>, "nullValue" | "trueValue" | "falseValue">): {
|
|
595
|
+
text: string;
|
|
596
|
+
isNull: boolean;
|
|
597
|
+
};
|
|
598
|
+
/**
|
|
599
|
+
* QueryResultsTable — the answer, in the shape the database gave it.
|
|
600
|
+
*
|
|
601
|
+
* A result set is the one table the reader has not seen before, so the
|
|
602
|
+
* header carries the type of each column and the cells never lie by omission:
|
|
603
|
+
* `NULL` is written out, booleans are words, objects are their JSON. Sorting is
|
|
604
|
+
* local because the rows are already here — a second round trip for an ORDER
|
|
605
|
+
* BY the reader could have typed is a poor trade. Rows are windowed, so the
|
|
606
|
+
* 10,000-row cap a backend applies is a scroll, not a stall.
|
|
607
|
+
*
|
|
608
|
+
* @example
|
|
609
|
+
* ```tsx
|
|
610
|
+
* <QueryResultsTable
|
|
611
|
+
* columns={result.columns}
|
|
612
|
+
* rows={result.rows}
|
|
613
|
+
* maxHeight="fill"
|
|
614
|
+
* footer={<span>{result.elapsed} ms</span>}
|
|
615
|
+
* />
|
|
616
|
+
* ```
|
|
617
|
+
*/
|
|
618
|
+
declare function QueryResultsTable({ columns: rawColumns, rows, maxHeight, emptyMessage, loading, error, sortable, sort: controlledSort, onSortChange, rowHeight, rowDetails, footer, labels: customLabels, className }: QueryResultsTableProps): import("react").JSX.Element;
|
|
619
|
+
declare namespace QueryResultsTable {
|
|
620
|
+
var displayName: string;
|
|
621
|
+
}
|
|
622
|
+
//#endregion
|
|
623
|
+
//#region src/shells/schema-tree.d.ts
|
|
624
|
+
/** One column of a queryable table. */
|
|
625
|
+
interface SchemaTreeColumn {
|
|
626
|
+
name: string;
|
|
627
|
+
/** Native type as the backend spells it. Resolved to a glyph for display. */
|
|
628
|
+
type?: string;
|
|
629
|
+
/** One line about what the column holds, for a hover. */
|
|
630
|
+
description?: string;
|
|
631
|
+
}
|
|
632
|
+
/** One table (or view) the reader can query. */
|
|
633
|
+
interface SchemaTreeTable {
|
|
634
|
+
name: string;
|
|
635
|
+
columns: SchemaTreeColumn[];
|
|
636
|
+
/** A word after the name — "view", "rollup" — for tables that are not plain tables. */
|
|
637
|
+
kind?: string;
|
|
638
|
+
description?: string;
|
|
639
|
+
}
|
|
640
|
+
/** Localized strings for the schema tree. */
|
|
641
|
+
interface SchemaTreeLabels {
|
|
642
|
+
heading?: string;
|
|
643
|
+
searchPlaceholder?: string;
|
|
644
|
+
searchLabel?: string;
|
|
645
|
+
empty?: string;
|
|
646
|
+
loading?: string;
|
|
647
|
+
insert?: (name: string) => string;
|
|
648
|
+
preview?: (table: string) => string;
|
|
649
|
+
toggle?: (table: string) => string;
|
|
650
|
+
columnCount?: (count: number) => string;
|
|
651
|
+
}
|
|
652
|
+
/** Props for the schema tree component. */
|
|
653
|
+
interface SchemaTreeProps {
|
|
654
|
+
tables: SchemaTreeTable[];
|
|
655
|
+
loading?: boolean;
|
|
656
|
+
/** Tables open by default. Omit to open the first. */
|
|
657
|
+
defaultExpanded?: string[];
|
|
658
|
+
/** Put a table or column name into the editor at the cursor. */
|
|
659
|
+
onInsert?: (name: string, kind: "table" | "column", table: string) => void;
|
|
660
|
+
/** Run a `SELECT * … LIMIT n` on the table. The caller writes the SQL. */
|
|
661
|
+
onPreview?: (table: string) => void;
|
|
662
|
+
header?: ReactNode;
|
|
663
|
+
className?: string;
|
|
664
|
+
labels?: SchemaTreeLabels;
|
|
665
|
+
}
|
|
666
|
+
/**
|
|
667
|
+
* SchemaTree — what can be queried, and what it is called.
|
|
668
|
+
*
|
|
669
|
+
* A SQL editor without a schema beside it is an exam: the reader must already
|
|
670
|
+
* know that the column is `created_at` and not `timestamp`. The tree answers
|
|
671
|
+
* that at a glance, and its two actions are the two things people do with the
|
|
672
|
+
* answer — put the name in the query, or look at the rows to see what the
|
|
673
|
+
* name means.
|
|
674
|
+
*
|
|
675
|
+
* Search matches tables *and* columns, because "where is `utm_source`" is
|
|
676
|
+
* asked more often than "what is in `sessions`".
|
|
677
|
+
*
|
|
678
|
+
* @example
|
|
679
|
+
* ```tsx
|
|
680
|
+
* <SchemaTree
|
|
681
|
+
* tables={schema.tables}
|
|
682
|
+
* onInsert={(name) => editor.current?.insertText(name)}
|
|
683
|
+
* onPreview={(table) => run(`SELECT * FROM ${table} LIMIT 100`)}
|
|
684
|
+
* />
|
|
685
|
+
* ```
|
|
686
|
+
*/
|
|
687
|
+
declare function SchemaTree({ tables, loading, defaultExpanded, onInsert, onPreview, header, className, labels: customLabels }: SchemaTreeProps): import("react").JSX.Element;
|
|
688
|
+
declare namespace SchemaTree {
|
|
689
|
+
var displayName: string;
|
|
690
|
+
}
|
|
691
|
+
//#endregion
|
|
692
|
+
//#region src/shells/query-toolbar.d.ts
|
|
693
|
+
/**
|
|
694
|
+
* What the run button says about the query it would run.
|
|
695
|
+
*
|
|
696
|
+
* - `idle` — nothing to say.
|
|
697
|
+
* - `changed` — the text differs from what last ran; the button is the way to see the new answer.
|
|
698
|
+
* - `current` — the text is what last ran; running again only refreshes.
|
|
699
|
+
*/
|
|
700
|
+
type QueryRunState = "idle" | "changed" | "current";
|
|
701
|
+
/** Localized strings for the query toolbar. */
|
|
702
|
+
interface QueryToolbarLabels {
|
|
703
|
+
run?: string;
|
|
704
|
+
cancel?: string;
|
|
705
|
+
runStatement?: string;
|
|
706
|
+
runSelection?: string;
|
|
707
|
+
runAll?: string;
|
|
708
|
+
runMenu?: string;
|
|
709
|
+
save?: string;
|
|
710
|
+
changedHint?: string;
|
|
711
|
+
currentHint?: string;
|
|
712
|
+
runningHint?: string;
|
|
713
|
+
}
|
|
714
|
+
/** Props for the query toolbar. */
|
|
715
|
+
interface QueryToolbarProps {
|
|
716
|
+
onRun: () => void;
|
|
717
|
+
/** Present while running, the button turns into Cancel. */
|
|
718
|
+
onCancel?: () => void;
|
|
719
|
+
running?: boolean;
|
|
720
|
+
runState?: QueryRunState;
|
|
721
|
+
/** Why the run button is disabled, shown as its tooltip. */
|
|
722
|
+
runDisabledReason?: string;
|
|
723
|
+
/** Alternative runs offered under the split button. */
|
|
724
|
+
onRunSelection?: () => void;
|
|
725
|
+
/** True when there is a selection to run; the item is disabled otherwise. */
|
|
726
|
+
hasSelection?: boolean;
|
|
727
|
+
onRunAll?: () => void;
|
|
728
|
+
/** True when the editor holds more than one statement; Run All is hidden otherwise. */
|
|
729
|
+
multiStatement?: boolean;
|
|
730
|
+
onSave?: () => void;
|
|
731
|
+
saveDisabled?: boolean;
|
|
732
|
+
/** Controls after the run group — filters, variables, a connection picker. */
|
|
733
|
+
children?: ReactNode;
|
|
734
|
+
/** Controls at the far end — settings, share. */
|
|
735
|
+
trailing?: ReactNode;
|
|
736
|
+
/** The modifier-key glyph in the shortcut hint. `⌘` on macOS, `Ctrl` elsewhere. */
|
|
737
|
+
modifierKey?: string;
|
|
738
|
+
className?: string;
|
|
739
|
+
labels?: QueryToolbarLabels;
|
|
740
|
+
}
|
|
741
|
+
/**
|
|
742
|
+
* QueryToolbar — one button that always means "give me the answer".
|
|
743
|
+
*
|
|
744
|
+
* The run button carries state so the reader does not have to remember it:
|
|
745
|
+
* a changed query shows as the accent colour, an unchanged one as neutral, and
|
|
746
|
+
* a running one becomes Cancel. The alternatives (run selection, run the
|
|
747
|
+
* statement at the cursor, run all) sit behind a split so the primary action
|
|
748
|
+
* stays a single unambiguous target, which is what a keyboard shortcut is
|
|
749
|
+
* bound to.
|
|
750
|
+
*
|
|
751
|
+
* @example
|
|
752
|
+
* ```tsx
|
|
753
|
+
* <QueryToolbar
|
|
754
|
+
* onRun={runAtCursor}
|
|
755
|
+
* onCancel={cancel}
|
|
756
|
+
* running={isRunning}
|
|
757
|
+
* runState={sql === lastRun ? "current" : "changed"}
|
|
758
|
+
* onSave={openSaveDialog}
|
|
759
|
+
* >
|
|
760
|
+
* <QueryFiltersMenu … />
|
|
761
|
+
* </QueryToolbar>
|
|
762
|
+
* ```
|
|
763
|
+
*/
|
|
764
|
+
declare function QueryToolbar({ onRun, onCancel, running, runState, runDisabledReason, onRunSelection, hasSelection, onRunAll, multiStatement, onSave, saveDisabled, children, trailing, modifierKey, className, labels: customLabels }: QueryToolbarProps): import("react").JSX.Element;
|
|
765
|
+
declare namespace QueryToolbar {
|
|
766
|
+
var displayName: string;
|
|
767
|
+
}
|
|
768
|
+
//#endregion
|
|
769
|
+
//#region src/shells/query-output-pane.d.ts
|
|
770
|
+
/** Which output the reader is looking at. */
|
|
771
|
+
type QueryOutputView = "results" | "chart" | "split";
|
|
772
|
+
/** What the last run cost, for the status bar. */
|
|
773
|
+
interface QueryRunStats {
|
|
774
|
+
rowCount?: number;
|
|
775
|
+
/** Milliseconds. */
|
|
776
|
+
elapsed?: number;
|
|
777
|
+
bytesRead?: number;
|
|
778
|
+
rowsRead?: number;
|
|
779
|
+
/** True when the backend cut the result at its cap. */
|
|
780
|
+
truncated?: boolean;
|
|
781
|
+
}
|
|
782
|
+
/** Localized strings for the output pane. */
|
|
783
|
+
interface QueryOutputPaneLabels {
|
|
784
|
+
results?: string;
|
|
785
|
+
chart?: string;
|
|
786
|
+
split?: string;
|
|
787
|
+
viewLabel?: string;
|
|
788
|
+
emptyTitle?: string;
|
|
789
|
+
emptyDescription?: string;
|
|
790
|
+
emptyHint?: ReactNode;
|
|
791
|
+
loadingTitle?: string;
|
|
792
|
+
loadingDescription?: (seconds: number) => string;
|
|
793
|
+
errorTitle?: string;
|
|
794
|
+
cancelled?: string;
|
|
795
|
+
cancel?: string;
|
|
796
|
+
rows?: (count: number) => string;
|
|
797
|
+
elapsed?: (ms: number) => string;
|
|
798
|
+
bytesRead?: (bytes: number) => string;
|
|
799
|
+
rowsRead?: (count: number) => string;
|
|
800
|
+
truncated?: string;
|
|
801
|
+
dismissError?: string;
|
|
802
|
+
}
|
|
803
|
+
/** Props for the output pane. */
|
|
804
|
+
interface QueryOutputPaneProps {
|
|
805
|
+
view: QueryOutputView;
|
|
806
|
+
onViewChange: (view: QueryOutputView) => void;
|
|
807
|
+
/** The results table. */
|
|
808
|
+
results: ReactNode;
|
|
809
|
+
/** The chart builder. Omit to hide the chart view entirely. */
|
|
810
|
+
chart?: ReactNode;
|
|
811
|
+
/** Run lifecycle. `idle` is before the first run. */
|
|
812
|
+
status: "idle" | "running" | "success" | "error" | "cancelled";
|
|
813
|
+
/** Backend error text for `status="error"`. */
|
|
814
|
+
error?: string;
|
|
815
|
+
/** Seconds the current run has been going, for the loading state. */
|
|
816
|
+
runningSeconds?: number;
|
|
817
|
+
onCancel?: () => void;
|
|
818
|
+
stats?: QueryRunStats;
|
|
819
|
+
/** Controls at the right of the view switch — export, chart settings. */
|
|
820
|
+
actions?: ReactNode;
|
|
821
|
+
/** Extra status-bar content. */
|
|
822
|
+
statusExtra?: ReactNode;
|
|
823
|
+
/** A notice above the output — a warning about a placeholder, a sample note. */
|
|
824
|
+
banner?: ReactNode;
|
|
825
|
+
/** Retry from the error state. */
|
|
826
|
+
onRetry?: () => void;
|
|
827
|
+
className?: string;
|
|
828
|
+
labels?: QueryOutputPaneLabels;
|
|
829
|
+
}
|
|
830
|
+
/**
|
|
831
|
+
* QueryOutputPane — where the answer lands, and what it cost.
|
|
832
|
+
*
|
|
833
|
+
* The pane owns the run lifecycle's *presentation*: nothing yet, running (with
|
|
834
|
+
* a clock and a way out), failed (with the backend's words, not a paraphrase),
|
|
835
|
+
* and done. Done is a table, a chart, or both side by side — the split is a
|
|
836
|
+
* real resizable pair, because comparing a number to its bar is the point of
|
|
837
|
+
* showing both. The status bar keeps the cost visible: rows, time, bytes
|
|
838
|
+
* scanned, and whether the backend truncated the result, so a reader never
|
|
839
|
+
* mistakes a capped answer for a complete one.
|
|
840
|
+
*
|
|
841
|
+
* @example
|
|
842
|
+
* ```tsx
|
|
843
|
+
* <QueryOutputPane
|
|
844
|
+
* view={view} onViewChange={setView}
|
|
845
|
+
* status={status} error={error} stats={stats}
|
|
846
|
+
* results={<QueryResultsTable … maxHeight="fill" />}
|
|
847
|
+
* chart={<QueryResultChart … />}
|
|
848
|
+
* />
|
|
849
|
+
* ```
|
|
850
|
+
*/
|
|
851
|
+
declare function QueryOutputPane({ view, onViewChange, results, chart, status, error, runningSeconds, onCancel, stats, actions, statusExtra, banner, onRetry, className, labels: customLabels }: QueryOutputPaneProps): import("react").JSX.Element;
|
|
852
|
+
declare namespace QueryOutputPane {
|
|
853
|
+
var displayName: string;
|
|
854
|
+
}
|
|
855
|
+
//#endregion
|
|
856
|
+
//#region src/shells/query-result-chart.d.ts
|
|
857
|
+
/** How the result is drawn. */
|
|
858
|
+
type QueryChartType = "line" | "bar" | "area" | "pie" | "number";
|
|
859
|
+
/** The reader's choices — held by the caller so a saved query can keep them. */
|
|
860
|
+
interface QueryChartConfig {
|
|
861
|
+
type: QueryChartType;
|
|
862
|
+
/** The category / time column. Unused for `number`. */
|
|
863
|
+
xColumn?: string;
|
|
864
|
+
/** The value columns. `pie` and `number` use the first. */
|
|
865
|
+
yColumns: string[];
|
|
866
|
+
stacked?: boolean;
|
|
867
|
+
}
|
|
868
|
+
/** Localized strings for the chart builder. */
|
|
869
|
+
interface QueryResultChartLabels {
|
|
870
|
+
typeLabel?: string;
|
|
871
|
+
line?: string;
|
|
872
|
+
bar?: string;
|
|
873
|
+
area?: string;
|
|
874
|
+
pie?: string;
|
|
875
|
+
number?: string;
|
|
876
|
+
xAxis?: string;
|
|
877
|
+
yAxis?: string;
|
|
878
|
+
stacked?: string;
|
|
879
|
+
noNumeric?: string;
|
|
880
|
+
noNumericDescription?: string;
|
|
881
|
+
pickSeries?: string;
|
|
882
|
+
pickSeriesDescription?: string;
|
|
883
|
+
chartLabel?: string;
|
|
884
|
+
}
|
|
885
|
+
/** Props for the chart builder. */
|
|
886
|
+
interface QueryResultChartProps {
|
|
887
|
+
columns: QueryResultColumn[];
|
|
888
|
+
rows: Array<Record<string, unknown>>;
|
|
889
|
+
config: QueryChartConfig;
|
|
890
|
+
onConfigChange: (config: QueryChartConfig) => void;
|
|
891
|
+
/** Hide the controls, for an embedded read-only card. */
|
|
892
|
+
showControls?: boolean;
|
|
893
|
+
/** Chart height in px. Defaults to filling the parent. */
|
|
894
|
+
height?: number;
|
|
895
|
+
/** Rows beyond this are dropped from the chart, not the table. */
|
|
896
|
+
maxPoints?: number;
|
|
897
|
+
className?: string;
|
|
898
|
+
labels?: QueryResultChartLabels;
|
|
899
|
+
}
|
|
900
|
+
/**
|
|
901
|
+
* Which columns can be values. The declared type decides when the backend
|
|
902
|
+
* gave one; a sample of the rows decides otherwise, so a `count()` that came
|
|
903
|
+
* back as a string still charts.
|
|
904
|
+
*/
|
|
905
|
+
declare function numericResultColumns(columns: QueryResultColumn[], rows: Array<Record<string, unknown>>): QueryResultColumn[];
|
|
906
|
+
/** A starting configuration for a fresh result: first non-numeric column as x, the numerics as y. */
|
|
907
|
+
declare function defaultQueryChartConfig(columns: QueryResultColumn[], rows: Array<Record<string, unknown>>): QueryChartConfig;
|
|
908
|
+
/**
|
|
909
|
+
* QueryResultChart — the same rows, as a picture.
|
|
910
|
+
*
|
|
911
|
+
* A result set is not a chart until someone says which column is the axis and
|
|
912
|
+
* which are the values. This makes that a two-control decision with sensible
|
|
913
|
+
* defaults: the first text or date column is the axis, the numeric columns are
|
|
914
|
+
* the values, and a single-row single-number answer is just the number, large.
|
|
915
|
+
* The configuration is the caller's, so it can be saved alongside the SQL.
|
|
916
|
+
*
|
|
917
|
+
* @example
|
|
918
|
+
* ```tsx
|
|
919
|
+
* const [config, setConfig] = useState(() => defaultQueryChartConfig(columns, rows));
|
|
920
|
+
* <QueryResultChart columns={columns} rows={rows} config={config} onConfigChange={setConfig} />
|
|
921
|
+
* ```
|
|
922
|
+
*/
|
|
923
|
+
declare function QueryResultChart({ columns, rows, config, onConfigChange, showControls, height, maxPoints, className, labels: customLabels }: QueryResultChartProps): import("react").JSX.Element;
|
|
924
|
+
declare namespace QueryResultChart {
|
|
925
|
+
var displayName: string;
|
|
926
|
+
}
|
|
927
|
+
//#endregion
|
|
928
|
+
//#region src/shells/query-filters-menu.d.ts
|
|
929
|
+
/** How a property is compared. The set OpenPanel and PostHog both converge on. */
|
|
930
|
+
type QueryFilterOperator = "is" | "isNot" | "contains" | "notContains" | "startsWith" | "endsWith" | "regex" | "gt" | "gte" | "lt" | "lte" | "isNull" | "isNotNull";
|
|
931
|
+
/** One property condition. */
|
|
932
|
+
interface QueryPropertyFilter {
|
|
933
|
+
id: string;
|
|
934
|
+
field: string;
|
|
935
|
+
operator: QueryFilterOperator;
|
|
936
|
+
value: string;
|
|
937
|
+
}
|
|
938
|
+
/** The filters a query can carry, applied where the SQL puts `{filters}`. */
|
|
939
|
+
interface QueryFilters {
|
|
940
|
+
dateRange: DateRange | null;
|
|
941
|
+
properties: QueryPropertyFilter[];
|
|
942
|
+
}
|
|
943
|
+
/** A column the filters can name. */
|
|
944
|
+
interface QueryFilterField {
|
|
945
|
+
name: string;
|
|
946
|
+
type?: string;
|
|
947
|
+
}
|
|
948
|
+
/** Localized strings for the filters menu. */
|
|
949
|
+
interface QueryFiltersMenuLabels {
|
|
950
|
+
trigger?: string;
|
|
951
|
+
title?: string;
|
|
952
|
+
dateRange?: string;
|
|
953
|
+
dateRangePlaceholder?: string;
|
|
954
|
+
properties?: string;
|
|
955
|
+
addProperty?: string;
|
|
956
|
+
removeProperty?: (field: string) => string;
|
|
957
|
+
field?: string;
|
|
958
|
+
operator?: string;
|
|
959
|
+
value?: string;
|
|
960
|
+
reset?: string;
|
|
961
|
+
insertPlaceholder?: string;
|
|
962
|
+
missingPlaceholderTitle?: string;
|
|
963
|
+
missingPlaceholder?: string;
|
|
964
|
+
placeholderHint?: string;
|
|
965
|
+
valuesLoading?: string;
|
|
966
|
+
noValues?: string;
|
|
967
|
+
operators?: Partial<Record<QueryFilterOperator, string>>;
|
|
968
|
+
activeCount?: (count: number) => string;
|
|
969
|
+
}
|
|
970
|
+
/** Operators without a value. */
|
|
971
|
+
declare const VALUELESS_OPERATORS: ReadonlySet<QueryFilterOperator>;
|
|
972
|
+
/** Props for the filters menu. */
|
|
973
|
+
interface QueryFiltersMenuProps {
|
|
974
|
+
value: QueryFilters;
|
|
975
|
+
onChange: (filters: QueryFilters) => void;
|
|
976
|
+
/** Columns offered in the field picker. */
|
|
977
|
+
fields: QueryFilterField[];
|
|
978
|
+
/** Whether the SQL contains `{filters}`. Drives the warning and the insert button. */
|
|
979
|
+
placeholderPresent?: boolean;
|
|
980
|
+
onInsertPlaceholder?: () => void;
|
|
981
|
+
/**
|
|
982
|
+
* Known values for a field, offered as suggestions in the value box. Called
|
|
983
|
+
* once per field while the menu is open; typing still accepts anything.
|
|
984
|
+
*/
|
|
985
|
+
onLoadValues?: (field: string) => Promise<string[]>;
|
|
986
|
+
presets?: DateRangePreset[];
|
|
987
|
+
disabled?: boolean;
|
|
988
|
+
className?: string;
|
|
989
|
+
labels?: QueryFiltersMenuLabels;
|
|
990
|
+
}
|
|
991
|
+
/** True when any filter would change the query. */
|
|
992
|
+
declare function hasActiveQueryFilters(filters: QueryFilters): boolean;
|
|
993
|
+
/** How many filters are set, for the badge. */
|
|
994
|
+
declare function countActiveQueryFilters(filters: QueryFilters): number;
|
|
995
|
+
/** An empty filter set. */
|
|
996
|
+
declare const EMPTY_QUERY_FILTERS: QueryFilters;
|
|
997
|
+
/**
|
|
998
|
+
* QueryFiltersMenu — conditions the reader would rather not type.
|
|
999
|
+
*
|
|
1000
|
+
* A time range and a few equality filters are the WHERE clause most queries
|
|
1001
|
+
* share, and retyping them for every query is how a dashboard's filters end
|
|
1002
|
+
* up disagreeing with its queries. This holds them as data and hands them to
|
|
1003
|
+
* the SQL through a `{filters}` placeholder, the way PostHog does — the query
|
|
1004
|
+
* says *where* they apply, the menu says *what* they are. When the placeholder
|
|
1005
|
+
* is missing the menu says so, loudly, because silently unapplied filters are
|
|
1006
|
+
* the worst kind.
|
|
1007
|
+
*
|
|
1008
|
+
* @example
|
|
1009
|
+
* ```tsx
|
|
1010
|
+
* <QueryFiltersMenu
|
|
1011
|
+
* value={filters} onChange={setFilters}
|
|
1012
|
+
* fields={schema.columns}
|
|
1013
|
+
* placeholderPresent={sqlUsesPlaceholder(sql, "filters")}
|
|
1014
|
+
* onInsertPlaceholder={() => editor.current?.insertText("{filters}")}
|
|
1015
|
+
* />
|
|
1016
|
+
* ```
|
|
1017
|
+
*/
|
|
1018
|
+
declare function QueryFiltersMenu({ value, onChange, fields, placeholderPresent, onInsertPlaceholder, onLoadValues, presets, disabled, className, labels: customLabels }: QueryFiltersMenuProps): import("react").JSX.Element;
|
|
1019
|
+
declare namespace QueryFiltersMenu {
|
|
1020
|
+
var displayName: string;
|
|
1021
|
+
}
|
|
1022
|
+
//#endregion
|
|
1023
|
+
//#region src/shells/query-variables-menu.d.ts
|
|
1024
|
+
/** A named value the query reads as `{variables.name}`. */
|
|
1025
|
+
interface QueryVariable {
|
|
1026
|
+
id: string;
|
|
1027
|
+
name: string;
|
|
1028
|
+
value: string;
|
|
1029
|
+
}
|
|
1030
|
+
/** Localized strings for the variables menu. */
|
|
1031
|
+
interface QueryVariablesMenuLabels {
|
|
1032
|
+
trigger?: string;
|
|
1033
|
+
title?: string;
|
|
1034
|
+
hint?: string;
|
|
1035
|
+
name?: string;
|
|
1036
|
+
value?: string;
|
|
1037
|
+
add?: string;
|
|
1038
|
+
remove?: (name: string) => string;
|
|
1039
|
+
insert?: (name: string) => string;
|
|
1040
|
+
empty?: string;
|
|
1041
|
+
invalidName?: string;
|
|
1042
|
+
activeCount?: (count: number) => string;
|
|
1043
|
+
}
|
|
1044
|
+
/** Props for the variables menu. */
|
|
1045
|
+
interface QueryVariablesMenuProps {
|
|
1046
|
+
value: QueryVariable[];
|
|
1047
|
+
onChange: (variables: QueryVariable[]) => void;
|
|
1048
|
+
/** Put `{variables.name}` into the editor at the cursor. */
|
|
1049
|
+
onInsert?: (name: string) => void;
|
|
1050
|
+
disabled?: boolean;
|
|
1051
|
+
/** Why the menu is disabled, shown as the trigger's tooltip. */
|
|
1052
|
+
disabledReason?: string;
|
|
1053
|
+
className?: string;
|
|
1054
|
+
labels?: QueryVariablesMenuLabels;
|
|
1055
|
+
}
|
|
1056
|
+
/** True when the name can be referenced from SQL. */
|
|
1057
|
+
declare function isValidQueryVariableName(name: string): boolean;
|
|
1058
|
+
/**
|
|
1059
|
+
* QueryVariablesMenu — the parts of a query that change between runs.
|
|
1060
|
+
*
|
|
1061
|
+
* A saved query with a literal `'2026-09-01'` in it is a query that lies a
|
|
1062
|
+
* week later. Variables move that value out of the text and into a small
|
|
1063
|
+
* form, so the same SQL answers the same question for a different week — or
|
|
1064
|
+
* a different plan, or a different country — without an edit. The menu owns
|
|
1065
|
+
* only the names and values; substitution is the caller's, because how a
|
|
1066
|
+
* value is quoted is the dialect's business.
|
|
1067
|
+
*
|
|
1068
|
+
* @example
|
|
1069
|
+
* ```tsx
|
|
1070
|
+
* <QueryVariablesMenu
|
|
1071
|
+
* value={variables} onChange={setVariables}
|
|
1072
|
+
* onInsert={(name) => editor.current?.insertText(`{variables.${name}}`)}
|
|
1073
|
+
* />
|
|
1074
|
+
* ```
|
|
1075
|
+
*/
|
|
1076
|
+
declare function QueryVariablesMenu({ value, onChange, onInsert, disabled, disabledReason, className, labels: customLabels }: QueryVariablesMenuProps): import("react").JSX.Element;
|
|
1077
|
+
declare namespace QueryVariablesMenu {
|
|
1078
|
+
var displayName: string;
|
|
1079
|
+
}
|
|
1080
|
+
//#endregion
|
|
1081
|
+
//#region src/shells/query-history-list.d.ts
|
|
1082
|
+
/** One past run. */
|
|
1083
|
+
interface QueryHistoryItem {
|
|
1084
|
+
id: string;
|
|
1085
|
+
query: string;
|
|
1086
|
+
/** ISO timestamp. */
|
|
1087
|
+
ranAt: string;
|
|
1088
|
+
status: "success" | "error";
|
|
1089
|
+
rowCount?: number;
|
|
1090
|
+
/** Milliseconds. */
|
|
1091
|
+
elapsed?: number;
|
|
1092
|
+
error?: string;
|
|
1093
|
+
}
|
|
1094
|
+
/** Localized strings for the history list. */
|
|
1095
|
+
interface QueryHistoryListLabels {
|
|
1096
|
+
heading?: string;
|
|
1097
|
+
empty?: string;
|
|
1098
|
+
loading?: string;
|
|
1099
|
+
clear?: string;
|
|
1100
|
+
rerun?: (query: string) => string;
|
|
1101
|
+
load?: (query: string) => string;
|
|
1102
|
+
rows?: (count: number) => string;
|
|
1103
|
+
elapsed?: (ms: number) => string;
|
|
1104
|
+
failed?: string;
|
|
1105
|
+
succeeded?: string;
|
|
1106
|
+
ranAt?: (iso: string) => string;
|
|
1107
|
+
}
|
|
1108
|
+
/** Props for the history list. */
|
|
1109
|
+
interface QueryHistoryListProps {
|
|
1110
|
+
items: QueryHistoryItem[];
|
|
1111
|
+
loading?: boolean;
|
|
1112
|
+
/** Put the query back in the editor. */
|
|
1113
|
+
onLoad?: (item: QueryHistoryItem) => void;
|
|
1114
|
+
/** Run it again as it was. */
|
|
1115
|
+
onRerun?: (item: QueryHistoryItem) => void;
|
|
1116
|
+
onClear?: () => void;
|
|
1117
|
+
header?: ReactNode;
|
|
1118
|
+
className?: string;
|
|
1119
|
+
labels?: QueryHistoryListLabels;
|
|
1120
|
+
}
|
|
1121
|
+
/**
|
|
1122
|
+
* QueryHistoryList — what was asked, and whether it answered.
|
|
1123
|
+
*
|
|
1124
|
+
* Half of query writing is recovering the query from twenty minutes ago that
|
|
1125
|
+
* almost worked. The list keeps each run with its outcome, so a failed
|
|
1126
|
+
* attempt is as easy to get back as a good one, and the cost of a run is
|
|
1127
|
+
* visible before it is repeated.
|
|
1128
|
+
*
|
|
1129
|
+
* @example
|
|
1130
|
+
* ```tsx
|
|
1131
|
+
* <QueryHistoryList items={history} onLoad={(item) => setSql(item.query)} onRerun={(item) => run(item.query)} />
|
|
1132
|
+
* ```
|
|
1133
|
+
*/
|
|
1134
|
+
declare function QueryHistoryList({ items, loading, onLoad, onRerun, onClear, header, className, labels: customLabels }: QueryHistoryListProps): import("react").JSX.Element;
|
|
1135
|
+
declare namespace QueryHistoryList {
|
|
1136
|
+
var displayName: string;
|
|
1137
|
+
}
|
|
1138
|
+
//#endregion
|
|
1139
|
+
//#region src/shells/save-query-dialog.d.ts
|
|
1140
|
+
/** What the dialog collects. */
|
|
1141
|
+
interface SaveQueryValues {
|
|
1142
|
+
name: string;
|
|
1143
|
+
description: string;
|
|
1144
|
+
isPublic: boolean;
|
|
1145
|
+
/** The SQL chosen from the candidates. */
|
|
1146
|
+
sql: string;
|
|
1147
|
+
}
|
|
1148
|
+
/** Localized strings for the save dialog. */
|
|
1149
|
+
interface SaveQueryDialogLabels {
|
|
1150
|
+
createTitle?: string;
|
|
1151
|
+
updateTitle?: string;
|
|
1152
|
+
description?: string;
|
|
1153
|
+
name?: string;
|
|
1154
|
+
namePlaceholder?: string;
|
|
1155
|
+
descriptionField?: string;
|
|
1156
|
+
descriptionPlaceholder?: string;
|
|
1157
|
+
isPublic?: string;
|
|
1158
|
+
isPublicHint?: string;
|
|
1159
|
+
save?: string;
|
|
1160
|
+
cancel?: string;
|
|
1161
|
+
nameRequired?: string;
|
|
1162
|
+
candidate?: (index: number, total: number) => string;
|
|
1163
|
+
selection?: string;
|
|
1164
|
+
previous?: string;
|
|
1165
|
+
next?: string;
|
|
1166
|
+
}
|
|
1167
|
+
/** Props for the save dialog. */
|
|
1168
|
+
interface SaveQueryDialogProps {
|
|
1169
|
+
open: boolean;
|
|
1170
|
+
onOpenChange: (open: boolean) => void;
|
|
1171
|
+
onSubmit: (values: SaveQueryValues) => void | Promise<void>;
|
|
1172
|
+
/** The SQL to save. Several when the editor holds several statements. */
|
|
1173
|
+
candidates: string[];
|
|
1174
|
+
/** Which candidate to start on. */
|
|
1175
|
+
initialCandidate?: number;
|
|
1176
|
+
/** True when the single candidate is the editor selection rather than a statement. */
|
|
1177
|
+
candidateIsSelection?: boolean;
|
|
1178
|
+
/** Present when editing an existing saved query. */
|
|
1179
|
+
initialValues?: Partial<Omit<SaveQueryValues, "sql">>;
|
|
1180
|
+
mode?: "create" | "update";
|
|
1181
|
+
saving?: boolean;
|
|
1182
|
+
error?: string;
|
|
1183
|
+
labels?: SaveQueryDialogLabels;
|
|
1184
|
+
}
|
|
1185
|
+
/**
|
|
1186
|
+
* SaveQueryDialog — give the query a name it can be found by.
|
|
1187
|
+
*
|
|
1188
|
+
* Saving is the moment a query stops being scratch work, so the dialog asks
|
|
1189
|
+
* for the things a colleague will need: a name, a line about what it answers,
|
|
1190
|
+
* and whether they may see it. When the editor holds several statements the
|
|
1191
|
+
* dialog pages through them rather than guessing, because the one at the
|
|
1192
|
+
* cursor is usually — not always — the one meant.
|
|
1193
|
+
*
|
|
1194
|
+
* @example
|
|
1195
|
+
* ```tsx
|
|
1196
|
+
* <SaveQueryDialog
|
|
1197
|
+
* open={saving} onOpenChange={setSaving}
|
|
1198
|
+
* candidates={statements.map((s) => s.text)}
|
|
1199
|
+
* initialCandidate={currentIndex}
|
|
1200
|
+
* onSubmit={(values) => saveMutation.mutate(values)}
|
|
1201
|
+
* />
|
|
1202
|
+
* ```
|
|
1203
|
+
*/
|
|
1204
|
+
declare function SaveQueryDialog({ open, onOpenChange, onSubmit, candidates, initialCandidate, candidateIsSelection, initialValues, mode, saving, error, labels: customLabels }: SaveQueryDialogProps): import("react").JSX.Element;
|
|
1205
|
+
declare namespace SaveQueryDialog {
|
|
1206
|
+
var displayName: string;
|
|
1207
|
+
}
|
|
1208
|
+
//#endregion
|
|
1209
|
+
//#region src/shells/query-workspace.d.ts
|
|
1210
|
+
/** Localized strings for the workspace layout. */
|
|
1211
|
+
interface QueryWorkspaceLabels {
|
|
1212
|
+
sidebar?: string;
|
|
1213
|
+
openSidebar?: string;
|
|
1214
|
+
closeSidebar?: string;
|
|
1215
|
+
editor?: string;
|
|
1216
|
+
output?: string;
|
|
1217
|
+
}
|
|
1218
|
+
/** Props for the workspace layout. */
|
|
1219
|
+
interface QueryWorkspaceProps {
|
|
1220
|
+
/** Schema tree, saved queries, history — whatever helps write the query. */
|
|
1221
|
+
sidebar?: ReactNode;
|
|
1222
|
+
sidebarOpen?: boolean;
|
|
1223
|
+
onSidebarOpenChange?: (open: boolean) => void;
|
|
1224
|
+
/** Tabs, or a page header, above the toolbar. */
|
|
1225
|
+
header?: ReactNode;
|
|
1226
|
+
toolbar?: ReactNode;
|
|
1227
|
+
editor: ReactNode;
|
|
1228
|
+
output: ReactNode;
|
|
1229
|
+
/** Stable id under which panel sizes are remembered in `localStorage`. */
|
|
1230
|
+
storageKey?: string;
|
|
1231
|
+
/** Sidebar width as a percentage of the workspace. */
|
|
1232
|
+
defaultSidebarSize?: number;
|
|
1233
|
+
/** Editor height as a percentage of the column. */
|
|
1234
|
+
defaultEditorSize?: number;
|
|
1235
|
+
className?: string;
|
|
1236
|
+
labels?: QueryWorkspaceLabels;
|
|
1237
|
+
}
|
|
1238
|
+
/**
|
|
1239
|
+
* QueryWorkspace — three panes, one job.
|
|
1240
|
+
*
|
|
1241
|
+
* The shape every SQL tool converges on: what can be queried on the left,
|
|
1242
|
+
* the query on top, the answer below. The panes resize and the sidebar
|
|
1243
|
+
* collapses, and both are remembered per `storageKey`, because the layout a
|
|
1244
|
+
* reader settles into is part of their tool. The workspace is only a frame —
|
|
1245
|
+
* the toolbar, editor and output are slots, so the same frame serves a full
|
|
1246
|
+
* page and an embedded card.
|
|
1247
|
+
*
|
|
1248
|
+
* @example
|
|
1249
|
+
* ```tsx
|
|
1250
|
+
* <QueryWorkspace
|
|
1251
|
+
* storageKey="project-query"
|
|
1252
|
+
* sidebar={<SchemaTree … />}
|
|
1253
|
+
* toolbar={<QueryToolbar … />}
|
|
1254
|
+
* editor={<SqlEditor height="fill" … />}
|
|
1255
|
+
* output={<QueryOutputPane … />}
|
|
1256
|
+
* />
|
|
1257
|
+
* ```
|
|
1258
|
+
*/
|
|
1259
|
+
declare function QueryWorkspace({ sidebar, sidebarOpen: controlledSidebarOpen, onSidebarOpenChange, header, toolbar, editor, output, storageKey, defaultSidebarSize, defaultEditorSize, className, labels: customLabels }: QueryWorkspaceProps): import("react").JSX.Element;
|
|
1260
|
+
declare namespace QueryWorkspace {
|
|
1261
|
+
var displayName: string;
|
|
1262
|
+
}
|
|
1263
|
+
//#endregion
|
|
1264
|
+
//#region src/shells/sql-editor.d.ts
|
|
1265
|
+
/** CodeMirror 확장. `@codemirror/state`의 `Extension`. */
|
|
1266
|
+
type SqlEditorExtension = import("@codemirror/state").Extension;
|
|
1267
|
+
/** CodeMirror 키 바인딩. `@codemirror/view`의 `KeyBinding`. */
|
|
1268
|
+
type SqlEditorKeyBinding = import("@codemirror/view").KeyBinding;
|
|
1269
|
+
/**
|
|
1270
|
+
* 자동완성 스키마. `@codemirror/lang-sql`의 `SQLNamespace` —
|
|
1271
|
+
* `{ table: ["col", ...] }` 형태로 테이블/컬럼을 알려준다.
|
|
1272
|
+
*/
|
|
1273
|
+
type SqlEditorSchema = import("@codemirror/lang-sql").SQLNamespace;
|
|
1274
|
+
/** 추가 자동완성 소스. `@codemirror/autocomplete`의 `CompletionSource`. */
|
|
1275
|
+
type SqlEditorCompletionSource = import("@codemirror/autocomplete").CompletionSource;
|
|
1276
|
+
/** 실행 시점의 편집기 상태. 선택 영역만 실행하거나 커서 위치의 문장을 고를 때 쓴다. */
|
|
1277
|
+
interface SqlEditorRunContext {
|
|
1278
|
+
/** 선택된 텍스트. 선택이 없으면 `null`. */
|
|
1279
|
+
selection: string | null;
|
|
1280
|
+
/** 커서(선택의 head) 오프셋. */
|
|
1281
|
+
cursorOffset: number;
|
|
1282
|
+
}
|
|
1283
|
+
/** 편집기를 바깥에서 조작하는 핸들. 스키마 트리의 "커서에 삽입"이 대표적인 용도. */
|
|
1284
|
+
interface SqlEditorHandle {
|
|
1285
|
+
focus: () => void;
|
|
1286
|
+
/** 커서 위치에 텍스트를 넣고, 선택이 있으면 그 자리를 대체한다. */
|
|
1287
|
+
insertText: (text: string) => void;
|
|
1288
|
+
/** 현재 선택 텍스트. 선택이 없으면 `null`. */
|
|
1289
|
+
getSelection: () => string | null;
|
|
1290
|
+
getCursorOffset: () => number;
|
|
1291
|
+
}
|
|
1292
|
+
/** 편집기 색상. `auto`는 OptThemeProvider의 resolved mode를 따른다. */
|
|
1293
|
+
type SqlEditorTheme = "light" | "dark" | "auto";
|
|
1294
|
+
/** Localized labels for the sql editor component. */
|
|
1295
|
+
interface SqlEditorLabels {
|
|
1296
|
+
placeholder?: string;
|
|
1297
|
+
runHint?: string;
|
|
1298
|
+
runButton?: string;
|
|
1299
|
+
editor?: string;
|
|
1300
|
+
}
|
|
1301
|
+
/** Props for the sql editor component. */
|
|
1302
|
+
interface SqlEditorProps {
|
|
1303
|
+
value: string;
|
|
1304
|
+
onChange: (sql: string) => void;
|
|
1305
|
+
/** Mod+Enter. 두 번째 인자로 선택 영역과 커서 위치를 받는다. */
|
|
1306
|
+
onRun?: (sql: string, context: SqlEditorRunContext) => void;
|
|
1307
|
+
/** Shift+Enter — 실행 후 다음 셀/탭으로 넘어가는 노트북형 흐름. */
|
|
1308
|
+
onRunAndAdvance?: (sql: string, context: SqlEditorRunContext) => void;
|
|
1309
|
+
placeholder?: string;
|
|
1310
|
+
readOnly?: boolean;
|
|
1311
|
+
/** px 고정 높이. `"fill"`이면 부모가 정한 높이를 채운다. */
|
|
1312
|
+
height?: number | "fill";
|
|
1313
|
+
/**
|
|
1314
|
+
* 테이블/컬럼 자동완성 스키마. 값이 바뀌면 에디터를 다시 만들지 않고
|
|
1315
|
+
* 자동완성만 재구성하므로, 카탈로그가 자주 갱신되는 화면에서도 커서와
|
|
1316
|
+
* 실행 취소 이력이 유지된다.
|
|
1317
|
+
*/
|
|
1318
|
+
schema?: SqlEditorSchema;
|
|
1319
|
+
/** 스키마 자동완성에 더해 붙일 완성 소스 (함수 시그니처, 스니펫 등). */
|
|
1320
|
+
completionSources?: SqlEditorCompletionSource[];
|
|
1321
|
+
/** 추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가된다. */
|
|
1322
|
+
keymap?: SqlEditorKeyBinding[];
|
|
1323
|
+
/** 임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 갖는다. */
|
|
1324
|
+
extensions?: SqlEditorExtension[];
|
|
1325
|
+
/** 편집 영역의 접근성 레이블. */
|
|
1326
|
+
ariaLabel?: string;
|
|
1327
|
+
autoFocus?: boolean;
|
|
1328
|
+
/**
|
|
1329
|
+
* 실행 힌트와 Run 버튼 표시 여부. 기본값은 `onRun`이 있을 때 표시.
|
|
1330
|
+
* 자체 툴바를 쓰는 화면에서 `false`로 끈다.
|
|
1331
|
+
*/
|
|
1332
|
+
showFooter?: boolean;
|
|
1333
|
+
/** 줄 번호 거터. 기본 표시. */
|
|
1334
|
+
lineNumbers?: boolean;
|
|
1335
|
+
/** 편집기 색상. 기본 `auto`. */
|
|
1336
|
+
theme?: SqlEditorTheme;
|
|
1337
|
+
labels?: SqlEditorLabels;
|
|
1338
|
+
className?: string;
|
|
1339
|
+
}
|
|
1340
|
+
/**
|
|
1341
|
+
* SqlEditor — a query is text until it runs; this is where it is text.
|
|
1342
|
+
*
|
|
1343
|
+
* Built on CodeMirror, loaded on first mount so pages that never open the
|
|
1344
|
+
* editor never pay for it. The editor is created once: schema, theme and
|
|
1345
|
+
* read-only changes are applied through compartments, so a catalogue refresh
|
|
1346
|
+
* or a theme switch does not throw away the cursor and the undo history.
|
|
1347
|
+
*
|
|
1348
|
+
* @example
|
|
1349
|
+
* ```tsx
|
|
1350
|
+
* const editor = useRef<SqlEditorHandle>(null);
|
|
1351
|
+
* <SqlEditor
|
|
1352
|
+
* ref={editor}
|
|
1353
|
+
* value={sql}
|
|
1354
|
+
* onChange={setSql}
|
|
1355
|
+
* onRun={(text, { selection }) => run(selection ?? text)}
|
|
1356
|
+
* schema={{ events: ["id", "name", "created_at"] }}
|
|
1357
|
+
* height="fill"
|
|
1358
|
+
* />
|
|
1359
|
+
* ```
|
|
1360
|
+
*/
|
|
1361
|
+
declare const SqlEditor: React.ForwardRefExoticComponent<SqlEditorProps & React.RefAttributes<SqlEditorHandle>>;
|
|
1362
|
+
//#endregion
|
|
541
1363
|
//#region src/shells/event-timeline.d.ts
|
|
542
1364
|
/** Semantic colour of a timeline node. */
|
|
543
1365
|
type EventTimelineTone = "default" | "accent" | "success" | "warning" | "danger";
|
|
@@ -1324,4 +2146,4 @@ declare namespace FieldSidebar {
|
|
|
1324
2146
|
var displayName: string;
|
|
1325
2147
|
}
|
|
1326
2148
|
//#endregion
|
|
1327
|
-
export { EventTimelineItem as $,
|
|
2149
|
+
export { EventTimelineItem as $, EditorToolbarProps as $n, QueryToolbar as $t, QueryCellAction as A, ToastVariant as An, QueryFilterField as At, removeClause as B, EnvPanel as Bn, QueryChartConfig as Bt, TimeRangePreset as C, FailureListProps as Cn, QueryHistoryListProps as Ct, QueryField as D, ToastMessage as Dn, QueryVariablesMenuProps as Dt, QueryBarProps as E, ToastContextValue as En, QueryVariablesMenuLabels as Et, addClause as F, DataTableProps as Fn, QueryFiltersMenuProps as Ft, FlyoutProps as G, DeploymentTimelineProps as Gn, defaultQueryChartConfig as Gt, withoutField as H, ProjectSwitcher as Hn, QueryResultChart as Ht, applyCellAction as I, DomainTable as In, QueryPropertyFilter as It, ScoreBreakdown as J, FaqAccordion as Jn, QueryOutputPaneLabels as Jt, ScoreAxis as K, SettingsForm as Kn, numericResultColumns as Kt, fieldValues as L, DomainTableProps as Ln, VALUELESS_OPERATORS as Lt, QueryFieldClause as M, useToast as Mn, QueryFilters as Mt, QueryOperator as N, ColumnDef as Nn, QueryFiltersMenu as Nt, EMPTY_QUERY as O, ToastProvider as On, isValidQueryVariableName as Ot, QueryTermClause as P, DataTable as Pn, QueryFiltersMenuLabels as Pt, EventTimelineGroup as Q, EditorToolbar as Qn, QueryRunState as Qt, isEmptyQuery as R, BranchSelect as Rn, countActiveQueryFilters as Rt, TimeRangeControlProps as S, FailureListLabels as Sn, QueryHistoryListLabels as St, QueryBarLabels as T, ToastAction as Tn, QueryVariablesMenu as Tt, Flyout as U, ProjectSwitcherProps as Un, QueryResultChartLabels as Ut, withFieldValue as V, EnvPanelProps as Vn, QueryChartType as Vt, FlyoutLabels as W, DeploymentTimeline as Wn, QueryResultChartProps as Wt, ScoreBreakdownProps as X, ContentTabs as Xn, QueryOutputView as Xt, ScoreBreakdownLabels as Y, FaqAccordionProps as Yn, QueryOutputPaneProps as Yt, EventTimeline as Z, ContentTabsProps as Zn, QueryRunStats as Zt, TimeSeriesPanelProps as _, KeyValueEditor as _n, SaveQueryDialogLabels as _t, FieldValueCount as a, SchemaTreeProps as an, StatusSelectProps as ar, SqlEditorExtension as at, TimeRangeControl as b, KeyValueEntry as bn, QueryHistoryItem as bt, LogColumnPriority as c, QueryResultSort as cn, DashboardGrid as cr, SqlEditorLabels as ct, LogTable as d, QueryResultsTableProps as dn, CommandPaletteTriggerProps as dr, SqlEditorSchema as dt, QueryToolbarLabels as en, SidebarNav as er, EventTimelineLabels as et, LogTableHandle as f, formatQueryCell as fn, CommandPalette as fr, SqlEditorTheme as ft, TimeSeriesPanelLabels as g, WorkflowCanvasStep as gn, SaveQueryDialog as gt, TimeSeriesPanel as h, WorkflowCanvasProps as hn, QueryWorkspaceProps as ht, FieldSummary as i, SchemaTreeLabels as in, StatusSelect as ir, SqlEditorCompletionSource as it, QueryClause as j, toast as jn, QueryFilterOperator as jt, Query as k, ToastProviderProps as kn, EMPTY_QUERY_FILTERS as kt, LogDensity as l, QueryResultsTable as ln, DashboardGridProps as lr, SqlEditorProps as lt, LogTableProps as m, WorkflowCanvasConnection as mn, QueryWorkspaceLabels as mt, FieldSidebarLabels as n, SchemaTree as nn, AppMenubar as nr, EventTimelineTone as nt, LogCellAction as o, SchemaTreeTable as on, SearchCombobox as or, SqlEditorHandle as ot, LogTableLabels as p, WorkflowCanvas as pn, CommandPaletteProps as pr, QueryWorkspace as pt, ScoreBand as q, SettingsFormProps as qn, QueryOutputPane as qt, FieldSidebarProps as r, SchemaTreeColumn as rn, AppMenubarProps as rr, SqlEditor as rt, LogColumn as s, QueryResultColumn as sn, SearchComboboxProps as sr, SqlEditorKeyBinding as st, FieldSidebar as t, QueryToolbarProps as tn, SidebarNavProps as tr, EventTimelineProps as tt, LogSort as u, QueryResultsTableLabels as un, CommandPaletteTrigger as ur, SqlEditorRunContext as ut, DEFAULT_TIME_PRESETS as v, KeyValueEditorLabels as vn, SaveQueryDialogProps as vt, QueryBar as w, NotificationToast as wn, QueryVariable as wt, TimeRangeControlLabels as x, FailureList as xn, QueryHistoryList as xt, RefreshSetting as y, KeyValueEditorProps as yn, SaveQueryValues as yt, queryFields as z, BranchSelectProps as zn, hasActiveQueryFilters as zt };
|