Skip to content

Commit 18e1293

Browse files
dpgiakatosdpgiakatos
committed
add color picker
1 parent 7094366 commit 18e1293

File tree

3 files changed

+100
-74
lines changed

3 files changed

+100
-74
lines changed

‎src/components/OutputPanel.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,14 @@ const handleNodeUnexpanded = ({ removedNodeIds, removedRelIds, expandedState })
9292
}
9393
9494
const handleNodeDeleted = ({ removedNodeIds, removedRelIds }) => {
95-
nodes.value = nodes.value.filter((n) => !removedNodeIds.includes(n.id))
9695
nodes.value = nodes.value.filter((n) => !removedNodeIds.includes(n.id))
9796
relationships.value = relationships.value.filter((r) => !removedRelIds.includes(r.id))
9897
}
9998
99+
const updateNodeProperties = (updatedNodes) => {
100+
nodes.value = updatedNodes
101+
}
102+
100103
const changeTab = (tabName) => {
101104
tab.value = tabName
102105
}
@@ -166,11 +169,12 @@ onMounted(() => {
166169
<GraphOutput
167170
:nodes="nodes"
168171
:relationships="relationships"
169-
:expandedNodesState="expandedNodesState"
170-
:disableResizer="GlobalVariables.disableGraphOverviewPanelResizer"
172+
:expanded-nodes-state="expandedNodesState"
173+
:disable-resizer="GlobalVariables.disableGraphOverviewPanelResizer"
171174
@nodeExpanded="handleNodeExpanded"
172175
@nodeUnexpanded="handleNodeUnexpanded"
173176
@nodeDeleted="handleNodeDeleted"
177+
@updateNodeProperties="updateNodeProperties"
174178
/>
175179
</q-tab-panel>
176180
<q-tab-panel name="table" v-if="rows.length" class="output-tab-panel">

‎src/components/output/GraphOutput.vue‎

Lines changed: 92 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import interact from 'interactjs'
1313
1414
const Neo4jApi = inject('Neo4jApi')
1515
const GlobalVariables = inject('GlobalVariables')
16-
const emit = defineEmits(['nodeExpanded', 'nodeUnexpanded', 'nodeDeleted'])
16+
const emit = defineEmits(['nodeExpanded', 'nodeUnexpanded', 'nodeDeleted', 'updateNodeProperties'])
1717
const props = defineProps(['nodes', 'relationships', 'expandedNodesState', 'disableResizer'])
1818
1919
const q = useQuasar()
@@ -166,6 +166,19 @@ const nodeDeletion = (nodeId) => {
166166
})
167167
}
168168
169+
const nodeColorChange = ({ type, color }) => {
170+
const nodes = nvl.getNodes().map((v) => {
171+
if (v.type === type) {
172+
v.color = color
173+
}
174+
return v
175+
})
176+
177+
nvl.addAndUpdateElementsInGraph(nodes)
178+
179+
emit('updateNodeProperties', nodes)
180+
}
181+
169182
const isNodeExpanded = (nodeId) => {
170183
return expandedNodesMap.value.has(nodeId)
171184
}
@@ -366,79 +379,88 @@ onUnmounted(() => {
366379
</q-menu>
367380
</div>
368381
<div class="overview" ref="overview">
369-
<q-card class="overview-card">
370-
<q-bar class="fixed-top overview-bar">
371-
<div class="row justify-between" style="width: 100%">
372-
<q-btn icon="zoom_in" flat square color="white" @click="zoomIn" />
373-
<q-btn icon="zoom_out" flat square color="white" @click="zoomOut" />
374-
<q-btn icon="center_focus_strong" flat square color="white" @click="reset" />
375-
<q-btn :icon="hideOverviewBtnIcon" flat square color="white" @click="hideOverview" />
376-
</div>
377-
</q-bar>
378-
<q-card-section style="padding-top: 0" v-if="!hideOverviewBtn">
379-
<div class="fixed-top overview-info">
380-
<div v-if="selectedElement.nodeOrRelationship === 'node'">
381-
<div class="text-subtitle1">Node properties</div>
382-
<q-badge
383-
rounded
384-
:label="selectedElement.type"
385-
text-color="black"
386-
:style="`background-color: ${selectedElement.color};`"
387-
/>
382+
<q-card class="overview-card">
383+
<q-bar class="fixed-top overview-bar">
384+
<div class="row justify-between" style="width: 100%">
385+
<q-btn icon="zoom_in" flat square color="white" @click="zoomIn" />
386+
<q-btn icon="zoom_out" flat square color="white" @click="zoomOut" />
387+
<q-btn icon="center_focus_strong" flat square color="white" @click="reset" />
388+
<q-btn :icon="hideOverviewBtnIcon" flat square color="white" @click="hideOverview" />
388389
</div>
389-
<div v-else-if="selectedElement.nodeOrRelationship === 'relationship'">
390-
<div class="text-subtitle1">Relationship properties</div>
391-
<q-badge
392-
:label="selectedElement.type"
393-
text-color="white"
394-
style="background-color: #848484"
395-
/>
396-
</div>
397-
<div v-else>
398-
<div class="text-subtitle1">Overview</div>
399-
<div class="text-subtitle2">Node labels</div>
400-
<div>
401-
<span
402-
class="q-mr-sm"
403-
v-for="(node, index) in nodes
404-
.map((el) => ({ type: el.type, color: el.color }))
405-
.filter(
406-
(value, index, self) => index === self.findIndex((t) => t.type === value.type)
407-
)"
408-
:key="index"
409-
>
410-
<q-badge
411-
:label="node.type"
412-
text-color="black"
413-
:style="`background-color: ${node.color};`"
414-
/>
415-
</span>
390+
</q-bar>
391+
<q-card-section style="padding-top: 0" v-if="!hideOverviewBtn">
392+
<div class="fixed-top overview-info">
393+
<div v-if="selectedElement.nodeOrRelationship === 'node'">
394+
<div class="text-subtitle1">Node properties</div>
395+
<q-badge
396+
rounded
397+
:label="selectedElement.type"
398+
text-color="black"
399+
:style="`background-color: ${selectedElement.color};`"
400+
/>
401+
</div>
402+
<div v-else-if="selectedElement.nodeOrRelationship === 'relationship'">
403+
<div class="text-subtitle1">Relationship properties</div>
404+
<q-badge
405+
:label="selectedElement.type"
406+
text-color="white"
407+
style="background-color: #848484"
408+
/>
416409
</div>
417-
<div class="text-subtitle2">Relationship types</div>
418-
<div>
419-
<span
420-
class="q-mr-sm"
421-
v-for="(relType, index) in [...new Set(relationships.map((el) => el.type))]"
422-
:key="index"
423-
>
424-
<q-badge :label="relType" text-color="white" style="background-color: #848484" />
425-
</span>
410+
<div v-else>
411+
<div class="text-subtitle1">Overview</div>
412+
<div class="text-subtitle2">Node labels</div>
413+
<div>
414+
<span
415+
class="q-mr-sm"
416+
v-for="(node, index) in nodes
417+
.map((el) => ({ type: el.type, color: el.color }))
418+
.filter(
419+
(value, index, self) => index === self.findIndex((t) => t.type === value.type)
420+
)"
421+
:key="index"
422+
>
423+
<q-badge
424+
:label="node.type"
425+
text-color="black"
426+
:style="`background-color: ${node.color};`"
427+
>
428+
<q-popup-proxy>
429+
<q-color
430+
v-model="node.color"
431+
@change="nodeColorChange(node)"
432+
no-header-tabs
433+
no-footer
434+
/>
435+
</q-popup-proxy>
436+
</q-badge>
437+
</span>
438+
</div>
439+
<div class="text-subtitle2">Relationship types</div>
440+
<div>
441+
<span
442+
class="q-mr-sm"
443+
v-for="(relType, index) in [...new Set(relationships.map((el) => el.type))]"
444+
:key="index"
445+
>
446+
<q-badge :label="relType" text-color="white" style="background-color: #848484" />
447+
</span>
448+
</div>
426449
</div>
427450
</div>
428-
</div>
429-
<q-markup-table flat wrap-cells dense>
430-
<thead></thead>
431-
<tbody>
432-
<tr v-for="(property, key, index) in properties" :key="index">
433-
<td class="text-bold text-left overview-property-key">
434-
{{ key }}
435-
</td>
436-
<td class="text-left overview-property-value">{{ property }}</td>
437-
</tr>
438-
</tbody>
439-
</q-markup-table>
440-
</q-card-section>
441-
</q-card>
451+
<q-markup-table flat wrap-cells dense>
452+
<thead></thead>
453+
<tbody>
454+
<tr v-for="(property, key, index) in properties" :key="index">
455+
<td class="text-bold text-left overview-property-key">
456+
{{ key }}
457+
</td>
458+
<td class="text-left overview-property-value">{{ property }}</td>
459+
</tr>
460+
</tbody>
461+
</q-markup-table>
462+
</q-card-section>
463+
</q-card>
442464
</div>
443465
</div>
444466
</template>

‎src/plugins/GlobalVariables.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const GlobalVariables = {
44
outputPanelHeight: 580,
55
graphOverviewPanelWidth: 250,
66
disableOutputPanelResizer: false,
7-
disableGraphOverviewPanelResizer: false,
7+
disableGraphOverviewPanelResizer: false
88
}
99
app.provide('GlobalVariables', GlobalVariables)
1010
}

0 commit comments

Comments
 (0)