NeoVis.NEOVIS_ADVANCED_CONFIG is not working in react
aizaz-react opened this issue · comments
I wanted to change node into image as documentation here but nothing change.
here is my label config:
labels: {
Character: {
label: '',
value: 'pagerank',
group: 'community',
size: 10,
caption: true,
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
cypher: {
value: 'MATCH (n) WHERE id(n) = $id RETURN n.size '
},
function: {
title: (edge) => {
return viz.nodeToHtml(edge, undefined);
},
static: {
font: '18px',
shape: true,
image: 'https://i.pravatar.cc/300'
}
}
}
}
}how does NeoVis.NEOVIS_ADVANCED_CONFIG work or what is it for?
How did you import NeoVis?
If you imported NeoVis like
import NeoVis from "neovis.js";You need to import NEOVIS_ADVANCED_CONFIG separately like so
import NeoVis, {NEOVIS_ADVANCED_CONFIG} from "neovis.js";And then use it without NeoVis suffix
///Configs
[NEOVIS_ADVANCED_CONFIG]: {
///More configsYes I import Neovis and my graph also looks fine i just wanted to change label node into image
I also tried
import NeoVis, {NEOVIS_ADVANCED_CONFIG} from "neovis.js";
and
///Configs
[NEOVIS_ADVANCED_CONFIG]: {
///More configs
but nothing reflect
Im pretty sure the shape need to be image in order to add image, not true
I tried both "image" and "circularImage" but that technique change overall nodes of graph. My requirement is to target specific label node.
Also
size: 10,
caption: true,Will not work as it also need to be put in static
Anything straight on the config and not on advanced is mapped from the node and true and 10 is most likely not property of the returned node 😅
I tried both "image" and "circularImage" but that technique change overall nodes of graph. My requirement is to target specific label node.
If you need specific label put it in the static of that label instead of visConfig
I'm specifying the static in label if you see my question
So it will only change the shape on that specific label, Im not sure what are you expecting 😅
its not changing 😭
Can you send the updated config and a screenshot of the output if you can?
this is my output graph
const config = {
containerId: 'viz',
neo4j: {
serverUrl: 'bolt://3.238.37.18:7687',
serverUser: 'neo4j',
serverPassword: 'hate-supermarkets-grid'
},
initialCypher: `MATCH p = (:Character)-[:INTERACTS]->(:Character)
RETURN p LIMIT 150
`,
relationships: {
INTERACTS: {
value: 'weight',
caption: true,
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
function: {
title: (edge) => {
edge.color = 'red';
return viz.nodeToHtml(edge, undefined);
},
static: {
value: 1.0
}
}
}
}
},
labels: {
Character: {
label: '',
value: 'pagerank',
group: 'community',
// image: logo,
size: 10,
caption: true,
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
cypher: {
value: 'MATCH (n) WHERE id(n) = $id RETURN n.size '
},
function: {
title: (edge) => {
return viz.nodeToHtml(edge, undefined);
}
},
static: {
// font: '18px',
// shape: true,
// image: logo
color: 'red'
}
}
}
}
};I want the label Character node to be coloured red
And the updated config?
2.0.2
Ahh, they are all the same label?
Color is a bug in vis.js almende/vis#3713
The group color gets set instead (which is random)
And you set group to community
visjs/vis-network#592 or it fixed? Not sure 😅
Btw, you have value set twice both in cypher and mapped and it's undefined behavior which will be set 😅
But the shape should work, are you sure setting that will not work?
🥹what should I do for now can you explain in simple🥲🥹
const config = {
containerId: 'viz',
neo4j: {
serverUrl: 'bolt://3.238.37.18:7687',
serverUser: 'neo4j',
serverPassword: 'hate-supermarkets-grid'
},
initialCypher: `MATCH p = (:Character)-[:INTERACTS]->(:Character)
RETURN p LIMIT 150
`,
relationships: {
INTERACTS: {
value: 'weight',
caption: true,
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
function: {
title: (edge) => {
edge.color = 'red';
return viz.nodeToHtml(edge, undefined);
},
static: {
value: 1.0
}
}
}
}
},
labels: {
Character: {
label: '',
value: 'pagerank',
group: 'community',
// image: logo,
size: 10,
caption: true,
[NeoVis.NEOVIS_ADVANCED_CONFIG]: {
cypher: {
value: 'MATCH (n) WHERE id(n) = $id RETURN n.size '
},
function: {
title: (edge) => {
return viz.nodeToHtml(edge, undefined);
}
},
static: {
font: '18px',
shape: "image",
image: "https://i.pravatar.cc/300"
}
}
}
}
};Send me screenshot so Ill understand what's wrong with that config 😅
can we change color like we try to change node as image?
Ok, the advanced config just doesn't work for some reason
Wait, you again importing the old way? Return to import like I said last time and
const config = {
containerId: 'viz',
neo4j: {
serverUrl: 'bolt://3.238.37.18:7687',
serverUser: 'neo4j',
serverPassword: 'hate-supermarkets-grid'
},
initialCypher: `MATCH p = (:Character)-[:INTERACTS]->(:Character)
RETURN p LIMIT 150
`,
relationships: {
INTERACTS: {
value: 'weight',
caption: true,
[NEOVIS_ADVANCED_CONFIG]: {
function: {
title: (edge) => {
edge.color = 'red';
return objectToTitleHtml(edge, undefined);
},
static: {
value: 1.0
}
}
}
}
},
labels: {
Character: {
label: '',
value: 'pagerank',
group: 'community',
// image: logo,
size: 10,
caption: true,
[NEOVIS_ADVANCED_CONFIG]: {
cypher: {
value: 'MATCH (n) WHERE id(n) = $id RETURN n.size '
},
function: {
title: (edge) => {
return objectToTitleHtml(edge, undefined);
}
},
static: {
font: '18px',
shape: "image",
image: "https://i.pravatar.cc/300"
}
}
}
}
};ok ok
It successfully did not load my graph with this cute error 😅
Uncaught (in promise) TypeError: viz.nodeToHtml is not a function
Change to NeoVis.nodeToHtml
Updated the config above
nodeToHtml is not instance of Neovis
Uncaught (in promise) TypeError: neovis_js__WEBPACK_IMPORTED_MODULE_1___default(...).nodeToHtml is not a function
nodeToHtml is not exported with NeoVis.js
My bad, you copied an old config, you should import also objectToTitleHtml like you imported the advanced and use that
Updated the config above
Uncaught (in promise) Error: Function type property field must be a function
Hey @thebestnom thanks for the being there.
this is my new config and its working perfectly as I want.
const config = {
containerId: 'viz',
neo4j: {
serverUrl: 'bolt://3.238.37.18:7687',
serverUser: 'neo4j',
serverPassword: 'hate-supermarkets-grid'
},
initialCypher: `MATCH p = (:Character)-[:INTERACTS]->(:Character)
RETURN p LIMIT 150
`,
relationships: {
INTERACTS: {
value: 'weight',
caption: true
}
},
labels: {
Character: {
label: '',
value: 'pagerank',
group: 'community',
size: 10,
caption: true,
[NEOVIS_ADVANCED_CONFIG]: {
static: {
font: '18px',
shape: 'box',
color: '#00ff00'
}
}
}
}
};I'm closing this issue.
Sorry for not answering, glad you managed