Skip to content

Migrate to react #2

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
92hackers wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Migrate to react #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a345524
code optimize
92hackers Mar 13, 2022
848cccf
code optimize
92hackers Mar 13, 2022
9075a0c
code optimize for multi files
92hackers Mar 13, 2022
3aa0a06
extract text parser out from plan-service file
92hackers Mar 14, 2022
ccbbac6
extract json parser out from plan-service file
92hackers Mar 14, 2022
ae6d8b3
simplify plan component
92hackers Mar 14, 2022
a40fb00
refactor plan node component
92hackers Mar 14, 2022
4c45b70
refactor plan node component
92hackers Mar 15, 2022
54ba787
refactor plan node component
92hackers Mar 15, 2022
1d4d271
refactor plan component
92hackers Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
"lint": "vue-cli-service lint",
"build": "vue-cli-service build --target lib --name pev2 ./src/components/Plan.vue && EXTRACT_CSS=true vue-cli-service build --target lib --name pev2 ./src/components/Plan.vue --dest ./dist/components && cp -R ./src/assets/scss ./dist/scss",
"build-app": "vue-cli-service build --dest dist-app",
"test:unit": "jest",
"snyk-protect": "snyk protect",
"prepare": "npm run snyk-protect"
"test:unit": "jest"
},
"dependencies": {
"@types/dragscroll": "0.0.0",
Expand All @@ -27,6 +25,7 @@
"@types/moment-duration-format": "^2.2.3",
"bootstrap": "^4.6.0",
"clarinet": "^0.12.3",
"classnames": "^2.3.1",
"core-js": "^3.16.0",
"highlight.js": "^10.7.2",
"jquery": "^3.6.0",
Expand Down Expand Up @@ -60,7 +59,6 @@
"prettier": "2.0.5",
"raw-loader": "^4.0.2",
"sass-loader": "^8.0.0",
"snyk": "^1.334.0",
"ts-jest": "^25.2.0",
"typescript": "^3.6.3",
"vue-jest": "^3.0.5",
Expand Down Expand Up @@ -102,6 +100,5 @@
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
},
"snyk": true
}
}
3 changes: 2 additions & 1 deletion src/assets/scss/_plan-node.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
$compact-width: 50px;
$bg-color: #fff;

.plan-node {
user-select: none;
text-decoration: none;
color: $text-color;
display: inline-block;
Expand Down Expand Up @@ -255,7 +257,6 @@ ul.node-children.collapsed {
display: none;
}
}

.classic .plan & li::before {
top: 7px;
}
Expand Down
0 src/assets/scss/_pev2.scss → src/assets/scss/global.scss
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions src/components/Diagram.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
</th>
</tr>
<template v-for="row, index in flat">
<tr v-if="row[1][nodeProps.SUBPLAN_NAME]">
<tr v-if="row[1][nodeProps.SUBPLAN_NAME]" v-bind:key="index">
<td v-if="!isCTE(row[1])"></td>
<td
class="subplan pr-2"
Expand All @@ -80,13 +80,13 @@
</tr>
<tr
class="no-focus-outline node"
v-bind:key="index"
:class="{'selected': row[1].nodeId === selected, 'highlight': row[1].nodeId === highlightedNode}"
:data-tippy-content="getTooltipContent(row[1])"
@mouseenter="eventBus.$emit('mouseovernode', row[1].nodeId)"
@mouseleave="eventBus.$emit('mouseoutnode', row[1].nodeId)"
:ref="'node_' + row[1].nodeId"
>

>
<td class="node-index">
<a class="font-weight-normal small" :href="'#plan/node/' + row[1].nodeId" @click>#{{row[1].nodeId}}</a>
</td>
Expand Down
82 changes: 56 additions & 26 deletions src/components/Plan.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
<li class="nav-item p-1">
<a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'plan' }" href="#plan">Plan</a>
</li>
<li class="nav-item p-1">
<!-- <li class="nav-item p-1">
<a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'raw' }" href="#raw">Raw</a>
</li>
<li class="nav-item p-1">
<a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'query', 'disabled': !queryText }" href="#query">Query</a>
</li>
<li class="nav-item p-1">
</li> -->
<!-- <li class="nav-item p-1">
<a class="nav-link px-2 py-0" :class="{'active' : activeTab === 'stats' }" href="#stats">Stats</a>
</li>
</li> -->
</ul>
</div>

Expand Down Expand Up @@ -125,7 +125,8 @@
<div class="flex-grow-1 d-flex overflow-hidden">
<div class="flex-grow-1 overflow-hidden">
<splitpanes class="default-theme" @resize="viewOptions.diagramWidth = $event[0].size">
<pane

<!-- <pane
:size="viewOptions.diagramWidth"
class="d-flex"
v-if="viewOptions.showDiagram"
Expand All @@ -140,17 +141,28 @@
<slot name="nodeindex" v-bind:node="node"></slot>
</template>
</diagram>
</pane>
</pane> -->

<pane ref="plan" class="plan d-flex flex-column flex-grow-1 grab-bing overflow-auto">
<!-- Main Plan -->
<ul class="main-plan p-2 mb-0">
<li>
<plan-node :node="rootNode" :plan="plan" :viewOptions="viewOptions" :eventBus="eventBus" ref="root">
<plan-node
:node="rootNode"
:plan="plan"
:viewOptions="viewOptions"
:eventBus="eventBus"
:onMouseOverNode="onMouseOverNode"
:onMouseOutNode="onMouseOutNode"
ref="root"
>
<template v-slot:nodeindex="{ node }">
<slot name="nodeindex" v-bind:node="node"></slot>
</template>
</plan-node>
</li>
</ul>
<!-- CTE plans -->
<ul class="init-plans p-2 mb-0" v-if="plan.ctes.length">
<li v-for="node in plan.ctes">
<plan-node :node="node" :plan="plan" :viewOptions="viewOptions" :eventBus="eventBus" ref="root">
Expand All @@ -161,7 +173,9 @@
</li>
</ul>
</pane>

</splitpanes>

</div>
<div class="small p-2 border-left" v-if="plan && !viewOptions.menuHidden">
<div class="text-right clearfix">
Expand Down Expand Up @@ -200,18 +214,36 @@
<label class="text-uppercase">Graph metric</label>
<div class="form-group">
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary" :class="{'active': viewOptions.highlightType === highlightTypes.NONE}" v-on:click="viewOptions.highlightType = highlightTypes.NONE">none</button>
<button class="btn btn-outline-secondary" :class="{'active': viewOptions.highlightType === highlightTypes.DURATION}" v-on:click="viewOptions.highlightType = highlightTypes.DURATION" :disabled="!plan.isAnalyze">duration</button>
<button class="btn btn-outline-secondary" :class="{'active': viewOptions.highlightType === highlightTypes.ROWS}" v-on:click="viewOptions.highlightType = highlightTypes.ROWS" :disabled="rootNode[nodeProps.ACTUAL_ROWS] === undefined">rows</button>
<button class="btn btn-outline-secondary" :class="{'active': viewOptions.highlightType === highlightTypes.COST}" v-on:click="viewOptions.highlightType = highlightTypes.COST">cost</button>
<button
class="btn btn-outline-secondary"
:class="{'active': viewOptions.highlightType === highlightTypes.NONE}"
v-on:click="viewOptions.highlightType = highlightTypes.NONE"
>none</button>
<button
class="btn btn-outline-secondary"
:class="{'active': viewOptions.highlightType === highlightTypes.DURATION}"
v-on:click="viewOptions.highlightType = highlightTypes.DURATION"
:disabled="!plan.isAnalyze"
>duration</button>
<button
class="btn btn-outline-secondary"
:class="{'active': viewOptions.highlightType === highlightTypes.ROWS}"
v-on:click="viewOptions.highlightType = highlightTypes.ROWS"
:disabled="rootNode[nodeProps.ACTUAL_ROWS] === undefined"
>rows</button>
<button
class="btn btn-outline-secondary"
:class="{'active': viewOptions.highlightType === highlightTypes.COST}"
v-on:click="viewOptions.highlightType = highlightTypes.COST"
>cost</button>
</div>
</div>
</div>
</div>
<!-- end Plan tab -->
</div>
</div>
<div class="tab-pane flex-grow-1 overflow-hidden position-relative" :class="{'show active': activeTab === 'raw' }">
<!-- <div class="tab-pane flex-grow-1 overflow-hidden position-relative" :class="{'show active': activeTab === 'raw' }">
<div class="overflow-hidden d-flex w-100 h-100">
<div class="overflow-auto flex-grow-1">
<pre class="small p-2 mb-0"><code v-html="$options.filters.json(planSource)"></code></pre>
Expand All @@ -226,13 +258,13 @@
</div>
</div>
<copy :content="queryText" />
</div>
<div class="tab-pane flex-grow-1 overflow-auto" :class="{'show active': activeTab === 'stats' }">
</div> -->
<!-- <div class="tab-pane flex-grow-1 overflow-auto" :class="{'show active': activeTab === 'stats' }">
<stats
:plan="plan"
>
</stats>
</div>
</div> -->
</div>
</div>
</template>
Expand All @@ -244,9 +276,9 @@ import { Splitpanes, Pane } from 'splitpanes';

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import PlanNode from '@/components/PlanNode.vue';
import Copy from '@/components/Copy.vue';
import Diagram from '@/components/Diagram.vue';
import Stats from '@/components/Stats.vue';
// import Copy from '@/components/Copy.vue';
// import Diagram from '@/components/Diagram.vue';
// import Stats from '@/components/Stats.vue';
import { HelpService, scrollChildIntoParentView } from '@/services/help-service';
import { PlanService } from '@/services/plan-service';
import { cost, duration, durationClass, json, pgsql, rows } from '@/filters';
Expand All @@ -263,12 +295,12 @@ Vue.component('tippy', TippyComponent);
@Component({
name: 'plan',
components: {
Copy,
Diagram,
// Copy,
// Diagram,
Pane,
PlanNode,
Splitpanes,
Stats,
// Stats,
},
directives: {
},
Expand All @@ -285,7 +317,7 @@ export default class Plan extends Vue {
public $refs!: {
plan: InstanceType<typeof Pane>,
root: PlanNode,
diagram: InstanceType<typeof Diagram>,
// diagram: InstanceType<typeof Diagram>,
};

@Prop(String) private planSource!: string;
Expand Down Expand Up @@ -335,8 +367,6 @@ export default class Plan extends Vue {

private mounted(): void {
this.handleScroll();
this.eventBus.$on('mouseovernode', this.onMouseOverNode);
this.eventBus.$on('mouseoutnode', this.onMouseOutNode);
this.eventBus.$on('clickcte', this.centerCTE);
}

Expand Down Expand Up @@ -561,7 +591,7 @@ export default class Plan extends Vue {
if (cmp) {
cmp.selected = true;
}
this.$refs.diagram.selected = newVal;
// this.$refs.diagram.selected = newVal;

cmp = this.findPlanNode((o: PlanNode) => o.node.nodeId === oldVal);
if (cmp) {
Expand All @@ -577,5 +607,5 @@ export default class Plan extends Vue {
@import '~highlight.js/styles/github.css';

@import '../assets/scss/variables';
@import '../assets/scss/pev2';
@import '../assets/scss/global';
</style>
Loading