Commit ecc6cdf8 authored by Abinaya Sudhir's avatar Abinaya Sudhir

Graph explore design is done

parents 33af3069 9e8fbd42
......@@ -32,3 +32,15 @@
background-color : blue;
color: white;
}
#toolbar ul li
{ margin-right : 19px;
}
#horizontal-checkbox ul li
{ display : inline;
float : left;
margin-top: 12px;
margin-right : 21px;
}
div#ge-container {
position: fixed;
top: 70px;
bottom: 0;
left: 0;
right: 300px;
z-index: 1;
/* non selectable: we've got our own events here */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* Chrome and Opera, future + */
}
div#ge-toolbar {
position: fixed;
right: 300px;
bottom: 0;
z-index: 1000;
margin: 10px;
}
......@@ -10,6 +10,7 @@
<!-- <link href="css/lavish-bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<link href="css/Login.css" rel="stylesheet">
<link href="css/ReactGraphExplorer.css" rel="stylesheet">
<style>
* {margin: 0; padding: 0; list-style: none;}
.tree ul li {
......
#!/bin/sh
# README
#
# You can source this file and use the commands defined below:
#
# . ./docker-env.sh
# setup
# dev
dockerrun(){
P=/app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
sudo docker run -u "$UID" -e PATH="$P" -v $PWD:/app -w /app "$@"
}
unalias npm bower pulp &>/dev/null || :
unset npm bower pulp &>/dev/null || :
npm(){
dockerrun node npm "$@"
}
bower(){
dockerrun node bower "$@"
}
pulp(){
dockerrun node pulp "$@"
}
setup(){
npm install &&
npm install --no-save purescript pulp bower &&
bower install
}
build(){
pulp browserify --to dist/bundle.js
}
dev(){
build &&
(cd dist && python -mSimpleHTTPServer)
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
var React = require('react');
var PropTypes = require('prop-types');
var graphExplorer = require('graph-explorer');
console.log(graphExplorer);
const GraphExplorer = graphExplorer.default;
class ReactGraphExplorer extends React.Component {
constructor(props) {
super(props);
this.ge = new GraphExplorer(props.settings, props.handlers);
this.state = { graph: props.graph, mode: props.mode };
this.initRenderer = this.initRenderer.bind(this);
}
componentWillReceiveProps(nextProps) {
console.log(this.ge);
if (nextProps.graph) {
this.setState({ graph: nextProps.graph }, () => {
this.ge.loadGraph(this.state.graph);
this.ge.clusterize();
this.ge.spatialize();
});
}
this.setState({ mode: nextProps.mode }, () => {
this.ge.sigma.settings('mode', this.state.mode);
});
}
initRenderer(container) {
this.ge.addRenderer(container);
}
render() {
return React.createElement('div', { id: 'ge-container', ref: this.initRenderer }, null);
}
}
ReactGraphExplorer.propTypes = {
graph: PropTypes.shape({
nodes: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
label: PropTypes.string,
x: PropTypes.number,
y: PropTypes.number,
size: PropTypes.number,
type: PropTypes.string,
attributes: PropTypes.object // TODO(lucas): Specify this further.
})
).isRequired,
edges: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired,
source: PropTypes.string.isRequired,
target: PropTypes.string.isRequired,
weight: PropTypes.number // NOTE(lucas): required?
}).isRequired
)
}),
settings: PropTypes.shape({
// TODO(lucas)
}),
mode: PropTypes.string,
handlers: PropTypes.shape({
overNode: PropTypes.func,
outNode: PropTypes.func,
clickNode: PropTypes.func,
doubleClickNode: PropTypes.func,
rightClickNode: PropTypes.func,
overEdge: PropTypes.func,
outEdge: PropTypes.func,
clickEdge: PropTypes.func,
doubleClickEdge: PropTypes.func,
rightClickEdge: PropTypes.func,
clickStage: PropTypes.func,
doubleClickStage: PropTypes.func,
rightClickStage: PropTypes.func
})
};
export default ReactGraphExplorer;
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
......@@ -2653,6 +2653,18 @@ react-echarts-v3@^1.0.14:
element-resize-detector latest
lodash latest
<<<<<<< HEAD
=======
"react-graph-explorer@git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#7f6d19396b694c70162f63b2f3e456eb14644928":
version "0.1.0"
resolved "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#7f6d19396b694c70162f63b2f3e456eb14644928"
dependencies:
graph-explorer "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git"
prop-types "^15.6.0"
react "^16.2.0"
react-dom "^16.2.0"
>>>>>>> 9e8fbd4253ca1375e51692f03ec32d5ea4f5cac1
react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment