Skip to content

Commit

Permalink
graph overview 1/?
Browse files Browse the repository at this point in the history
  • Loading branch information
@mboudet
mboudet committed Feb 27, 2023
1 parent 5680073 commit 26356a9
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 29 deletions.
6 changes: 3 additions & 3 deletions askomics/react/src/navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,17 @@ export default class AskoNavbar extends Component {
let links
let askLink
let aboutLink
let overviewLink

// if wait is false
if (!this.props.waitForStart) {
askLink = (
<NavItem><Link className="nav-link" to="/"><i className="fas fa-play"></i> Ask!</Link></NavItem>
)

overViewLink = (
overviewLink = (
<NavItem><Link className="nav-link" to="/overview"><i className="fas fa-play"></i> Overview</Link></NavItem>
)

let contactLink
if (this.props.config.contactMessage){
contactLink = (
Expand Down Expand Up @@ -116,7 +116,7 @@ export default class AskoNavbar extends Component {
<Collapse navbar>
<Nav className="ml-auto" navbar>
{askLink}
{overViewLink}
{overviewLink}
{links}
</Nav>
</Collapse>
Expand Down
4 changes: 2 additions & 2 deletions askomics/react/src/routes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import Results from './routes/results/results'
import AskoNavbar from './navbar'
import AskoFooter from './footer'
import Contact from './contact'
import Overview from './routes/overview'
import Overview from './routes/overview/overview'

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'
import 'bootstrap/dist/css/bootstrap.min.css'
Expand Down Expand Up @@ -131,7 +131,7 @@ export default class Routes extends Component {
<Route path="/prefixes" exact component={() => (<Prefixes config={this.state.config} waitForStart={this.state.waiting} setStateNavbar={p => this.setState(p)} />)} />
<Route path="/ontologies" exact component={() => (<Ontologies config={this.state.config} waitForStart={this.state.waiting} setStateNavbar={p => this.setState(p)} />)} />
<Route path="/query" exact component={Query} />
<Route path="/overview" exact component={Overview} />
<Route path="/overview" exact component={ () => (<Overview config={this.state.config} waitForStart={this.state.waiting} setStateNavbar={p => this.setState(p)} />)} />
<Route path="/form" exact component={FormQuery} />
<Route path="/form_edit" exact component={FormEditQuery} />
<Route path="/results" exact component={() => (<Results config={this.state.config} waitForStart={this.state.waiting} />)} />
Expand Down
70 changes: 49 additions & 21 deletions askomics/react/src/routes/overview/overview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,39 @@ import ErrorDiv from '../error/error'
import WaitingDiv from '../../components/waiting'
import update from 'react-addons-update'
import Utils from '../../classes/utils'
import PropTypes from 'prop-types'
import { ForceGraph2D, ForceGraph3D } from 'react-force-graph';
import { SizeMe } from 'react-sizeme';
import SpriteText from 'three-spritetext';


export default class Overview extends Component {

constructor (props) {
super(props)
this.utils = new Utils()
this.state = {
config: this.props.location.state.config,
abstraction: [],
graphState: {
nodes: [],
edges: []
links: []
},
}
this.cancelRequest
}


initGraph() {
let nodes = this.state.abstraction.entities.map(entity => {
return {id: entity.uri, name: entity.label, value: 1, color: this.Utils.stringToHexColor(entity.uri)}
return {id: entity.uri, name: entity.label, value: 1, color: this.utils.stringToHexColor(entity.uri)}
})

let edges = this.state.abstraction.relations.map(link =>{
return {source: link.source, link.target}
let links = this.state.abstraction.relations.map(link => {
if (link.source == link.target){console.log(link)}
return {source: link.source, target: link.target, name: link.label}
})

this.setState({
graphState: {nodes: nodes, edges: edges}
graphState: {nodes: nodes, links: links}
})
}

Expand All @@ -44,7 +48,7 @@ export default class Overview extends Component {
componentDidMount () {
if (!this.props.waitForStart) {
let requestUrl = '/api/query/abstraction'
axios.get(requestUrl, { baseURL: this.state.config.proxyPath, cancelToken: new axios.CancelToken((c) => { this.cancelRequest = c }) })
axios.get(requestUrl, { baseURL: this.props.config.proxyPath, cancelToken: new axios.CancelToken((c) => { this.cancelRequest = c }) })
.then(response => {
console.log(requestUrl, response.data)
this.setState({
Expand Down Expand Up @@ -73,29 +77,53 @@ export default class Overview extends Component {
}

render () {
let visualizationDiv
if (!this.state.waiting) {
// visualization (left view)
visualizationDiv = (
<ForceGraph3D graphData={this.state.graphState}/>
)
}

return (
<div className="container">
{redirectLogin}
<h2>Abstraction visualization</h2>
<hr />
<WaitingDiv waiting={this.state.waiting} center />
<br />
{visualizationDiv}
<ErrorDiv status={this.state.status} error={this.state.error} errorMessage={this.state.errorMessage} customMessages={{"504": "Query time is too long, use Run & Save to get your results", "502": "Query time is too long, use Run & Save to get your results"}} />
<SizeMe>{({ size: { width } }) => (
<ForceGraph3D
graphData={this.state.graphState}
width={width}
height={650}
linkDirectionalArrowRelPos={1}
linkDirectionalArrowLength={3.5}
nodeThreeObject={node => {
const sprite = new SpriteText(node.name);
sprite.color = node.color;
sprite.textHeight = 4;
return sprite;
}}
nodeThreeObjectExtend={true}
linkThreeObjectExtend={true}
linkThreeObject={link => {
// extend link with text sprite
const sprite = new SpriteText(link.name);
sprite.color = 'lightgrey';
sprite.textHeight = 1.5;
return sprite;
}}
linkPositionUpdate={(sprite, { start, end }) => {
const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
[c]: start[c] + (end[c] - start[c]) /2 // calc middle point
})));
// Position sprite
Object.assign(sprite.position, middlePos);
}}
/>


)}
</SizeMe>
<ErrorDiv status={this.state.status} error={this.state.error} errorMessage={this.state.errorMessage}/>
</div>
)
}
}

Overview.propTypes = {
location: PropTypes.object,
waitForStart: PropTypes.bool
waitForStart: PropTypes.bool,
config: PropTypes.object
}
10 changes: 7 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-standard": "^4.0.1",
"npm-check-updates": "^16.3.4",
"npm-check-updates": "^16.3.4"
"terser-webpack-plugin": "^4.2.2",
"webpack": "^5.74.0",
"webpack-cli": "^3.3.12"
Expand All @@ -54,23 +54,27 @@
"qs": "^6.10.3",
"react": "^16.13.1",
"react-ace": "^9.1.3",
"react-autosuggest": "^10.1.0",
"react-addons-update": "^15.6.3",
"react-autosuggest": "^10.1.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-contextmenu": "^2.14.0",
"react-dom": "^16.13.1",
"react-datepicker": "^3.6.0",
"react-dom": "^16.13.1",
"react-force-graph": "^1.39.2",
"react-force-graph-3d": "^1.22.0",
"react-resize-detector": "^5.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-simple-code-editor": "^0.11.0",
"react-sizeme": "^3.0.2",
"react-syntax-highlighter": "^15.4.3",
"react-tooltip": "^4.2.21",
"reactstrap": "^8.6.0",
"style-loader": "^1.2.1",
"three": "^0.150.1",
"three-spritetext": "^1.6.5",
"url-loader": "^4.1.0"
}
}

0 comments on commit 26356a9

Please sign in to comment.