13 |
20 |
22 |
23 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | # This workflow uploads index.html file to release assets
2 |
3 | name: Release
4 |
5 | on:
6 | push:
7 | tags:
8 | - "v*.*.*"
9 |
10 | jobs:
11 | build:
12 |
13 | runs-on: ubuntu-latest
14 |
15 | steps:
16 | - name: Checkout
17 | uses: actions/checkout@v3
18 | - name: Build
19 | uses: actions/setup-node@v3
20 | with:
21 | node-version: 20.x
22 | cache: 'npm'
23 | - run: npm ci
24 | - run: npm run build
25 | - name: Release
26 | uses: softprops/action-gh-release@v1
27 | with:
28 | files: dist-app/index.html
29 | # To only send out release mails when the release
30 | # notes have been manually added
31 | draft: true
32 |
--------------------------------------------------------------------------------
/src/components/GridProgressBar.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/example/src/App.vue:
--------------------------------------------------------------------------------
1 |
33 |
34 |
35 | 
7 |
8 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Node.js CI
5 |
6 | on:
7 | push:
8 | branches: [ "master" ]
9 | pull_request:
10 | branches: [ "master" ]
11 |
12 | jobs:
13 | build:
14 |
15 | runs-on: ubuntu-latest
16 |
17 | strategy:
18 | matrix:
19 | node-version: [20.x]
20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21 |
22 | steps:
23 | - uses: actions/checkout@v3
24 | - name: Use Node.js ${{ matrix.node-version }}
25 | uses: actions/setup-node@v3
26 | with:
27 | node-version: ${{ matrix.node-version }}
28 | cache: 'npm'
29 | - name: Clear npm cache
30 | run: npm cache clean --force
31 | - name: Install dependencies
32 | run: npm ci
33 | - name: Run tests
34 | run: npm test
35 | - name: Run linting
36 | run: npm run lint -- --config eslint.config.mjs
37 | - name: Build
38 | run: npm run build --if-present
39 |
--------------------------------------------------------------------------------
/src/components/SortGroup.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | Count: {{ sortGroup["Group Count"] }}
14 |
15 |
16 |
27 |
28 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/src/components/MiscDetail.vue:
--------------------------------------------------------------------------------
1 |
37 |
38 | 15 |
| 18 | Sort Methods: 21 | | 22 |23 | {{ keysToString(sortGroup["Sort Methods Used"]) }} 24 | | 25 |
| Memory: | 30 |
31 | Average:
32 | {{
33 | kilobytes(sortGroup["Sort Space Memory"]["Average Sort Space Used"])
34 | }}
35 | 36 | Peak: 37 | {{ 38 | kilobytes(sortGroup["Sort Space Memory"]["Peak Sort Space Used"]) 39 | }} 40 | |
41 |
| {{ prop.key }} | 42 |43 | |
26 |
34 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
9 |
8 |
55 |
62 | Acknowledgements
9 |10 | This project is based on 11 | Postgres Explain Visualizer 2 (pev2). Kudos go to Pierre Giraud. 14 |
15 | 16 |17 | Matthis Noël has modified pev2 to work with DuckDB for his bachelor's 18 | thesis at the Database Systems Research Group @ University of Tübingen. 19 |
20 | 21 |How To Use
22 |
23 | Generate a json query plan using the following lines in any terminal
24 | running the DuckDB CLI:
25 | PRAGMA enable_profiling = 'json';
26 | PRAGMA profiling_output = '/path/to/file.json';
27 | [your-query-here]
28 |
29 | Alternatively use:
30 | EXPLAIN (ANALYZE, FORMAT JSON)
31 | [your-query-here]
32 | Then just drag & drop your JSON file or copy its content
33 | into the PLAN section.
34 | You can add a name for the plan (you don't have to).
35 | Click Submit.
36 |
Help us to improve this service
39 |40 | This application uses the 41 | duckdb-explain-visualizer 44 | JS library to display DuckDB plans. 45 |
46 | 47 |48 | Report issues or contribute to the code on 49 | Github. 52 |
53 | 54 |55 |
56 | The duckdb-explain-visualizer is brought to you by
57 | Database Systems Research Group @ University of Tübingen
60 |
61 |
41 |
43 |
44 |
60 | ```
61 |
62 | [See it live](https://stackblitz.com/edit/pev2-vanilla).
63 |
64 | ### With build tools
65 |
66 | The DuckDB Explain Visualizer can be integrated as a component in a web application.
67 |
68 | Install it:
69 |
70 | ```
71 | npm install duckdb-explain-visualizer
72 | ```
73 |
74 | Declare the `duckdb-explain-visualizer` component and use it:
75 |
76 | ```javascript
77 | import { Plan } from "duckdb-explain-visualizer"
78 | import "duckdb-explain-visualizer/dist/style.css"
79 |
80 | export default {
81 | name: "DuckDB Explain Visualizer example",
82 | components: {
83 | "duckdb-explain-visualizer": Plan,
84 | },
85 | data() {
86 | return {
87 | plan: plan,
88 | query: query,
89 | }
90 | },
91 | }
92 | ```
93 |
94 | Then add the `duckdb-explain-visualizer` component to your template:
95 |
96 | ```html
97 |
98 |
103 | ```
104 |
105 | The DuckDB Explain Visualizer requires `Bootstrap (CSS)` to work so don't forget to
106 | add the following in you header (or load them with your favorite bundler).
107 |
108 | ```html
109 |
113 | ```
114 |
115 | [See it live](https://stackblitz.com/edit/pev2-vite).
116 |
117 | # Disclaimer
118 |
119 | This project is a hard fork of the excellent [Postgres Explain Visualizer 2 (PEV2)][pev2]. Kudos go to [Dalibo][dalibo]. We have adapted the project to work with DuckDB. The initial heavy lifting was done by Matthis Noël (https://github.com/Matthis02).
120 |
121 | [pev2]: https://github.com/dalibo/pev2/
122 | [dalibo]: https://www.dalibo.com/
123 |
--------------------------------------------------------------------------------
/src/enums.ts:
--------------------------------------------------------------------------------
1 | export enum Metric {
2 | time,
3 | rows,
4 | result,
5 | }
6 |
7 | export enum BufferLocation {
8 | shared = "Shared",
9 | temp = "Temp",
10 | local = "Local",
11 | }
12 |
13 | export enum BufferType {
14 | hit = "Hit",
15 | read = "Read",
16 | written = "Written",
17 | dirtied = "Dirtied",
18 | }
19 |
20 | export class HighlightType {
21 | public static NONE = "none"
22 | public static DURATION = "duration"
23 | public static ROWS = "rows"
24 | public static RESULT = "result"
25 | }
26 |
27 | export enum SortDirection {
28 | asc = "asc",
29 | desc = "desc",
30 | }
31 |
32 | export enum EstimateDirection {
33 | over = 1,
34 | under = 2,
35 | none = 3,
36 | }
37 |
38 | export enum CenterMode {
39 | center,
40 | visible,
41 | none,
42 | }
43 |
44 | export enum NodeProp {
45 | // plan property keys
46 | QUERY = "query_name",
47 | NODE_TYPE = "operator_type", // the name of each operator
48 | NODE_TYPE_EXPLAIN = "name", // same as above (without ANALYZE)
49 | ACTUAL_ROWS = "operator_cardinality", // the number of rows it returns to its parent
50 | ACTUAL_TIME = "operator_timing", // the time taken by each operator
51 | BLOCKED_THREAD_TIME = "blocked_thread_time", // the total time threads are blocked
52 | PLANS = "children",
53 | CPU_TIME = "cpu_time",
54 | CUMULATIVE_CARDINALITY = "cumulative_cardinality",
55 | CUMULATIVE_ROWS_SCANNED = "cumulative_rows_scanned",
56 | OPERATOR_ROWS_SCANNED = "operator_rows_scanned", // The total rows scanned by each operator.
57 | RESULT_SET_SIZE = "result_set_size", // The size of the result.
58 | LATENCY = "latency",
59 | ROWS_RETURNED = "rows_returned",
60 |
61 | // EXTRA INFO KEYS
62 | EXTRA_INFO = "extra_info", // Unique operator metrics
63 | RELATION_NAME = "Table",
64 | PROJECTIONS = "Projections",
65 | ESTIMATED_ROWS = "Estimated Cardinality",
66 | AGGREGATES = "Aggregates",
67 | CTE_NAME = "CTE Name",
68 | TABLE_INDEX = "Table Index",
69 | GROUPS = "Groups",
70 | JOIN_TYPE = "Join Type",
71 | CONDITIONS = "Conditions",
72 | CTE_INDEX = "CTE Index",
73 | FILTER = "Expression",
74 | DELIM_INDEX = "Delim Index",
75 | FUNCTION = "Function",
76 | FUNCTION_NAME = "Name",
77 |
78 | // computed by dev
79 | NODE_ID = "nodeId",
80 | DEV_PLAN_TAG = "plan_",
81 | }
82 |
83 | export enum PropType {
84 | blocks,
85 | boolean,
86 | bytes,
87 | cost,
88 | duration,
89 | estimateDirection,
90 | factor,
91 | increment,
92 | json,
93 | kilobytes,
94 | list,
95 | loops,
96 | rows,
97 | sortGroups,
98 | transferRate,
99 | }
100 |
101 | export const nodePropTypes: { [key: string]: PropType } = {}
102 |
103 | nodePropTypes[NodeProp.ACTUAL_ROWS] = PropType.rows
104 | nodePropTypes[NodeProp.CUMULATIVE_CARDINALITY] = PropType.rows
105 | nodePropTypes[NodeProp.CUMULATIVE_ROWS_SCANNED] = PropType.rows
106 | nodePropTypes[NodeProp.OPERATOR_ROWS_SCANNED] = PropType.rows
107 | nodePropTypes[NodeProp.CPU_TIME] = PropType.duration
108 | nodePropTypes[NodeProp.BLOCKED_THREAD_TIME] = PropType.duration
109 | nodePropTypes[NodeProp.RESULT_SET_SIZE] = PropType.bytes
110 | nodePropTypes[NodeProp.ACTUAL_TIME] = PropType.duration
111 | nodePropTypes[NodeProp.LATENCY] = PropType.duration
112 | nodePropTypes[NodeProp.ROWS_RETURNED] = PropType.rows
113 |
114 | export class WorkerProp {
115 | // plan property keys
116 | public static WORKER_NUMBER = "Worker Number"
117 | }
118 |
119 | nodePropTypes[WorkerProp.WORKER_NUMBER] = PropType.increment
120 |
121 | export enum SortGroupsProp {
122 | GROUP_COUNT = "Group Count",
123 | SORT_METHODS_USED = "Sort Methods Used",
124 | SORT_SPACE_MEMORY = "Sort Space Memory",
125 | }
126 |
127 | export enum SortSpaceMemoryProp {
128 | AVERAGE_SORT_SPACE_USED = "Average Sort Space Used",
129 | PEAK_SORT_SPACE_USED = "Peak Sort Space Used",
130 | }
131 |
--------------------------------------------------------------------------------
/src/components/PlanStats.vue:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 |
27 |
123 |
124 |
--------------------------------------------------------------------------------
/src/interfaces.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | HighlightType,
3 | SortGroupsProp,
4 | SortSpaceMemoryProp,
5 | } from "@/enums"
6 |
7 | export interface IPlan {
8 | id: string
9 | name: string
10 | content: IPlanContent
11 | query: string
12 | createdOn: Date
13 | planStats: IPlanStats
14 | formattedQuery?: string
15 | }
16 |
17 | export interface IPlanContent {
18 | "Query Text"?: string
19 | _: Node
20 | [NodeProp.PLANS]: Node[]
21 | maxRows: number
22 | maxRowsScanned: number
23 | maxEstimatedRows: number
24 | maxResult: number
25 | maxDuration: number
26 | [k: string]: Node | Node[] | number | string | undefined
27 | }
28 |
29 | export interface IPlanStats {
30 | blockedThreadTime?: number
31 | executionTime?: number
32 | latency?: number
33 | rowsReturned?: number
34 | resultSize?: number
35 | maxRows: number
36 | maxRowsScanned: number
37 | maxEstimatedRows: number
38 | maxResult: number
39 | maxDuration: number
40 | }
41 |
42 | import { NodeProp } from "@/enums"
43 |
44 | // Optional properties for advanced DuckDB Explain plans
45 | export interface ExtraInfo {
46 | [NodeProp.RELATION_NAME]?: string
47 | [NodeProp.PROJECTIONS]?: string | string[]
48 | [NodeProp.ESTIMATED_ROWS]?: string
49 | [NodeProp.AGGREGATES]?: string | string[]
50 | [NodeProp.CTE_NAME]?: string
51 | [NodeProp.TABLE_INDEX]?: string
52 | [NodeProp.GROUPS]?: string | string[]
53 | [NodeProp.JOIN_TYPE]?: string
54 | [NodeProp.CONDITIONS]?: string | string[]
55 | [NodeProp.CTE_INDEX]?: string
56 | [NodeProp.FILTER]?: string
57 | [NodeProp.DELIM_INDEX]?: string
58 | [NodeProp.FUNCTION]?: string
59 | [NodeProp.FUNCTION_NAME]?: string
60 | [k: string]: any
61 | }
62 |
63 | // Class to create nodes when parsing text for DuckDB Explain Plans
64 | export class Node {
65 | nodeId!: number;
66 | size!: [number, number];
67 | // DuckDB specific properties
68 | [NodeProp.NODE_TYPE]?: string; // Type of operation in DuckDB (e.g., "Filter", "Scan")
69 | [NodeProp.NODE_TYPE_EXPLAIN]?: string; // same (without ANALYZE)
70 | [NodeProp.ACTUAL_TIME]?: number; // Actual timing for the node if available
71 | [NodeProp.ACTUAL_ROWS]?: number; // Estimated number of rows
72 | [NodeProp.PLANS]!: Node[];
73 | [NodeProp.CPU_TIME]?: number;
74 | [NodeProp.CUMULATIVE_CARDINALITY]?: number;
75 | [NodeProp.CUMULATIVE_ROWS_SCANNED]?: number;
76 | [NodeProp.OPERATOR_ROWS_SCANNED]?: number;
77 | [NodeProp.RESULT_SET_SIZE]?: number;
78 | [NodeProp.EXTRA_INFO]!: ExtraInfo;
79 | [k: string]:
80 | | Node
81 | | Node[]
82 | | Timing
83 | | boolean
84 | | number
85 | | string
86 | | string[]
87 | | JSON
88 | | object
89 | | object[]
90 | | undefined
91 | | [number, number]
92 |
93 | constructor(type?: string) {
94 | this.nodeId = 0;
95 | this.size = [0, 0];
96 | this[NodeProp.PLANS] = [];
97 | this[NodeProp.CPU_TIME] = 0;
98 | this[NodeProp.CUMULATIVE_CARDINALITY] = 0;
99 | this[NodeProp.CUMULATIVE_ROWS_SCANNED] = 0;
100 | this[NodeProp.OPERATOR_ROWS_SCANNED] = 0;
101 | this[NodeProp.RESULT_SET_SIZE] = 0;
102 | this[NodeProp.EXTRA_INFO] = {};
103 |
104 | if (type) {
105 | this[NodeProp.NODE_TYPE] = type;
106 | }
107 | }
108 | }
109 |
110 | import { WorkerProp } from "@/enums"
111 | // Class to create workers when parsing text
112 | export class Worker {
113 | [k: string]: string | number | object
114 | constructor(workerNumber: number) {
115 | this[WorkerProp.WORKER_NUMBER] = workerNumber
116 | }
117 | }
118 |
119 | export type Options = {
120 | [k: string]: string
121 | }
122 |
123 | export type Timing = {
124 | [k: string]: number
125 | }
126 |
127 | export type Settings = {
128 | [k: string]: string
129 | }
130 |
131 | export type SortGroups = {
132 | [SortGroupsProp.SORT_METHODS_USED]: string[]
133 | [SortGroupsProp.SORT_SPACE_MEMORY]: SortSpaceMemory
134 | [key: string]: number | string | string[] | SortSpaceMemory
135 | }
136 |
137 | export type SortSpaceMemory = {
138 | [key in SortSpaceMemoryProp]: number
139 | }
140 |
141 | export type StatsTableItemType = {
142 | name: string
143 | count: number
144 | time: number
145 | timePercent: number
146 | nodes: Node[]
147 | }
148 |
149 | export type ViewOptions = {
150 | showHighlightBar: boolean
151 | showPlanStats: boolean
152 | highlightType: HighlightType
153 | diagramWidth: number
154 | }
155 |
156 | export interface JIT {
157 | ["Timing"]: Timing
158 | [key: string]: number | Timing
159 | }
160 |
161 | // A plan node with id, node, isLastSibling, branches
162 | export type Row = [number, Node, boolean, number[]]
163 |
--------------------------------------------------------------------------------
/src/components/Grid.vue:
--------------------------------------------------------------------------------
1 |
120 |
121 |
122 |
28 | Execution time:
29 |
30 |
31 | N/A
32 |
46 |
47 | Blocked Thread Time:
48 |
49 |
50 | N/A
51 |
65 |
66 | Latency:
67 |
68 |
69 | N/A
70 |
84 |
85 | Rows returned:
86 |
87 |
88 | N/A
89 |
103 |
104 | Result size:
105 |
106 |
107 | N/A
108 |
122 |
123 |
124 |
125 |
168 |
169 |
170 |
--------------------------------------------------------------------------------
/src/assets/scss/_plan-node.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 | @use "sass:color";
3 | @use "variables" as *;
4 | @use "base" as *;
5 |
6 | $compact-width: 50px;
7 | $bg-color: #fff;
8 |
9 | .plan-node {
10 | cursor: default;
11 | text-decoration: none;
12 | color: $text-color;
13 | display: inline-block;
14 | position: relative;
15 | font-size: $font-size-sm;
16 | margin-bottom: 4px;
17 | overflow-wrap: break-word;
18 | word-wrap: break-word;
19 | width: 240px;
20 |
21 | .plan-node-body {
22 | position: relative;
23 | border: 1px solid $line-color;
24 | border-radius: $border-radius-base;
25 | background-color: $plan-node-bg;
26 | box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);
27 |
28 | &.card {
29 |
30 | .card-body,
31 | .card-header {
32 | padding: $padding-base $padding-lg;
33 | }
34 |
35 | .card-header .card-header-tabs {
36 | margin-right: 0;
37 | margin-left: 0;
38 | margin-bottom: -$padding-base;
39 | margin-top: $padding-base;
40 |
41 | .nav-link {
42 | padding: math.div($padding-base, 2) $padding-lg;
43 | }
44 | }
45 | }
46 | }
47 |
48 | &.parallel .plan-node-body {
49 | box-shadow: none;
50 | }
51 |
52 | header {
53 | margin-bottom: $padding-base;
54 | overflow: hidden;
55 |
56 | h4 {
57 | font-size: $font-size-base;
58 | font-weight: 600;
59 | margin: 0;
60 | line-height: inherit;
61 | color: black !important;
62 | }
63 |
64 | .node-duration {
65 | float: right;
66 | margin-left: $padding-lg;
67 | font-size: $font-size-base;
68 | }
69 | }
70 |
71 | .prop-list {
72 | color: inherit;
73 | // required for overflow-wrap to be taken into account
74 | table-layout: fixed;
75 | }
76 |
77 | //hovers
78 | &:hover,
79 | &.highlight {
80 | $hover-color: rgba(0, 0, 0, 0.4);
81 |
82 | .plan-node-body {
83 | box-shadow: 1px 1px 5px 0px $hover-color;
84 | }
85 |
86 | .workers>div {
87 | border-color: rgba($hover-color, 0.2);
88 | }
89 | }
90 |
91 |
92 | &.selected {
93 | .plan-node-body {
94 | border-color: $highlight-color;
95 | box-shadow: 0px 0px 5px 2px rgba($highlight-color, 0.4);
96 | }
97 |
98 | .workers>div {
99 | border-color: rgba($highlight-color, 0.2);
100 | }
101 | }
102 |
103 | .node-description {
104 | text-align: left;
105 | font-style: italic;
106 | word-break: normal;
107 |
108 | .node-type {
109 | font-weight: 600;
110 | background-color: $blue;
111 | color: #fff;
112 | padding: 0 $padding-base;
113 | }
114 | }
115 |
116 | .btn-default {
117 | border: 0;
118 | }
119 |
120 | .text-secondary {
121 | color: $text-color-light;
122 | }
123 |
124 | .plan-query-container {
125 | border: 1px solid $line-color;
126 | padding: $padding-xl;
127 | background-color: #fff;
128 | position: absolute;
129 | box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
130 | border-radius: $border-radius-base;
131 | margin-bottom: $padding-xl;
132 | z-index: 1;
133 | left: 0;
134 |
135 | h3 {
136 | font-size: $font-size-lg;
137 | width: 93%;
138 | text-align: left;
139 | border-bottom: 1px solid $line-color;
140 | padding-bottom: $padding-base;
141 | margin-bottom: $padding-lg;
142 | }
143 | }
144 |
145 | &.never-executed .plan-node-body {
146 | @extend %bg-hatched !optional;
147 | }
148 |
149 | .workers {
150 | position: absolute;
151 | left: -1px;
152 | top: 1px;
153 | width: 100%;
154 | height: 100%;
155 | cursor: pointer;
156 |
157 | >div {
158 | border: 1px solid $gray-light;
159 | border-radius: $border-radius-base;
160 | background-color: $white;
161 | width: 100%;
162 | height: 100%;
163 | position: absolute;
164 | }
165 | }
166 |
167 | .workers-handle {
168 | cursor: pointer;
169 | position: absolute;
170 | top: 0;
171 | right: -5px;
172 |
173 | >div {
174 | position: absolute;
175 | top: 0;
176 | background-color: white;
177 | border: 1px solid color.adjust($gray-lightest, $lightness: -3%);
178 | border-radius: $border-radius-base;
179 |
180 | &:hover {
181 | background-color: $gray-lightest;
182 | border-color: $gray-light;
183 | }
184 | }
185 | }
186 |
187 | .subplan-name {
188 | background-color: #B3D7D7;
189 | border-radius: $border-radius-base;
190 | }
191 |
192 | button {
193 | .fa-chevron-right {
194 | display: inline-block;
195 | }
196 |
197 | .fa-chevron-down {
198 | display: none;
199 | }
200 | }
201 |
202 | button[aria-expanded='true'] {
203 | .fa-chevron-right {
204 | display: none !important;
205 | }
206 |
207 | .fa-chevron-down {
208 | display: inline-block !important;
209 | }
210 | }
211 |
212 | &.plan-node-detail .text-truncate {
213 | overflow: initial;
214 | white-space: initial;
215 | text-overflow: initial;
216 | }
217 | }
218 |
219 | .node-bar-container {
220 | height: 5px;
221 | margin-top: $padding-lg;
222 | margin-bottom: $padding-sm;
223 | border-radius: $border-radius-lg;
224 | background-color: $gray-light;
225 | position: relative;
226 |
227 | .node-bar {
228 | border-radius: $border-radius-lg;
229 | height: 100%;
230 | text-align: left;
231 | position: absolute;
232 | left: 0;
233 | top: 0;
234 | }
235 | }
236 |
237 | .node-bar-label {
238 | text-align: left;
239 | display: block;
240 | }
241 |
242 | .detailed {
243 | width: 400px !important;
244 | }
245 |
--------------------------------------------------------------------------------
/src/components/Diagram.vue:
--------------------------------------------------------------------------------
1 |
127 |
128 |
129 | | 127 | | time | 128 |rows | 129 |estim | 130 |result | 131 |filter | 132 |133 | |
|---|---|---|---|---|---|---|
| 139 | |
144 | |
155 |
130 |
185 |
186 |
--------------------------------------------------------------------------------
/src/components/PlanNodeDetail.vue:
--------------------------------------------------------------------------------
1 |
83 |
84 |
85 |
131 |
157 |
132 |
156 |
133 |
140 |
147 |
154 |
155 |
158 |
163 |
164 |
180 |
184 | | Main Query Plan | 166 |
|---|
181 | No data available
182 |
183 |
86 |
127 |
90 | {{ node[NodeProp.NODE_TYPE] ?? node[NodeProp.NODE_TYPE_EXPLAIN] }} Node
91 |
92 |
93 |
126 |
128 |
174 |
175 |
--------------------------------------------------------------------------------
/src/node.ts:
--------------------------------------------------------------------------------
1 | // Composable for PlanNode and PlanNodeDetail components
2 | import _ from "lodash"
3 | import { computed, onBeforeMount, ref, watch } from "vue"
4 | import type { Ref } from "vue"
5 | import type { IPlan, Node, ViewOptions } from "@/interfaces"
6 | import { NodeProp, HighlightType } from "@/enums"
7 | import { result, duration, rows } from "@/filters"
8 | import { numberToColorHsl } from "@/services/color-service"
9 |
10 | export default function useNode(
11 | plan: Ref
129 |
130 |
161 |
162 |
169 |
170 |
131 |
148 |
149 |
160 |
171 |
173 | Actual Time: ", 169 | duration(node[NodeProp.ACTUAL_TIME]), 170 | ", CPU Time: ", 171 | duration(node[NodeProp.CPU_TIME]), 172 | ].join("") 173 | }) 174 | 175 | const rowsTooltip = computed((): string => { 176 | return ["Rows: ", rows(node[NodeProp.ACTUAL_ROWS] as number)].join("") 177 | }) 178 | 179 | const resultTooltip = computed((): string => { 180 | return ["Result: ", rows(node[NodeProp.RESULT_SET_SIZE] as number)].join("") 181 | }) 182 | 183 | const estimationTooltip = computed((): string => { 184 | return [ 185 | "Estimated: ", 186 | rows( 187 | node[NodeProp.EXTRA_INFO][NodeProp.ESTIMATED_ROWS] as unknown as number 188 | ), 189 | ].join("") 190 | }) 191 | 192 | return { 193 | barColor, 194 | barWidth, 195 | resultClass, 196 | resultTooltip, 197 | durationClass, 198 | rowsClass, 199 | estimationClass, 200 | executionTimePercent, 201 | highlightValue, 202 | isNeverExecuted, 203 | nodeName, 204 | rowsTooltip, 205 | timeTooltip, 206 | estimationTooltip, 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /src/components/DiagramRow.vue: -------------------------------------------------------------------------------- 1 | 113 | 114 | 115 |
149 |
168 |
179 |
180 |
181 |
186 |
197 |
198 |
199 |
204 |
218 |
219 | ${blocksAsBytes(value)}` 136 | } 137 | return r 138 | } 139 | 140 | export function percent(value: number): string { 141 | if (isNaN(value)) { 142 | return "-" 143 | } 144 | return _.round(value * 100) + "%" 145 | } 146 | 147 | export function list(value: string[] | string): string { 148 | if (typeof value === "string") { 149 | value = value.split(/\s*,\s*/) 150 | } 151 | const compiled = _.template( 152 | "<% _.forEach(lines, function(line) { %>
- ' + compiled({ lines: value }) + "
104 |
260 |
261 |
--------------------------------------------------------------------------------
/src/components/Stats.vue:
--------------------------------------------------------------------------------
1 |
125 |
126 |
127 |
115 |
259 |
120 |
258 |
121 |
122 |
126 |
127 |
140 |
151 |
253 |
126 |
127 |
140 |
141 |
150 |
152 |
224 |
225 |
156 | on
157 | {{ node[NodeProp.EXTRA_INFO][NodeProp.RELATION_NAME] }}
158 |
159 |
163 | with
164 | {{ node[NodeProp.EXTRA_INFO][NodeProp.FUNCTION] }}
165 |
166 |
170 | group by
171 |
174 |
175 |
176 | {{ node[NodeProp.EXTRA_INFO][NodeProp.JOIN_TYPE] }}
177 | join
178 |
179 |
183 | projects
184 | {{
185 | keysToString(node[NodeProp.EXTRA_INFO][NodeProp.PROJECTIONS]!)
186 | }}
187 |
188 |
189 | {{ node[NodeProp.EXTRA_INFO][NodeProp.FUNCTION_NAME] }}
190 |
191 |
195 | on
196 |
199 |
200 |
204 | on
205 |
208 |
209 |
223 |
231 |
247 |
251 |
252 |
128 |
288 |
289 |
--------------------------------------------------------------------------------
/example/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
152 |
153 |
154 |
129 |
287 |
130 |
170 |
131 |
169 |
132 |
138 |
139 |
140 |
141 | Table
142 |
143 |
144 | Count
145 |
146 |
147 | Time
148 |
149 |
150 |
151 |
152 |
153 |
161 |
162 | No tables used
163 |
164 |
165 |
166 |
167 |
168 |
171 |
211 |
172 |
210 |
173 |
179 |
180 |
181 |
182 | Function
183 |
184 |
185 | Count
186 |
187 |
188 | Time
189 |
190 |
191 |
192 |
193 |
194 |
202 |
203 | No function used
204 |
205 |
206 |
207 |
208 |
209 |
212 |
245 |
213 |
244 |
214 |
220 |
221 |
222 |
223 | Node Type
224 |
225 |
226 | Count
227 |
228 |
229 | Time
230 |
231 |
232 |
233 |
234 |
235 |
242 |
243 |
246 |
286 |
247 |
285 |
248 |
254 |
255 |
256 |
257 | CTE
258 |
259 |
260 | Count
261 |
262 |
263 | Time
264 |
265 |
266 |
267 |
268 |
269 |
277 |
278 | No CTE used
279 |
280 |
281 |
282 |
283 |
284 |
156 |
308 |
157 | This is the demo application for the
158 | duckdb-explain-visualizer. It is serverless and only stores your plans local.
161 |
162 |
163 | 162 |
164 |
201 |
165 |
200 |
166 | Generate a json query plan using the following lines in any terminal
167 | running the DuckDB CLI:
168 |
169 |
170 |
171 |
172 | Alternatively use:
173 |
174 |
175 |
176 | 168 |
PRAGMA enable_profiling = 'json'; 169 |
PRAGMA profiling_output = '/path/to/file.json'; 170 |
[your-query-here] 171 |
172 | Alternatively use:
173 |
EXPLAIN (ANALYZE, FORMAT JSON) 174 |
[your-query-here] 175 |
177 |
187 |
198 |
199 |
202 |
307 |
203 |
251 |
252 |
253 |
306 | Saved Plans
254 | -
255 |
-
260 | 261 |285 |262 | 269 | 276 | 281 | {{ plan[0] }} 282 | 283 |284 |286 |296 |287 | 288 | created 289 | 290 | {{ time_ago(plan[3]) }} 291 | 292 | 293 |294 | 295 |
297 |
303 | You haven't saved any plan yet. 304 |
305 |result table of a materialized CTE.`,
39 | RECURSIVE_CTE: `Defines a recursive Common Table Expression (CTE) that enables iterative query processing.`,
40 | RECURSIVE_CTE_SCAN: `Scans the working table of a RECURSIVE_CTE.`,
41 | CROSS_PRODUCT: `Performs a Cartesian product between two tables.`,
42 | UNION: `Combines the results of two tables.`,
43 | UNGROUPED_AGGREGATE: `Computes aggregate functions over the entire input table without grouping.`,
44 | READ_CSV_AUTO: `Reads and parses CSV files, inferring column types and delimiters without explicit user specification.`,
45 | DUMMY_SCAN: `Generates a single-row, zero-column result, typically used for queries without an explicit table source (e.g., SELECT 1).`,
46 | DELIM_SCAN: `A DELIM_SCAN works in conjunction with a DELIM_JOIN and reads the set of correlated values.`,
47 | INOUT_FUNCTION: `Represents a table in-out function that can accepts a table as input and returns a table.`,
48 | RIGHT_DELIM_JOIN: `A DELIM_JOIN is used when DuckDB detects (and eliminates) a correlated subquery.`,
49 | LEFT_DELIM_JOIN: `A DELIM_JOIN is used when DuckDB detects (and eliminates) a correlated subquery.`,
50 | INSERT: `Inserts new rows into a table by consuming input data from its child node.`,
51 | UPDATE: `Updates rows in a table.`,
52 | DELETE: `Deletes rows of a table.`,
53 | }
54 |
55 | interface IHelpMessage {
56 | [key: string]: string
57 | }
58 |
59 | export const HELP_MESSAGES: IHelpMessage = {
60 | "MISSING EXECUTION TIME": `Execution time (or Total runtime) not available for this plan. Make sure you
61 | use ANALYZE.`,
62 | "MISSING BLOCKED THREAD TIME": `Blocked thread time not available for this plan. Make sure you
63 | use ANALYZE.`,
64 | "MISSING LATENCY": `Latency not available for this plan. Make sure you
65 | use ANALYZE.`,
66 | "MISSING ROWS RETURNED": `Rows returned not available for this plan. Make sure you
67 | use ANALYZE.`,
68 | "MISSING RESULT SIZE": `Result size not available for this plan. Make sure you
69 | use ANALYZE.`,
70 | }
71 |
72 | interface EaseInOutQuadOptions {
73 | currentTime: number
74 | start: number
75 | change: number
76 | duration: number
77 | }
78 |
79 | export function scrollChildIntoParentView(
80 | parent: Element,
81 | child: Element,
82 | shouldCenter: boolean,
83 | done?: () => void
84 | ) {
85 | if (!child) {
86 | return
87 | }
88 | // Where is the parent on page
89 | const parentRect = parent.getBoundingClientRect()
90 | // Where is the child
91 | const childRect = child.getBoundingClientRect()
92 |
93 | let scrollLeft = parent.scrollLeft // don't move
94 | const isChildViewableX =
95 | childRect.left >= parentRect.left &&
96 | childRect.left <= parentRect.right &&
97 | childRect.right <= parentRect.right
98 |
99 | let scrollTop = parent.scrollTop
100 | const isChildViewableY =
101 | childRect.top >= parentRect.top &&
102 | childRect.top <= parentRect.bottom &&
103 | childRect.bottom <= parentRect.bottom
104 |
105 | if (shouldCenter || !isChildViewableX || !isChildViewableY) {
106 | // scroll by offset relative to parent
107 | // try to put the child in the middle of parent horizontaly
108 | scrollLeft =
109 | childRect.left +
110 | parent.scrollLeft -
111 | parentRect.left -
112 | parentRect.width / 2 +
113 | childRect.width / 2
114 | scrollTop =
115 | childRect.top +
116 | parent.scrollTop -
117 | parentRect.top -
118 | parentRect.height / 2 +
119 | childRect.height / 2
120 | smoothScroll({
121 | element: parent,
122 | to: { scrollTop, scrollLeft },
123 | duration: 400,
124 | done,
125 | })
126 | } else if (done) {
127 | done()
128 | }
129 | }
130 |
131 | const easeInOutQuad = ({
132 | currentTime,
133 | start,
134 | change,
135 | duration,
136 | }: EaseInOutQuadOptions) => {
137 | let newCurrentTime = currentTime
138 | newCurrentTime /= duration / 2
139 |
140 | if (newCurrentTime < 1) {
141 | return (change / 2) * newCurrentTime * newCurrentTime + start
142 | }
143 |
144 | newCurrentTime -= 1
145 | return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start
146 | }
147 |
148 | interface SmoothScrollOptions {
149 | duration: number
150 | element: Element
151 | to: {
152 | scrollTop: number
153 | scrollLeft: number
154 | }
155 | done?: () => void
156 | }
157 |
158 | export function smoothScroll({
159 | duration,
160 | element,
161 | to,
162 | done,
163 | }: SmoothScrollOptions) {
164 | const startX = element.scrollTop
165 | const startY = element.scrollLeft
166 | const changeX = to.scrollTop - startX
167 | const changeY = to.scrollLeft - startY
168 | const startDate = new Date().getTime()
169 |
170 | const animateScroll = () => {
171 | const currentDate = new Date().getTime()
172 | const currentTime = currentDate - startDate
173 | element.scrollTop = easeInOutQuad({
174 | currentTime,
175 | start: startX,
176 | change: changeX,
177 | duration,
178 | })
179 | element.scrollLeft = easeInOutQuad({
180 | currentTime,
181 | start: startY,
182 | change: changeY,
183 | duration,
184 | })
185 |
186 | if (currentTime < duration) {
187 | requestAnimationFrame(animateScroll)
188 | } else {
189 | element.scrollTop = to.scrollTop
190 | element.scrollLeft = to.scrollLeft
191 | if (done) {
192 | done()
193 | }
194 | }
195 | }
196 | animateScroll()
197 | }
198 |
199 | /*
200 | * Split a string, ensuring balanced parenthesis and balanced quotes.
201 | */
202 | export function splitBalanced(input: string, split: string) {
203 | // Build the pattern from params with defaults:
204 | const pattern = "([\\s\\S]*?)(e)?(?:(o)|(c)|(t)|(sp)|$)"
205 | .replace("sp", split)
206 | .replace("o", "[\\(\\{\\[]")
207 | .replace("c", "[\\)\\}\\]]")
208 | .replace("t", "['\"]")
209 | .replace("e", "[\\\\]")
210 | const r = new RegExp(pattern, "gi")
211 | const stack: string[] = []
212 | let buffer: string[] = []
213 | const results: string[] = []
214 | input.replace(r, ($0, $1, $e, $o, $c, $t, $s) => {
215 | if ($e) {
216 | // Escape
217 | buffer.push($1, $s || $o || $c || $t)
218 | return ""
219 | } else if ($o) {
220 | // Open
221 | stack.push($o)
222 | } else if ($c) {
223 | // Close
224 | stack.pop()
225 | } else if ($t) {
226 | // Toggle
227 | if (stack[stack.length - 1] !== $t) {
228 | stack.push($t)
229 | } else {
230 | stack.pop()
231 | }
232 | } else {
233 | // Split (if no stack) or EOF
234 | if ($s ? !stack.length : !$1) {
235 | buffer.push($1)
236 | results.push(buffer.join(""))
237 | buffer = []
238 | return ""
239 | }
240 | }
241 | buffer.push($0)
242 | return ""
243 | })
244 | return results
245 | }
246 |
247 | export function findNodeById(plan: IPlan, id: number): Node | undefined {
248 | let o: Node | undefined = undefined
249 | const root = plan.content[NodeProp.PLANS][0] as Node
250 | if (root.nodeId == id) {
251 | return root
252 | }
253 | if (root && root[NodeProp.PLANS]) {
254 | root[NodeProp.PLANS]?.some(function iter(child: Node): boolean | undefined {
255 | if (child.nodeId === id) {
256 | o = child
257 | return true
258 | }
259 | return child[NodeProp.PLANS] && child[NodeProp.PLANS].some(iter)
260 | })
261 | }
262 | return o
263 | }
264 |
265 | export function findNodeBySubplanName(
266 | plan: IPlan,
267 | subplanName: string
268 | ): Node | undefined {
269 | const o: Node | undefined = undefined
270 | return o
271 | }
272 |
273 | // Returns the list of properties that have already been displayed either in
274 | // the main panel or in other detailed tabs.
275 | const notMiscProperties: string[] = [
276 | NodeProp.NODE_TYPE,
277 | NodeProp.NODE_TYPE_EXPLAIN,
278 | NodeProp.EXTRA_INFO,
279 | NodeProp.ACTUAL_TIME,
280 | NodeProp.ACTUAL_ROWS,
281 | NodeProp.OPERATOR_ROWS_SCANNED,
282 | NodeProp.ESTIMATED_ROWS,
283 | NodeProp.CTE_NAME,
284 | NodeProp.JOIN_TYPE,
285 | NodeProp.NODE_ID,
286 | "size", // Manually added to use FlexTree
287 | NodeProp.RELATION_NAME,
288 | NodeProp.FUNCTION_NAME,
289 | NodeProp.PROJECTIONS,
290 | NodeProp.CONDITIONS,
291 | NodeProp.FILTER,
292 | ]
293 |
294 | export function shouldShowProp(key: string, value: unknown): boolean {
295 | return (
296 | (!!value ||
297 | nodePropTypes[key] === PropType.increment ||
298 | key === NodeProp.ACTUAL_ROWS) &&
299 | notMiscProperties.indexOf(key) === -1
300 | )
301 | }
302 |
--------------------------------------------------------------------------------
/src/services/plan-service.ts:
--------------------------------------------------------------------------------
1 | import _ from "lodash"
2 | import { NodeProp } from "@/enums"
3 | import type { IPlan, IPlanContent, IPlanStats } from "@/interfaces"
4 | import type { Node } from "@/interfaces"
5 | import clarinet from "clarinet"
6 |
7 | export class PlanService {
8 | private static instance: PlanService
9 | private nodeId = 0
10 |
11 | public createPlan(
12 | planName: string,
13 | planContent: IPlanContent,
14 | planQuery: string
15 | ): IPlan {
16 | // remove any extra white spaces in the middle of query
17 | // (\S) start match after any non-whitespace character => group 1
18 | // (?!$) don't start match after end of line
19 | // (\s{2,}) group of 2 or more white spaces
20 | // '$1 ' reuse group 1 and and a single space
21 | planQuery = planQuery.replace(/(\S)(?!$)(\s{2,})/gm, "$1 ")
22 |
23 | if (planContent) {
24 | const plan: IPlan = {
25 | id: NodeProp.DEV_PLAN_TAG + new Date().getTime().toString(),
26 | name: planName || "plan created on " + new Date().toDateString(),
27 | createdOn: new Date(),
28 | content: planContent,
29 | query: planQuery,
30 | planStats: {} as IPlanStats,
31 | }
32 | this.nodeId = 1
33 | // console.log(planContent)
34 | if (planContent[NodeProp.CPU_TIME] !== undefined) {
35 | // plan is analyzed
36 | this.processNode(planContent[NodeProp.PLANS]![0]!, plan)
37 | } else {
38 | // plan is not analyzed
39 | this.processNode(planContent as unknown as Node, plan)
40 | }
41 | this.calculateMaximums(plan)
42 | return plan
43 | } else {
44 | throw new Error("Invalid plan")
45 | }
46 | }
47 |
48 | // recursively walk down the plan to compute various metrics
49 | public processNode(node: Node, plan: IPlan) {
50 | node.nodeId = this.nodeId++
51 |
52 | _.each(node[NodeProp.PLANS], (child) => {
53 | this.processNode(child, plan)
54 | })
55 | }
56 |
57 | public calculateMaximums(plan: IPlan) {
58 | type recurseItemType = Array<[Node, recurseItemType]>
59 |
60 | function recurse(nodes: Node[]): recurseItemType {
61 | return _.map(nodes, (node) => [node, recurse(node[NodeProp.PLANS])])
62 | }
63 |
64 | let flat: Node[] = []
65 | flat = flat.concat(_.flattenDeep(recurse(plan.content[NodeProp.PLANS])))
66 |
67 | const largest = _.maxBy(flat, NodeProp.ACTUAL_ROWS)
68 | plan.content.maxRows = largest && largest[NodeProp.ACTUAL_ROWS] !== undefined
69 | ? largest[NodeProp.ACTUAL_ROWS] as number
70 | : 0
71 |
72 | const largestScanned = _.maxBy(flat, NodeProp.OPERATOR_ROWS_SCANNED)
73 | plan.content.maxRowsScanned = largestScanned && largestScanned[NodeProp.OPERATOR_ROWS_SCANNED] !== undefined
74 | ? largestScanned[NodeProp.OPERATOR_ROWS_SCANNED] as number
75 | : 0
76 |
77 | const largestResult = _.maxBy(flat, NodeProp.RESULT_SET_SIZE)
78 | plan.content.maxResult = largestResult && largestResult[NodeProp.RESULT_SET_SIZE] !== undefined
79 | ? largestResult[NodeProp.RESULT_SET_SIZE] as number
80 | : 0
81 |
82 | const largestEstimate = _.maxBy(flat, function (node: Node) {
83 | const estimatedRows = node[NodeProp.EXTRA_INFO][NodeProp.ESTIMATED_ROWS]
84 | return estimatedRows ? parseInt(estimatedRows as string, 10) : 0
85 | })
86 | plan.content.maxEstimatedRows = largestEstimate && largestEstimate[NodeProp.EXTRA_INFO][NodeProp.ESTIMATED_ROWS]
87 | ? parseInt(largestEstimate[NodeProp.EXTRA_INFO][NodeProp.ESTIMATED_ROWS] as string, 10)
88 | : 0
89 |
90 | const slowest = _.maxBy(flat, NodeProp.ACTUAL_TIME)
91 | plan.content.maxDuration = slowest && slowest[NodeProp.ACTUAL_TIME] !== undefined
92 | ? slowest[NodeProp.ACTUAL_TIME] as number
93 | : 0
94 | }
95 |
96 | public cleanupSource(source: string) {
97 | // Remove frames around, handles |, ║,
98 | source = source.replace(/^(\||║|│)(.*)\1\r?\n/gm, "$2\n")
99 | // Remove frames at the end of line, handles |, ║,
100 | // source = source.replace(/(.*)(\||║|│)$\r?\n/gm, "$1\n")
101 |
102 | // Remove separator lines from various types of borders
103 | source = source.replace(/^\+-+\+\r?\n/gm, "")
104 | source = source.replace(/^(-|─|═)\1+\r?\n/gm, "")
105 | source = source.replace(/^(├|╟|╠|╞)(─|═)\2*(┤|╢|╣|╡)\r?\n/gm, "")
106 |
107 | // Remove more horizontal lines
108 | source = source.replace(/^\+-+\+\r?\n/gm, "")
109 | source = source.replace(/^└(─)+┘\r?\n/gm, "")
110 | source = source.replace(/^╚(═)+╝\r?\n/gm, "")
111 | source = source.replace(/^┌(─)+┐\r?\n/gm, "")
112 | source = source.replace(/^╔(═)+╗\r?\n/gm, "")
113 |
114 | // Remove quotes around lines, both ' and "
115 | source = source.replace(/^(["'])(.*)\1\r?/gm, "$2")
116 |
117 | // Remove "+" line continuations
118 | // source = source.replace(/\s*\+\r?\n/g, "\n")
119 |
120 | // Remove "↵" line continuations
121 | source = source.replace(/↵\r?/gm, "\n")
122 |
123 | // Remove "query plan" header
124 | source = source.replace(/^\s*QUERY PLAN\s*\r?\n/m, "")
125 |
126 | // Remove rowcount
127 | // example: (8 rows)
128 | // Note: can be translated
129 | // example: (8 lignes)
130 | source = source.replace(/^\(\d+\s+[a-z]*s?\)(\r?\n|$)/gm, "\n")
131 |
132 | return source
133 | }
134 |
135 | public fromSource(source: string) {
136 | source = this.cleanupSource(source)
137 | return this.parseJson(source)
138 | }
139 |
140 | public fromJson(source: string) {
141 | // We need to remove things before and/or after explain
142 | // To do this, first - split explain into lines...
143 | const sourceLines = source.split(/[\r\n]+/)
144 |
145 | // Now, find first line of explain, and cache it's prefix (some spaces ...)
146 | let prefix = ""
147 | let firstLineIndex = 0
148 | _.each(sourceLines, (l: string, index: number) => {
149 | const matches = /^(\s*)(\[|\{)\s*$/.exec(l)
150 | if (matches) {
151 | prefix = matches[1]
152 | firstLineIndex = index
153 | return false
154 | }
155 | })
156 | // now find last line
157 | let lastLineIndex = 0
158 | _.each(sourceLines, (l: string, index: number) => {
159 | const matches = new RegExp("^" + prefix + "(]|})s*$").exec(l)
160 | if (matches) {
161 | lastLineIndex = index
162 | return false
163 | }
164 | })
165 |
166 | const useSource: string = sourceLines
167 | .slice(firstLineIndex, lastLineIndex + 1)
168 | .join("\n")
169 | // Replace two double quotes (added by pgAdmin)
170 | .replace(/""/gm, '"')
171 |
172 | return this.parseJson(useSource)
173 | }
174 |
175 | // Stream parse JSON as it can contain duplicate keys (workers)
176 | public parseJson(source: string) {
177 | const parser = clarinet.parser()
178 | type JsonElement = { [key: string]: JsonElement | null }
179 | const elements: (JsonElement | never[])[] = []
180 | let root: JsonElement | JsonElement[] | null = null
181 | // Store the level and duplicated object|array
182 | let duplicated: [number, JsonElement | null] | null = null
183 | parser.onvalue = (v: JsonElement) => {
184 | const current = elements[elements.length - 1] as JsonElement
185 | if (_.isArray(current)) {
186 | current.push(v)
187 | } else {
188 | const keys = Object.keys(current)
189 | const lastKey = keys[keys.length - 1]
190 | current[lastKey] = v
191 | }
192 | }
193 | parser.onopenobject = (key: string) => {
194 | const o: JsonElement = {}
195 | o[key] = null
196 | elements.push(o)
197 | }
198 | parser.onkey = (key: string) => {
199 | const current = elements[elements.length - 1] as JsonElement
200 | const keys = Object.keys(current)
201 | if (keys.indexOf(key) !== -1) {
202 | duplicated = [elements.length - 1, current[key]]
203 | } else {
204 | current[key] = null
205 | }
206 | }
207 | parser.onopenarray = () => {
208 | elements.push([])
209 | }
210 | parser.oncloseobject = parser.onclosearray = () => {
211 | const popped = elements.pop() as JsonElement
212 |
213 | if (!elements.length) {
214 | root = popped
215 | } else {
216 | const current = elements[elements.length - 1] as JsonElement
217 |
218 | if (duplicated && duplicated[0] === elements.length - 1) {
219 | _.merge(duplicated[1], popped)
220 | duplicated = null
221 | } else {
222 | if (_.isArray(current)) {
223 | current.push(popped)
224 | } else {
225 | const keys = Object.keys(current)
226 | const lastKey = keys[keys.length - 1]
227 | current[lastKey] = popped
228 | }
229 | }
230 | }
231 | }
232 | parser.write(source).close()
233 | if (Array.isArray(root)) {
234 | root = root[0]
235 | }
236 | return root
237 | }
238 |
239 | public splitIntoLines(text: string): string[] {
240 | // Splits source into lines, while fixing (well, trying to fix)
241 | // cases where input has been force-wrapped to some length.
242 | const out: string[] = []
243 | const lines = text.split(/\r?\n/)
244 | const countChar = (str: string, ch: RegExp) => (str.match(ch) || []).length
245 | const closingFirst = (str: string) => {
246 | const closingParIndex = str.indexOf(")")
247 | const openingParIndex = str.indexOf("(")
248 | return closingParIndex != -1 && closingParIndex < openingParIndex
249 | }
250 |
251 | const sameIndent = (line1: string, line2: string) => {
252 | return line1.search(/\S/) == line2.search(/\S/)
253 | }
254 |
255 | _.each(lines, (line: string) => {
256 | if (countChar(line, /\)/g) > countChar(line, /\(/g)) {
257 | // if there more closing parenthesis this means that it's the
258 | // continuation of a previous line
259 | out[out.length - 1] += line
260 | } else if (
261 | line.match(
262 | /^(?:Total\s+runtime|Planning\s+time|Execution\s+time|Time|Filter|Output|JIT)/i
263 | )
264 | ) {
265 | out.push(line)
266 | } else if (
267 | line.match(/^\S/) || // doesn't start with a blank space (allowed only for the first node)
268 | line.match(/^\s*\(/) || // first non-blank character is an opening parenthesis
269 | closingFirst(line) // closing parenthesis before opening one
270 | ) {
271 | if (0 < out.length) {
272 | out[out.length - 1] += line
273 | } else {
274 | out.push(line)
275 | }
276 | } else if (
277 | 0 < out.length &&
278 | out[out.length - 1].match(/^\s*Output/i) &&
279 | !sameIndent(out[out.length - 1], line)
280 | ) {
281 | // If previous line was Output and current line is not same indent
282 | // (which would mean a new information line)
283 | out[out.length - 1] += line
284 | } else {
285 | out.push(line)
286 | }
287 | })
288 | return out
289 | }
290 | }
291 |
--------------------------------------------------------------------------------
/src/components/GridRow.vue:
--------------------------------------------------------------------------------
1 |
89 |
90 |
114 |
122 |
123 | {{ duration(node[NodeProp.ACTUAL_TIME]) }}
124 |
125 | 126 | {{ executionTimePercent }}% 127 | 128 |
129 | 125 | 126 | {{ executionTimePercent }}% 127 | 128 |
144 | {{ node[NodeProp.ACTUAL_ROWS]?.toLocaleString() }}
145 |
146 |
159 |
193 |
166 |
192 |
208 |
216 |
235 |
239 | {{ nodeName }}
240 |
241 |
242 |
243 |
249 | on
250 | {{ node[NodeProp.EXTRA_INFO][NodeProp.RELATION_NAME]
251 | }}{{ node[NodeProp.EXTRA_INFO][NodeProp.FUNCTION_NAME] }}
252 |
253 |
254 |
255 | CTE
256 | {{ node[NodeProp.CTE_NAME] }}
257 |
258 |
259 |
260 | {{ node[NodeProp.JOIN_TYPE] }}
261 | join
262 |
263 |
270 | using
271 | {{ node[NodeProp.EXTRA_INFO][NodeProp.TABLE_INDEX] }}
272 | {{ node[NodeProp.EXTRA_INFO][NodeProp.CTE_INDEX] }}
273 | {{ node[NodeProp.EXTRA_INFO][NodeProp.DELIM_INDEX] }}
274 |
275 |
276 |
277 | 278 |
284 |
341 |
285 |
340 |
289 | {{ node[NodeProp.NODE_TYPE] }} Node
290 |
294 |
295 |
320 |
321 |
339 |
325 |
326 |
328 |
338 |
530 |
565 |
531 |
564 |
532 |
563 | 533 | Couldn't parse plan 534 |
535 |536 | An error occured while parsing the plan 537 |
538 |
539 |
547 |
540 |
545 | 548 | The plan you submited couldn't be parsed. This may be a bug. You can 549 | help us fix it by opening a new issue. 550 |
551 |
552 |
553 |
562 |
570 |
790 |
791 |
792 |
841 |
--------------------------------------------------------------------------------
571 |
616 |
626 |
627 |
628 |
789 |
632 |
633 |
745 |
634 |
744 |
636 |
742 |
743 |
637 |
641 |
646 |
651 |
655 |
739 |
740 |
741 |
659 |
721 |
725 |
738 |
663 |
675 |
689 |
704 |
719 |
720 |
750 |
755 |
751 |
754 |
759 |
768 |
760 |
767 |
761 |
765 |
773 |
782 |
774 |
780 |
775 |
779 |
786 |
788 |