Skip to content

Commit b345ca4

Browse files
tpetrytpetry
committed
display visual explains 🔮
1 parent ca895d3 commit b345ca4

File tree

11 files changed

+2275
-1748
lines changed

11 files changed

+2275
-1748
lines changed

‎.github/demo.gif

113 KB
Loading

‎.github/demo.mp4

139 KB
Binary file not shown.

‎MysqlExplain.tableplusplugin/manifest.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
{
2-
"name": "MySQL Explain",
3-
"identifier": "com.explainmysql",
4-
"version": "1.0",
5-
"detail": "This plugin helps with analyzing MySQL and MariaDB queries.",
2+
"name": "MySQL Visual Explain",
3+
"identifier": "com.mysqlexplain",
4+
"version": "2.0",
5+
"detail": "This plugin helps with analyzing MySQL queries.",
66
"author": "Tobias Petry",
77
"authorEmail": "[email protected]",
8-
"site": "https://explainmysql.com",
8+
"site": "https://mysqlexplain.com",
99
"scripts": [
1010
{
1111
"location": "main",
1212
"type": "action",
1313
"shortcut": "control+e",
1414
"script": "build/plugin.js",
15-
"name": "Explain SQL"
15+
"name": "Visual Explain SQL"
1616
}
1717
]
1818
}

‎MysqlExplain.tableplusplugin/package-lock.json

+2,168-1,566
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎MysqlExplain.tableplusplugin/package.json

+11-15
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,19 @@
1111
"author": "https://explainmysql.com",
1212
"license": "MIT",
1313
"devDependencies": {
14-
"@babel/core": "^7.22.8",
15-
"@babel/preset-env": "^7.22.7",
16-
"babel-loader": "^9.1.2",
17-
"copy-webpack-plugin": "^11.0.0",
18-
"css-loader": "^6.8.1",
19-
"postcss": "^8.4.25",
20-
"postcss-loader": "^7.3.3",
21-
"postcss-preset-env": "^9.0.0",
22-
"style-loader": "^3.3.3",
23-
"webpack": "^5.88.1",
14+
"@babel/core": "^7.25.2",
15+
"@babel/preset-env": "^7.25.3",
16+
"babel-loader": "^9.1.3",
17+
"copy-webpack-plugin": "^12.0.2",
18+
"css-loader": "^7.1.2",
19+
"postcss": "^8.4.40",
20+
"postcss-loader": "^8.1.1",
21+
"postcss-preset-env": "^9.6.0",
22+
"style-loader": "^4.0.0",
23+
"webpack": "^5.93.0",
2424
"webpack-cli": "^5.1.4"
2525
},
2626
"dependencies": {
27-
"@ryangjchandler/alpine-clipboard": "^2.2.0",
28-
"@ryangjchandler/alpine-tooltip": "^1.2.0",
29-
"alpinejs": "^3.12.3",
30-
"tailwindcss": "^3.3.2",
31-
"tippy.js": "^6.3.7"
27+
"tailwindcss": "^3.3.2"
3228
}
3329
}

‎MysqlExplain.tableplusplugin/plugin/index.js

+7-13
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import { executeQuery } from './helpers';
44

5-
function handleResults(context, sql, resExplainJson, resExplainTraditional, resExplainTree, resVersion, resWarnings) {
6-
for (const res of [resExplainJson, resExplainTraditional, resVersion, resWarnings]) {
5+
function handleResults(context, sql, resExplainJson, resExplainTree, resVersion) {
6+
for (const res of [resExplainJson, resVersion]) {
77
if (res instanceof Error) {
88
context.alert('Error', res.message);
99

@@ -14,20 +14,18 @@ function handleResults(context, sql, resExplainJson, resExplainTraditional, resE
1414
const data = {
1515
query: sql,
1616
version: resVersion[0]?.version,
17-
explain_traditional: resExplainTraditional,
1817
explain_json: resExplainJson[0]?.EXPLAIN,
1918
explain_tree: resExplainTree[0]?.EXPLAIN ?? null,
20-
warnings: resWarnings,
2119
};
2220

2321
context
24-
.loadFile(`${Application.pluginRootPath()}/com.explainmysql.tableplusplugin/build/ui.html`, null)
25-
.evaluate(`submitPlan(${JSON.stringify(data, (_, value) => typeof value === 'undefined' ? null : value)})`);
22+
.loadFile(`${Application.pluginRootPath()}/com.mysqlexplain.tableplusplugin/build/ui.html`, null)
23+
.evaluate(`displayPlan(${JSON.stringify(data, (_, value) => typeof value === 'undefined' ? null : value)})`);
2624
}
2725

2826
global.onRun = function(context) {
29-
if (!['MariaDB', 'MySQL'].includes(context.driver())) {
30-
context.alert('Error', 'Only MySQL and MariaDB databases are supported.');
27+
if (!['MySQL'].includes(context.driver())) {
28+
context.alert('Error', 'Only MySQL databases are supported.');
3129

3230
return;
3331
}
@@ -46,17 +44,13 @@ global.onRun = function(context) {
4644
// current one is finished (indicating sync logic). Therefore, the code needs to be developed in async way but not
4745
// be complicated by pipelining the SQL queries.
4846
let resExplainJson = null;
49-
let resExplainTraditional = null;
5047
let resExplainTree = null;
5148
let resVersion = null;
52-
let resWarnings = null;
5349
executeQuery(context, 'SELECT VERSION() as version ', (res) => resVersion = res);
54-
executeQuery(context, context.driver() === 'MariaDB' ? `EXPLAIN EXTENDED ${sql}` : `EXPLAIN FORMAT=TRADITIONAL ${sql}`, (res) => resExplainTraditional = res);
55-
executeQuery(context, 'SHOW WARNINGS', (res) => resWarnings = res);
5650
executeQuery(context, `EXPLAIN FORMAT=JSON ${sql}`, (res) => resExplainJson = res);
5751
executeQuery(context, `EXPLAIN FORMAT=TREE ${sql}`, (res) => {
5852
resExplainTree = res;
5953

60-
handleResults(context, sql, resExplainJson, resExplainTraditional, resExplainTree, resVersion, resWarnings);
54+
handleResults(context, sql, resExplainJson, resExplainTree, resVersion);
6155
});
6256
};

‎MysqlExplain.tableplusplugin/tailwind.config.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: ['./ui/*.html'],
4-
theme: {
5-
extend: {},
6-
},
7-
plugins: [],
84
}
95

‎MysqlExplain.tableplusplugin/ui/index.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
@import "tippy.js/dist/tippy.css";
2-
31
@tailwind base;
42
@tailwind components;
53
@tailwind utilities;
4+
5+
iframe {
6+
width: 100%;
7+
height: 100%;
8+
}

‎MysqlExplain.tableplusplugin/ui/index.html

+26-94
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,35 @@
11
<!DOCTYPE html>
2-
<html class="h-full">
2+
<html class="h-full w-full">
33
<head>
44
<meta charset="UTF-8">
5-
<script src="./ui.js" defer></script>
6-
<style>
7-
[x-cloak] {
8-
display: none !important;
9-
}
10-
</style>
5+
<script src="./ui.js"></script>
116
</head>
12-
<body class="h-full" x-data x-cloak x-show="true">
13-
<div class="h-full flex justify-center items-center">
14-
<div class="relative isolate">
15-
<div class="absolute inset-x-0 -z-10 transform-gpu overflow-hidden blur-3xl -top-80" aria-hidden="true">
16-
<div class="relative aspect-[1155/678] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 left-[calc(50%-30rem)] w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
17-
</div>
18-
<div>
19-
<div class="mx-auto max-w-7xl px-8">
20-
<div class="mx-auto max-w-[45rem] text-center">
21-
<span class="text-lg font-semibold leading-7 text-indigo-600">More Understandable. Finally :)</span>
22-
<h1 class="mt-2 font-bold tracking-tight text-gray-900 text-6xl">
23-
MySQL EXPLAIN
24-
<span class="relative whitespace-nowrap text-indigo-600">
25-
<svg aria-hidden="true" viewBox="0 0 418 42" class="absolute left-0 top-2/3 h-[0.58em] w-full fill-indigo-300/70" preserveAspectRatio="none">
26-
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
27-
</svg>
28-
<span class="relative">Explained</span>
29-
</span>
30-
</h1>
31-
<div class="mt-6 text-lg leading-8 text-gray-600">
32-
You no longer have to search for cryptic or incomprehensible information for EXPLAIN.<br>
33-
All information has been transformed into data that is easier to grasp.
34-
<ul role="list" class="grid grid-cols-1 gap-6 pt-6 mx-6">
35-
<li class="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
36-
<div class="flex w-full items-center justify-between space-x-6 p-6">
37-
38-
<template x-data x-if="$store.state === 'loading'" hidden>
39-
<div class="flex rounded-md shadow-sm w-full pointer-events-none">
40-
<div class="relative flex flex-grow items-stretch focus-within:z-10">
41-
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
42-
<svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
43-
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
44-
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
45-
</svg>
46-
</div>
47-
<div class="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6 text-left">
48-
<span class="animate-pulse">Loading...</span>
49-
</div>
50-
</div>
51-
<button type="button" class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
52-
<svg class="-ml-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
53-
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
54-
</svg>
55-
Copy
56-
</button>
57-
</div>
58-
</template>
59-
60-
<template x-data x-if="$store.state === 'error'" hidden>
61-
<div class="rounded-md bg-red-50 p-4 text-left w-full">
62-
<div class="flex">
63-
<div class="flex-shrink-0">
64-
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
65-
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
66-
</svg>
67-
</div>
68-
<div class="ml-3">
69-
<h3 class="text-sm font-medium text-red-800" x-text="$store.errorTitle"></h3>
70-
<div class="mt-2 text-sm text-red-700">
71-
<pre class="word-break whitespace-pre-wrap" x-text="$store.errorMessage"></pre>
72-
</div>
73-
</div>
74-
</div>
75-
</div>
76-
</template>
7+
<body class="h-full w-full">
8+
<div id="explain" class="h-full w-full" style="display:none"></div>
779

78-
<template x-data x-if="$store.state === 'success'" hidden>
79-
<div class="flex rounded-md shadow-sm w-full">
80-
<div class="relative flex flex-grow items-stretch focus-within:z-10">
81-
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
82-
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
83-
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
84-
</svg>
85-
</div>
86-
<input type="url" id="url" x-model="$store.url" class="block w-full rounded-none rounded-l-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm leading-6" value="">
87-
</div>
88-
<button type="button" @click="$clipboard($store.url); $tooltip('Copied to Clipboard!', { placement: 'bottom' })" class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
89-
<svg class="-ml-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
90-
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
91-
</svg>
92-
Copy
93-
</button>
94-
</div>
95-
</template>
10+
<div id="loading" class="h-full w-full" style="display:none">
11+
<div class="relative h-full w-full flex flex-col items-center justify-center bg-gray-200 bg-opacity-25">
12+
<svg width="100" height="100" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_P7sC{transform-origin:center;animation:spinner_svv2 .75s infinite linear}@keyframes spinner_svv2{100%{transform:rotate(360deg)}}</style><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_P7sC"/></svg>
13+
<div class="pt-5 text-3xl font-medium">Submitting EXPLAIN plan</div>
14+
</div>
15+
</div>
9616

97-
</div>
98-
</li>
99-
</ul>
100-
<span class="text-xs">Clickable URLs are impossible because of limitations with the TablePlus plugin framework.</span>
17+
<div class="relative h-full w-full" id="error" style="display:none">
18+
<div class="fixed inset-0 bg-gray-200 bg-opacity-25 transition-opacity"></div>
19+
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
20+
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
21+
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
22+
<div class="sm:flex sm:items-start">
23+
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
24+
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
25+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
26+
</svg>
27+
</div>
28+
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
29+
<h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Error</h3>
30+
<div class="mt-2">
31+
<p class="text-sm text-gray-500" id="error-message"></p>
32+
</div>
10133
</div>
10234
</div>
10335
</div>

0 commit comments

Comments
 (0)