Skip to content
This repository was archived by the owner on Oct 10, 2025. It is now read-only.

Commit 4757542

Browse files
mewims-illly
mewim
and
s-illly
authored
Sync next -> master (#318)
* Migrate to G6 v5 (#298) Co-authored-by: Lint Bot <mewim@users.noreply.github.com> * Fix schema view node renaming (#301) * Enhance edge activation logic by checking for placeholder relationships * Fix renaming for node * Resolve race conditions in async graph rendering (#302) * Lazy render schema view (#303) * Lazy render schema view * Linter * Fix fitToView for result graph (#304) * Fix show all button (#308) * Maximize mode container resizes with window (#307) * Maximize mode container resizes with window * Remove table resize * Fix race condition in schema graph rendering (#310) * Nodes render on top of edges (#309) * Nodes render on top of edges * Remove zindex on active state * Fit to view not covered by sidebar (#312) * Fit to view not covered by sidebar * Remove fitcenter * Highlight on first click (#311) * First click highlight * Highlight edits * Query layout and aesthetic changes (#314) * Fixed right sidepanel (#317) * Fix linter --------- Co-authored-by: Lint Bot <mewim@users.noreply.github.com> Co-authored-by: Lily Song <lilyapples696@gmail.com>
1 parent c65b036 commit 4757542

16 files changed

Lines changed: 2128 additions & 1585 deletions

‎babel.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
module.exports = {
22
presets: [
33
'@vue/cli-plugin-babel/preset'
4+
],
5+
plugins: [
6+
'@babel/plugin-transform-private-methods'
47
]
58
}

‎package-lock.json‎

Lines changed: 915 additions & 566 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"eslint-fix": "eslint --ext .js,.vue src --fix"
1717
},
1818
"dependencies": {
19-
"@antv/g6": "^4.8.24",
19+
"@antv/g6": "^5.0.49",
2020
"@duckdb/duckdb-wasm": "1.29.0",
2121
"@popperjs/core": "^2.11.8",
2222
"antlr4-c3": "3.2.3",
@@ -45,6 +45,7 @@
4545
},
4646
"devDependencies": {
4747
"@babel/core": "^7.12.16",
48+
"@babel/plugin-transform-private-methods": "^7.27.1",
4849
"@vue/cli-plugin-babel": "~5.0.0",
4950
"@vue/cli-plugin-eslint": "^5.0.8",
5051
"@vue/cli-plugin-typescript": "~5.0.0",

‎src/components/MainLayout.vue‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
@click="accessModeModal.show()"
2929
>Instructions</span>
3030
</li>
31-
</ul>
31+
</ul>
3232
<div class="main-layout__sidebar-header flex justify-between items-center">
3333
<a
3434
class="navbar-brand hide-on-collapse"
@@ -42,7 +42,7 @@
4242
class="main-layout__sidebar-logo"
4343
>
4444
</a>
45-
45+
4646
<a
4747
class="menu-toggle"
4848
@click="toggleSidebar"
@@ -51,8 +51,8 @@
5151
:class="['fa-solid', isSidebarCollapsed ? 'fa-angle-right' : 'fa-angle-left']"
5252
aria-hidden="true"
5353
/>
54-
</a>
55-
</div>
54+
</a>
55+
</div>
5656
<hr>
5757
</li>
5858

@@ -102,7 +102,7 @@
102102
<span class="hide-on-collapse">Import</span>
103103
</a>
104104
</li>
105-
105+
106106
<li class="nav-item">
107107
<a
108108
aria-hidden="true"
@@ -144,6 +144,7 @@
144144
ref="schemaView"
145145
:schema="schema"
146146
:navbar-height="0"
147+
:is-visible="showSchema"
147148
@reload-schema="reloadSchema"
148149
@add-placeholder-node-table="addPlaceholderNodeTable"
149150
@add-placeholder-rel-table="addPlaceholderRelTable"
@@ -199,7 +200,8 @@
199200
<div class="modal-body">
200201
<div v-if="modeStore.isDemo">
201202
<p>
202-
This WebAssembly-powered demo of <a href="https://kuzudb.com/">Kuzu</a> lets you import and query graph data using
203+
This WebAssembly-powered demo of <a href="https://kuzudb.com/">Kuzu</a> lets you import and query graph
204+
data using
203205
<a
204206
href="https://docs.kuzudb.com/cypher/"
205207
target="_blank"
@@ -334,7 +336,12 @@ export default {
334336
storedSettings = this.loadSettingsFromLocalStorage();
335337
}
336338
this.initSettings(this.schema, storedSettings);
337-
this.$refs.schemaView.drawGraph();
339+
if (this.$refs.schemaView && this.showSchema) {
340+
this.$nextTick(() => {
341+
this.$refs.schemaView.initializeGraph();
342+
});
343+
}
344+
338345
},
339346
methods: {
340347
handleHashChange() {
@@ -359,7 +366,7 @@ export default {
359366
default:
360367
// If no valid hash, default to shell view
361368
if (!this.showSchema && !this.showImporter && !this.showLoader && !this.showSettings) {
362-
this.toggleShell();
369+
this.toggleShell();
363370
}
364371
break;
365372
}
@@ -384,12 +391,12 @@ export default {
384391
// show the modal and set the cookie.
385392
const wasmModalSeen = this.getCookie('wasmModalSeen');
386393
if (this.modeStore.isDemo && !wasmModalSeen) {
387-
this.accessModeModal.show();
388-
this.setCookie('wasmModalSeen', 'true', 365); // Set cookie for 365 days
389-
this.toggleImporter(true);
394+
this.accessModeModal.show();
395+
this.setCookie('wasmModalSeen', 'true', 365); // Set cookie for 365 days
396+
this.toggleImporter(true);
390397
} else if (this.modeStore.isDemo) {
391398
// If in demo mode but WASM modal has been seen, still go to importer view
392-
this.toggleImporter(true);
399+
this.toggleImporter(true);
393400
}
394401
});
395402
},
@@ -402,7 +409,7 @@ export default {
402409
async reloadSchema() {
403410
await this.getSchema();
404411
this.handleSchemaReload(this.schema);
405-
this.$refs.schemaView.handleSettingsChange();
412+
this.$refs.schemaView.redrawGraph(true);
406413
},
407414
addPlaceholderNodeTable(tableName) {
408415
this.schema.nodeTables.push({
@@ -436,17 +443,20 @@ export default {
436443
table.connectivity = newTable.connectivity;
437444
}
438445
},
439-
setPlaceholder(name) {
440-
let table = this.schema.nodeTables.find((t) => t.name === name);
441-
if (table) {
442-
table.isPlaceholder = true;
443-
this.setPlaceholderNodeTable(name);
444-
return;
445-
}
446-
table = this.schema.relTables.find((t) => t.name === name);
447-
if (table) {
448-
table.isPlaceholder = true;
449-
this.setPlaceholderRelTable(name);
446+
setPlaceholder({ name, isNode }) {
447+
if (isNode) {
448+
const table = this.schema.nodeTables.find((t) => t.name === name);
449+
if (table) {
450+
table.isPlaceholder = true;
451+
this.setPlaceholderNodeTable(name);
452+
return;
453+
}
454+
} else {
455+
const table = this.schema.relTables.find((t) => t.name === name);
456+
if (table) {
457+
table.isPlaceholder = true;
458+
this.setPlaceholderRelTable(name);
459+
}
450460
}
451461
},
452462
unsetPlaceholder({ originalLabel, isNode }) {
@@ -466,7 +476,7 @@ export default {
466476
this.unsetPlaceholderRelTable(originalLabel);
467477
}
468478
this.$nextTick(() => {
469-
this.$refs.schemaView.handleSettingsChange();
479+
this.$refs.schemaView.redrawGraph();
470480
});
471481
},
472482
hideAll() {
@@ -528,7 +538,7 @@ export default {
528538
getCookie(name) {
529539
const nameEQ = name + "=";
530540
const ca = document.cookie.split(';');
531-
for(let i = 0; i < ca.length; i++) {
541+
for (let i = 0; i < ca.length; i++) {
532542
let c = ca[i];
533543
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
534544
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
@@ -553,21 +563,10 @@ export default {
553563
}
554564
555565
/* Scrollbar styling */
556-
::-webkit-scrollbar {
557-
width: 8px;
558-
}
559-
560-
::-webkit-scrollbar-track {
561-
background: var(--bs-body-bg);
562-
}
563-
564-
::-webkit-scrollbar-thumb {
565-
background: var(--bs-body-inactive);
566-
border-radius: 4px;
567-
}
568-
569-
::-webkit-scrollbar-thumb:hover {
570-
background: var(--bs-body-bg-accent);
566+
body {
567+
scrollbar-gutter: stable both-edges;
568+
scrollbar-width: thin;
569+
scrollbar-color: var(--bs-body-bg-accent) var(--bs-body-bg);
571570
}
572571
573572
.main-layout__sidebar,
@@ -581,9 +580,10 @@ export default {
581580
body {
582581
overflow-x: hidden;
583582
}
583+
584584
.main-layout__sidebar-logo {
585-
height: 28px;
586-
image-rendering: crisp-edges;
585+
height: 28px;
586+
image-rendering: crisp-edges;
587587
}
588588
589589
.wrapper {
@@ -628,7 +628,7 @@ body {
628628
}
629629
}
630630
631-
.nav-item{
631+
.nav-item {
632632
padding-left: 10px;
633633
padding-top: 4px;
634634
}
@@ -680,7 +680,7 @@ body {
680680
padding: 10px 0;
681681
682682
.nav-item {
683-
padding-left: 14px;
683+
padding-left: 14px;
684684
}
685685
}
686686
}
@@ -698,26 +698,26 @@ body {
698698
}
699699
700700
.wrapper.toggled .main-layout__sidebar-nav li a {
701-
justify-content: center;
702-
padding: 8px 0;
701+
justify-content: center;
702+
padding: 8px 0;
703703
}
704704
705705
.wrapper.toggled .main-layout__sidebar-nav li i {
706-
margin-right: 0;
706+
margin-right: 0;
707707
}
708708
709709
.wrapper.toggled .menu-toggle {
710-
display: flex;
711-
justify-content: center;
712-
align-items: center;
713-
width: 100%;
710+
display: flex;
711+
justify-content: center;
712+
align-items: center;
713+
width: 100%;
714714
}
715715
716716
.wrapper.toggled .main-layout__sidebar-header .navbar-brand {
717-
display: none;
717+
display: none;
718718
}
719719
720-
.badge {
720+
.badge {
721721
margin-left: 4px;
722722
margin-top: 4px;
723723
background-color: var(--bs-body-bg-accent);
@@ -740,14 +740,14 @@ body {
740740
display: flex;
741741
align-items: center;
742742
cursor: pointer;
743-
743+
744744
button {
745745
background: none;
746746
border: none;
747747
color: var(--bs-body-text);
748748
padding: 0;
749749
transition: transform 0.3s ease;
750-
750+
751751
&:hover {
752752
opacity: 0.7;
753753
}

‎src/components/SchemaView/SchemaSidebarEditView.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,8 @@
145145
v-if="property.isPrimaryKey"
146146
class="badge bg-[var(--bs-body-accent)]"
147147
:style="{ textShadow: '-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000', color: '#FFFFFF', }"
148-
> PK </span>
148+
>
149+
PK </span>
149150
</td>
150151
<td v-if="i !== editingPropertyIndex">
151152
{{ property.type }}
@@ -260,7 +261,7 @@ export default {
260261
if (!this.isEditingLabel && newLabel !== this.label) {
261262
this.isEditingLabel = true;
262263
this.oldLabel = this.label;
263-
this.$emit("setPlaceholder", this.label);
264+
this.$emit("setPlaceholder", { label: this.label, isNode: this.isNode });
264265
}
265266
if (this.isEditingLabel) {
266267
if (newLabel === this.oldLabel) {
@@ -397,10 +398,10 @@ export default {
397398
</script>
398399

399400
<style scoped lang="scss">
400-
401401
.schema-side-panel__edit-table-name-container {
402402
max-width: 50px;
403403
}
404+
404405
.schema_side-panel__edit-table-actions-container {
405406
width: 100%;
406407
}

0 commit comments

Comments
 (0)