1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2026-02-04 15:38:55 +08:00

#132 node opacity

This commit is contained in:
lana-k
2026-01-22 22:25:36 +01:00
parent 7edc196a02
commit 4e5adc147f
8 changed files with 342 additions and 146 deletions

View File

@@ -533,7 +533,8 @@ describe('graphHelper.js', () => {
graphHelper.updateNodes(graph, {
color: {
type: 'constant',
value: '#a1b8c3'
value: '#a1b8c380',
opacity: 50
}
})
expect(graph.export().nodes).to.eql([
@@ -541,14 +542,14 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1 },
color: '#a1b8c3'
color: '#a1b8c340'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2 },
color: '#a1b8c3'
color: '#a1b8c340'
}
}
])
@@ -592,7 +593,7 @@ describe('graphHelper.js', () => {
doc: [
'{"type": 0, "node_id": 1, "color": "red", "points": 5}',
'{"type": 0, "node_id": 2, "color": "#abcdff", "points": 15}',
'{"type": 0, "node_id": 3, "color": "#123456", "points": 10}'
'{"type": 0, "node_id": 3, "color": "#12345680", "points": 10}'
]
}
const graph = new Graph()
@@ -609,7 +610,8 @@ describe('graphHelper.js', () => {
color: {
type: 'variable',
source: 'color',
sourceUsage: 'direct'
sourceUsage: 'direct',
opacity: 50
}
})
expect(graph.export().nodes).to.eql([
@@ -617,21 +619,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#ff0000'
color: '#ff000080'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#abcdff'
color: '#abcdff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#123456'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#12345640'
}
}
])
@@ -644,7 +646,8 @@ describe('graphHelper.js', () => {
sourceUsage: 'map_to',
colorscale,
mode: 'categorical',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 50
}
})
expect(graph.export().nodes).to.eql([
@@ -652,21 +655,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#aaaaff'
color: '#aaaaff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#6666ff'
color: '#6666ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#8888ff'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#8888ff80'
}
}
])
@@ -678,7 +681,8 @@ describe('graphHelper.js', () => {
sourceUsage: 'map_to',
colorscale,
mode: 'categorical',
colorscaleDirection: 'reversed'
colorscaleDirection: 'reversed',
opacity: 50
}
})
@@ -687,21 +691,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#0000ff'
color: '#0000ff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#6666ff'
color: '#6666ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#4444ff'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#4444ff80'
}
}
])
@@ -713,7 +717,8 @@ describe('graphHelper.js', () => {
sourceUsage: 'map_to',
colorscale,
mode: 'continious',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 50
}
})
expect(graph.export().nodes).to.eql([
@@ -721,21 +726,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#aaaaff'
color: '#aaaaff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#0000ff'
color: '#0000ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#6666ff'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#6666ff80'
}
}
])
@@ -747,7 +752,8 @@ describe('graphHelper.js', () => {
sourceUsage: 'map_to',
colorscale,
mode: 'continious',
colorscaleDirection: 'reversed'
colorscaleDirection: 'reversed',
opacity: 50
}
})
@@ -756,21 +762,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#0000ff'
color: '#0000ff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#aaaaff'
color: '#aaaaff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#6666ff'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#6666ff80'
}
}
])
@@ -782,7 +788,8 @@ describe('graphHelper.js', () => {
sourceUsage: 'map_to',
colorscale: ['#aaaaff', '#0000ff'],
mode: 'continious',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 50
}
})
@@ -791,21 +798,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, color: 'red', points: 5 },
color: '#aaaaff'
color: '#aaaaff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, color: '#abcdff', points: 15 },
color: '#0000ff'
color: '#0000ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3, color: '#123456', points: 10 },
color: '#5555ff'
data: { type: 0, node_id: 3, color: '#12345680', points: 10 },
color: '#5555ff80'
}
}
])
@@ -834,7 +841,8 @@ describe('graphHelper.js', () => {
source: 'country',
sourceUsage: 'map_to',
mode: 'continious',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 100
}
})
expect(graph.export().nodes).to.eql([
@@ -842,14 +850,14 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1, country: 'NL' },
color: '#000000'
color: '#000000ff'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2, country: 'GB' },
color: '#000000'
color: '#000000ff'
}
}
])
@@ -887,15 +895,15 @@ describe('graphHelper.js', () => {
expect(graph.export().edges.map(edge => edge.attributes)).to.eql([
{
data: { type: 1, source: 1, target: 2, color: 'red', weight: 5 },
color: '#ff0000'
color: '#ff0000ff'
},
{
data: { type: 1, source: 1, target: 3, color: 'red', weight: 15 },
color: '#ff0000'
color: '#ff0000ff'
},
{
data: { type: 1, source: 2, target: 3, color: 'red', weight: 10 },
color: '#ff0000'
color: '#ff0000ff'
}
])
@@ -914,15 +922,15 @@ describe('graphHelper.js', () => {
expect(graph.export().edges.map(edge => edge.attributes)).to.eql([
{
data: { type: 1, source: 1, target: 2, color: 'red', weight: 5 },
color: '#aaaaff'
color: '#aaaaffff'
},
{
data: { type: 1, source: 1, target: 3, color: 'red', weight: 15 },
color: '#6666ff'
color: '#6666ffff'
},
{
data: { type: 1, source: 2, target: 3, color: 'red', weight: 10 },
color: '#8888ff'
color: '#8888ffff'
}
])
@@ -940,15 +948,15 @@ describe('graphHelper.js', () => {
expect(graph.export().edges.map(edge => edge.attributes)).to.eql([
{
data: { type: 1, source: 1, target: 2, color: 'red', weight: 5 },
color: '#0000ff'
color: '#0000ffff'
},
{
data: { type: 1, source: 1, target: 3, color: 'red', weight: 15 },
color: '#6666ff'
color: '#6666ffff'
},
{
data: { type: 1, source: 2, target: 3, color: 'red', weight: 10 },
color: '#4444ff'
color: '#4444ffff'
}
])
@@ -966,15 +974,15 @@ describe('graphHelper.js', () => {
expect(graph.export().edges.map(edge => edge.attributes)).to.eql([
{
data: { type: 1, source: 1, target: 2, color: 'red', weight: 5 },
color: '#aaaaff'
color: '#aaaaffff'
},
{
data: { type: 1, source: 1, target: 3, color: 'red', weight: 15 },
color: '#0000ff'
color: '#0000ffff'
},
{
data: { type: 1, source: 2, target: 3, color: 'red', weight: 10 },
color: '#6666ff'
color: '#6666ffff'
}
])
@@ -992,15 +1000,15 @@ describe('graphHelper.js', () => {
expect(graph.export().edges.map(edge => edge.attributes)).to.eql([
{
data: { type: 1, source: 1, target: 2, color: 'red', weight: 5 },
color: '#0000ff'
color: '#0000ffff'
},
{
data: { type: 1, source: 1, target: 3, color: 'red', weight: 15 },
color: '#aaaaff'
color: '#aaaaffff'
},
{
data: { type: 1, source: 2, target: 3, color: 'red', weight: 10 },
color: '#6666ff'
color: '#6666ffff'
}
])
})
@@ -1035,7 +1043,8 @@ describe('graphHelper.js', () => {
method: 'degree',
colorscale,
mode: 'categorical',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 50
}
})
expect(graph.export().nodes).to.eql([
@@ -1043,21 +1052,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1 },
color: '#aaaaff'
color: '#aaaaff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2 },
color: '#8888ff'
color: '#8888ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3 },
color: '#8888ff'
color: '#8888ff80'
}
}
])
@@ -1068,7 +1077,8 @@ describe('graphHelper.js', () => {
method: 'outDegree',
colorscale,
mode: 'categorical',
colorscaleDirection: 'reversed'
colorscaleDirection: 'reversed',
opacity: 50
}
})
@@ -1077,21 +1087,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1 },
color: '#0000ff'
color: '#0000ff80'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2 },
color: '#4444ff'
color: '#4444ff80'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3 },
color: '#0000ff'
color: '#0000ff80'
}
}
])
@@ -1102,7 +1112,8 @@ describe('graphHelper.js', () => {
method: 'degree',
colorscale,
mode: 'continious',
colorscaleDirection: 'normal'
colorscaleDirection: 'normal',
opacity: 100
}
})
expect(graph.export().nodes).to.eql([
@@ -1110,21 +1121,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1 },
color: '#aaaaff'
color: '#aaaaffff'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2 },
color: '#0000ff'
color: '#0000ffff'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3 },
color: '#0000ff'
color: '#0000ffff'
}
}
])
@@ -1135,7 +1146,8 @@ describe('graphHelper.js', () => {
method: 'degree',
colorscale,
mode: 'continious',
colorscaleDirection: 'reversed'
colorscaleDirection: 'reversed',
opacity: 100
}
})
@@ -1144,21 +1156,21 @@ describe('graphHelper.js', () => {
key: '1',
attributes: {
data: { type: 0, node_id: 1 },
color: '#0000ff'
color: '#0000ffff'
}
},
{
key: '2',
attributes: {
data: { type: 0, node_id: 2 },
color: '#aaaaff'
color: '#aaaaffff'
}
},
{
key: '3',
attributes: {
data: { type: 0, node_id: 3 },
color: '#aaaaff'
color: '#aaaaffff'
}
}
])

View File

@@ -18,7 +18,7 @@ describe('storedInquiries.js', () => {
expect(inquiries).to.eql([])
})
it('getStoredInquiries migrate and returns inquiries of v1', () => {
it('getStoredInquiries migrates and returns inquiries of v1', () => {
localStorage.setItem(
'myQueries',
JSON.stringify([
@@ -55,6 +55,113 @@ describe('storedInquiries.js', () => {
])
})
it('getStoredInquiries migrates and returns inquiries of v2', () => {
localStorage.setItem(
'myInquiries',
JSON.stringify({
version: 2,
inquiries: [
{
id: 'Xh1Hc9v7P3mRPZVM59QiC',
query: 'SELECT * from doc',
viewType: 'graph',
viewOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
nodes: {
size: { type: 'constant', value: 10 },
color: {
type: 'calculated',
method: 'degree',
colorscale: null,
mode: 'continious',
colorscaleDirection: 'reversed'
},
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: 'circular', options: null }
},
name: 'student graph',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
},
{
id: 'Yh1Hc9v7P3mRPZVM59QiD',
query: 'SELECT * from test',
viewType: 'chart',
viewOptions: 'some chart view options',
name: 'student chart',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
}
]
})
)
const inquiries = storedInquiries.getStoredInquiries()
expect(inquiries).to.eql([
{
id: 'Xh1Hc9v7P3mRPZVM59QiC',
query: 'SELECT * from doc',
viewType: 'graph',
viewOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
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: 'circular', options: null }
},
name: 'student graph',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
},
{
id: 'Yh1Hc9v7P3mRPZVM59QiD',
query: 'SELECT * from test',
viewType: 'chart',
viewOptions: 'some chart view options',
name: 'student chart',
updatedAt: '2026-01-19T21:49:40.708Z',
createdAt: '2026-01-19T21:46:13.899Z'
}
])
})
it('updateStorage and getStoredInquiries', () => {
const data = [{ id: 1 }, { id: 2 }]
storedInquiries.updateStorage(data)
@@ -136,7 +243,7 @@ describe('storedInquiries.js', () => {
const str = storedInquiries.serialiseInquiries(inquiryList)
const parsedJson = JSON.parse(str)
expect(parsedJson.version).to.equal(2)
expect(parsedJson.version).to.equal(3)
expect(parsedJson.inquiries).to.have.lengthOf(2)
expect(parsedJson.inquiries[1]).to.eql(inquiryList[1])
expect(parsedJson.inquiries[0]).to.eql({
@@ -215,7 +322,7 @@ describe('storedInquiries.js', () => {
it('deserialiseInquiries generates new id to avoid duplication', () => {
storedInquiries.updateStorage([{ id: 1 }])
const str = `{
"version": 2,
"version": 3,
"inquiries": [
{
"id": 1,
@@ -275,7 +382,7 @@ describe('storedInquiries.js', () => {
it('importInquiries', async () => {
const str = `{
"version": 2,
"version": 3,
"inquiries": [{
"id": 1,
"name": "foo",
@@ -327,7 +434,7 @@ describe('storedInquiries.js', () => {
it('readPredefinedInquiries', async () => {
const str = `{
"version": 2,
"version": 3,
"inquiries": [
{
"id": 1,