目的neo4j自带的前端页面无法嵌入到iframe中在vue中实现类似于neo4j的前端页面一样的展示。详细

先从代码输入框入手,找到Editor.jsx文件

/// vim src/modules/Editor/Editor.jsx <EditorButton data-testid='submitQuery' onClick={() => this.execCurrent()} disabled={this.getEditorValue().length < 1} title='Play' icon={controlsPlay} />execCurrent () { this.props.onExecute(this.getEditorValue()) this.clearEditor() this.setState({ notifications: [], historyIndex: -1, buffer: null, expanded: false }) } onExecute: cmd => { const action = executeCommand(cmd) ownProps.bus.send(action.type, action) }

追踪executeCommand函数到commandsDuck.js

/// vim commandsDuck.js// 这个文件定义了很多前后端连接的函数handleCommandEpic() { }

然后是Graph.jsx

initGraphView () { if (!this.graphView) { let NeoConstructor = graphView let measureSize = () => { return { width: this.svgElement.offsetWidth, height: this.getVisualAreaHeight() } } this.graph = createGraph(this.props.nodes, this.props.relationships) this.graphView = new NeoConstructor( this.svgElement, measureSize, this.graph, this.props.graphStyle ) this.graphEH = new GraphEventHandler( this.graph, this.graphView, this.props.getNodeNeighbours, this.props.onItemMouseOver, this.props.onItemSelect, this.props.onGraphModelChange ) this.graphEH.bindEventHandlers() this.props.onGraphModelChange(getGraphStats(this.graph)) this.graphView.resize() this.graphView.update() } }

这个文件中出现了createGraph(this.props.nodes, this.props.relationships)这个重要的语句
追踪relationships到VisualizationView.jsx

populateDataToStateFromProps (props) { const { nodes, relationships } = bolt.extractNodesAndRelationshipsFromRecordsForOldVis( props.result.records )

这个文件中说明了relationshipsnodes的来源
接着是bolt.js

function setupBoltWorker (id, workFn, onLostConnection = () => {}) { const workerPromise = new Promise((resolve, reject) => { const work = boltWorkPool.doWork({ id, payload: workFn, onmessage: msg => { if (msg.data.type === BOLT_CONNECTION_ERROR_MESSAGE) { work.finish() onLostConnection(msg.data.error) return reject(msg.data.error) } if (msg.data.type === CYPHER_ERROR_MESSAGE) { work.finish() reject(msg.data.error) } else if (msg.data.type === CYPHER_RESPONSE_MESSAGE) { work.finish() resolve(addTypesAsField(msg.data.result)) } else if (msg.data.type === POST_CANCEL_TRANSACTION_MESSAGE) { work.finish() } } }) }) return workerPromise}