zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2026-05-06 20:09:18 +08:00
Code Issues Projects Releases Wiki Activity

Add seed layout #136

Browse Source
This commit is contained in:
lana-k
2026-04-05 17:39:28 +02:00
parent 62fb92d824
commit d9435a80c3
12 changed files with 785 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
tests/lib/graphHelper.spec.js
View File

@@ -2,6 +2,7 @@ import { expect } from 'chai'
import sinon from 'sinon'
import * as graphHelper from '@/lib/graphHelper'
import Graph from 'graphology'
import { random } from 'graphology-layout'
describe('graphHelper.js', () => {
afterEach(() => {
@@ -1231,7 +1232,11 @@ describe('graphHelper.js', () => {
}
}
const nodeData = { color: '#FF0000CC', label: 'Node label' }
const nodeData = {
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue'
}
let interactionState = {
selectedNodeId: 'node-1',
@@ -1249,6 +1254,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'black',
zIndex: 2,
highlighted: true,
forceLabel: true
@@ -1258,6 +1264,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'black',
zIndex: 2,
highlighted: true,
forceLabel: true
@@ -1268,6 +1275,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1278,6 +1286,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1288,6 +1297,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#3300cc',
label: '',
labelColor: 'blue',
zIndex: 1,
highlighted: false
})
@@ -1308,6 +1318,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'black',
zIndex: 2,
highlighted: true,
forceLabel: true
@@ -1318,6 +1329,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1328,6 +1340,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1338,6 +1351,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1348,6 +1362,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#3300cc',
label: '',
labelColor: 'blue',
zIndex: 1,
highlighted: false
})
@@ -1368,6 +1383,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1377,6 +1393,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1386,6 +1403,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1395,6 +1413,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1405,6 +1424,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#3300cc',
label: '',
labelColor: 'blue',
zIndex: 1,
highlighted: false
})
@@ -1425,6 +1445,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1434,6 +1455,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'black',
zIndex: 2,
highlighted: true,
forceLabel: true
@@ -1443,6 +1465,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1452,6 +1475,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#FF0000CC',
label: 'Node label',
labelColor: 'blue',
zIndex: 2,
highlighted: false,
forceLabel: true
@@ -1462,6 +1486,7 @@ describe('graphHelper.js', () => {
).to.eql({
color: '#3300cc',
label: '',
labelColor: 'blue',
zIndex: 1,
highlighted: false
})
@@ -1481,32 +1506,37 @@ describe('graphHelper.js', () => {
graphHelper.reduceNodes('node-1', nodeData, interactionState, settings)
).to.eql({
color: '#FF0000CC',
label: 'Node label'
label: 'Node label',
labelColor: 'blue'
})
expect(
graphHelper.reduceNodes('node-2', nodeData, interactionState, settings)
).to.eql({
color: '#FF0000CC',
label: 'Node label'
label: 'Node label',
labelColor: 'blue'
})
expect(
graphHelper.reduceNodes('node-1.1', nodeData, interactionState, settings)
).to.eql({
color: '#FF0000CC',
label: 'Node label'
label: 'Node label',
labelColor: 'blue'
})
expect(
graphHelper.reduceNodes('node-2.1', nodeData, interactionState, settings)
).to.eql({
color: '#FF0000CC',
label: 'Node label'
label: 'Node label',
labelColor: 'blue'
})
expect(
graphHelper.reduceNodes('node-3', nodeData, interactionState, settings)
).to.eql({
color: '#FF0000CC',
label: 'Node label'
label: 'Node label',
labelColor: 'blue'
})
})
@@ -2193,4 +2223,40 @@ describe('graphHelper.js', () => {
)
).to.eql(edgeData)
})
it('clearNodeCoordinates', () => {
const dataSources = {
doc: [
'{"type": 0, "node_id": 1, "label": "cat"}',
'{"type": 0, "node_id": 2, "label": "dog"}'
]
}
const graph = new Graph()
const options = {
structure: {
nodeId: 'node_id',
objectType: 'type',
edgeSource: null,
edgeTarget: null
}
}
graphHelper.buildNodes(graph, dataSources, options)
random.assign(graph)
graphHelper.clearNodeCoordinates(graph)
expect(graph.export().nodes).to.eql([
{
key: '1',
attributes: {
data: { type: 0, node_id: 1, label: 'cat' }
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, label: 'dog' }
}
}
])
})
})

167
tests/lib/storedInquiries/_migrations.spec.js
View File

@@ -82,7 +82,22 @@ describe('_migrations.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
createdAt: '2021-05-07T11:05:50.877Z'
}
@@ -130,7 +145,155 @@ describe('_migrations.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialAlgorithm: 'circular',
seedValue: 1,
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
createdAt: '2021-05-07T11:05:50.877Z'
}
])
})
it('migrates from version 3 to the current', () => {
const oldInquiries = [
{
id: '123',
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: { here_are: 'foo chart settings' },
createdAt: '2021-05-06T11:05:50.877Z'
},
{
id: '456',
name: 'bar',
query: 'SELECT * FROM bar',
viewType: 'graph',
viewOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
highlightMode: 'node_and_neighbors',
nodes: {
size: { type: 'constant', value: 10 },
color: {
type: 'calculated',
method: 'degree',
colorscale: null,
mode: 'continious',
colorscaleDirection: 'reversed',
opacity: 100
},
label: { source: 'label', color: '#444444' }
},
edges: {
showDirection: true,
size: { type: 'constant', value: 2 },
color: { type: 'constant', value: '#a2b1c6' },
label: { source: null, color: '#a2b1c6' }
}
},
layout: {
type: 'forceAtlas2',
options: {
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
createdAt: '2021-05-07T11:05:50.877Z'
}
]
expect(migrations._migrate(3, oldInquiries)).to.eql([
{
id: '123',
name: 'foo',
query: 'SELECT * FROM foo',
viewType: 'chart',
viewOptions: { here_are: 'foo chart settings' },
createdAt: '2021-05-06T11:05:50.877Z'
},
{
id: '456',
name: 'bar',
query: 'SELECT * FROM bar',
viewType: 'graph',
viewOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
highlightMode: 'node_and_neighbors',
nodes: {
size: { type: 'constant', value: 10 },
color: {
type: 'calculated',
method: 'degree',
colorscale: null,
mode: 'continious',
colorscaleDirection: 'reversed',
opacity: 100
},
label: { source: 'label', color: '#444444' }
},
edges: {
showDirection: true,
size: { type: 'constant', value: 2 },
color: { type: 'constant', value: '#a2b1c6' },
label: { source: null, color: '#a2b1c6' }
}
},
layout: {
type: 'forceAtlas2',
options: {
initialAlgorithm: 'circular',
seedValue: 1,
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
createdAt: '2021-05-07T11:05:50.877Z'
}

118
tests/lib/storedInquiries/storedInquiries.spec.js
View File

@@ -92,9 +92,24 @@ describe('storedInquiries.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
name: 'student graph',
name: 'student graph FA2',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
},
@@ -145,9 +160,26 @@ describe('storedInquiries.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialAlgorithm: 'circular',
seedValue: 1,
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
name: 'student graph',
name: 'student graph FA2',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
},
@@ -244,7 +276,7 @@ describe('storedInquiries.js', () => {
const str = storedInquiries.serialiseInquiries(inquiryList)
const parsedJson = JSON.parse(str)
expect(parsedJson.version).to.equal(3)
expect(parsedJson.version).to.equal(4)
expect(parsedJson.inquiries).to.have.lengthOf(2)
expect(parsedJson.inquiries[1]).to.eql(inquiryList[1])
expect(parsedJson.inquiries[0]).to.eql({
@@ -339,7 +371,22 @@ describe('storedInquiries.js', () => {
"label": { "source": null, "color": "#a2b1c6" }
}
},
"layout": { "type": "circular", "options": null }
"layout": {
"type": "forceAtlas2",
"options": {
"initialIterationsAmount": 50,
"adjustSizes": false,
"barnesHutOptimize": false,
"barnesHutTheta": 0.5,
"edgeWeightInfluence": 0,
"gravity": 1,
"linLogMode": false,
"outboundAttractionDistribution": false,
"scalingRatio": 1,
"slowDown": 1,
"strongGravityMode": false
}
}
},
"name": "student graph",
"createdAt": "2026-01-19T21:46:13.899Z"
@@ -391,7 +438,24 @@ describe('storedInquiries.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialAlgorithm: 'circular',
seedValue: 1,
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
name: 'student graph',
createdAt: '2026-01-19T21:46:13.899Z'
@@ -486,7 +550,7 @@ describe('storedInquiries.js', () => {
it('importInquiries', async () => {
const str = `{
"version": 3,
"version": 4,
"inquiries": [{
"id": 1,
"name": "foo",
@@ -579,7 +643,22 @@ describe('storedInquiries.js', () => {
"label": { "source": null, "color": "#a2b1c6" }
}
},
"layout": { "type": "circular", "options": null }
"layout": {
"type": "forceAtlas2",
"options": {
"initialIterationsAmount": 50,
"adjustSizes": false,
"barnesHutOptimize": false,
"barnesHutTheta": 0.5,
"edgeWeightInfluence": 0,
"gravity": 1,
"linLogMode": false,
"outboundAttractionDistribution": false,
"scalingRatio": 1,
"slowDown": 1,
"strongGravityMode": false
}
}
},
"name": "student graph",
"createdAt": "2026-01-19T21:46:13.899Z"
@@ -632,7 +711,24 @@ describe('storedInquiries.js', () => {
label: { source: null, color: '#a2b1c6' }
}
},
layout: { type: 'circular', options: null }
layout: {
type: 'forceAtlas2',
options: {
initialAlgorithm: 'circular',
seedValue: 1,
initialIterationsAmount: 50,
adjustSizes: false,
barnesHutOptimize: false,
barnesHutTheta: 0.5,
edgeWeightInfluence: 0,
gravity: 1,
linLogMode: false,
outboundAttractionDistribution: false,
scalingRatio: 1,
slowDown: 1,
strongGravityMode: false
}
}
},
name: 'student graph',
createdAt: '2026-01-19T21:46:13.899Z'
@@ -642,7 +738,7 @@ describe('storedInquiries.js', () => {
it('readPredefinedInquiries', async () => {
const str = `{
"version": 3,
"version": 4,
"inquiries": [
{
"id": 1,