graphExplorer

1e5fbdae · Sudhir Kumar · bec1f38a · 1e5fbdae · 1e5fbdae · 1e5fbdae
Commit 1e5fbdae authored May 07, 2018 by Sudhir Kumar
9 changed files
--- a/.babelrc
+++ b/.babelrc
+{
+    "presets": ["es2015"]
+
+}
--- a/dist/index.html
+++ b/dist/index.html
@@ -37,7 +37,7 @@
             content: " ";
             position: absolute;
             width: 1px;
-             background-color: #000;
+             background-color: "#000";
             top: 5px;
             bottom: 7px;
             height: 7px;
@@ -49,12 +49,10 @@
             left: -10px;
             width: 10px;
             height: 1px;
-             background-color: #000;
+             background-color: "#000";
             top: 12px;
         }
 	      </style>
-
-
    </head>
    <body>
        <div id="app" class ="container"></div>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
-  "dependencies": {
-    "create-react-class": "^15.6.2",
-    "echarts": "^3.8.5",
-    "echarts-for-react": "^2.0.0",
-    "prop-types": "15.6.0",
-    "react": "^16.2.0",
-    "react-addons-css-transition-group": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-echarts-v3": "^1.0.14"
-  }
+    "dependencies": {
+        "create-react-class": "^15.6.2",
+        "echarts": "^3.8.5",
+        "echarts-for-react": "^2.0.0",
+        "imports-loader": "^0.7.1",
+        "prop-types": "15.6.0",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
+        "react-echarts-v3": "^1.0.14",
+        "sigma": "^1.2.1",
+        "graph-explorer": "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git"
+    },
+    "browserify": {
+        "transform": [
+            [
+                "babelify",
+                {
+                    "presets": [
+                        "es2015",
+                        "stage-0",
+                        "react"
+                    ]
+                }
+            ]
+        ]
+    },
+    "babel": {
+        "presets": [
+            "es2015",
+            "stage-0",
+            "react"
+        ]
+    },
+    "devDependencies": {
+        "babel-core": "^6.26.0",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-react": "^6.24.1",
+        "babel-preset-stage-0": "^6.24.1",
+        "babel-runtime": "^6.26.0",
+        "babelify": "^8.0.0"
+    }
 }
--- a/src/GraphExplorer.js
+++ b/src/GraphExplorer.js
--- a/src/GraphExplorer.purs
+++ b/src/GraphExplorer.purs
 module GraphExplorer where

-import React.DOM (button, button', div, form', input, li', menu, text, ul, ul')
-import React.DOM.Props (_id, _type, className, name, placeholder, value)
-import Thermite (Spec, defaultPerformAction, simpleSpec)
+import Prelude hiding (div)

-newtype State = State {mode :: String}
+import Control.Monad.Aff (runAff)
+import Control.Monad.Aff.Class (liftAff)
+import Control.Monad.Aff.Console (CONSOLE)
+import Control.Monad.Cont.Trans (lift)
+import Control.Monad.Eff (Eff)
+import Control.Monad.Eff.Class (liftEff)
+import Control.Monad.Eff.Console (log)
+import DOM (DOM)
+import DOM.File.FileReader (fileReader, readAsText, result)
+import DOM.File.Types (File, fileToBlob)
+import React (ReactClass, createElement)
+import React.DOM (button, button', div, form', input, li, li', menu, text, ul')
+import React.DOM.Props (_id, _type, className, name, onChange, onClick, placeholder, style, value)
+import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)

-data Action = NoOp
+foreign import data GraphData :: Type
+
+foreign import initialGraph :: GraphData
+
+foreign import initialFile :: File
+
+foreign import getFile :: forall e. e -> File
+
+foreign import parseJSON :: forall eff a. a -> Eff eff GraphData
+
+foreign import graphExplorerComponent :: ReactClass {graph :: GraphData, mode :: String}
+
+foreign import logger :: forall a eff. a -> Eff eff Unit
+
+newtype State = State {mode :: String, graph :: GraphData, file :: File}
+
+data Action
+  = SetGraph
+  | SetFile File

 initialState :: State
-initialState = State {mode : "select"}
+initialState = State {mode : "select", graph : initialGraph, file : initialFile}
+
+
+reader :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) GraphData
+reader f = do
+  fr <- fileReader
+  readAsText (fileToBlob f) fr
+  res <- result fr
+  --log $ show res
+  let da = parseJSON res
+  logger da
+  da

-spec :: forall eff props. Spec eff State props Action
-spec = simpleSpec defaultPerformAction render
+
+spec :: forall eff props. Spec (console :: CONSOLE, dom :: DOM | eff) State props Action
+spec = simpleSpec performAction render
  where
-    render _ _ _ _ =
+    render :: Render State props Action
+    render d _ (State st) _ =
      [  div [className "row"] [
            div [className "col-md-12"]
            [ menu [_id "toolbar"]
              [ ul'
-                [ li'
+                [ li [style {display : "inline-block"}]
                  [ form'
-                    [ input [_type "file", name "file", value ""] []
-                    , input [_type "submit", value "submit"] []
+                    [ input [_type "file", name "file", onChange (\e -> d $ SetFile $ getFile e)] []
+                    , input [_type "button", value "submit", onClick \_ -> d SetGraph] []
                    ]
                  ]
                , li'
@@ -48,12 +90,24 @@ spec = simpleSpec defaultPerformAction render
           ]
         , div [className "row"]
           [ div [className "col-md-8"]
-             [ div [] [text "GraphExplorer here...."]
+             [ div [style {border : "1px black solid", height: "90%"}]
+               [ text "GraphExplorer here...."
+               , createElement graphExplorerComponent { graph : st.graph
+                                                      , mode : st.mode
+                                                      } []
+               ]
             ]
           , div [className "col-md-4"]
-             [ div [_id "sidepanel"]
+             [ div [_id "sidepanel", style {border : "1px black solid", height: "90%"}]
               [ text "SidePanel for contextual information"
               ]
             ]
           ]
         ]
+    performAction :: PerformAction (console :: CONSOLE, dom :: DOM | eff) State props Action
+    performAction SetGraph _ (State st) = void do
+      gd <- liftEff $ reader st.file
+      modifyState \(State s) -> State $ s {graph = gd}
+
+    performAction (SetFile f) _ _ = void do
+      modifyState \(State s) -> State $ s {file = f}
--- a/src/graphexplorer/ReactGraphExplorer.js
+++ b/src/graphexplorer/ReactGraphExplorer.js
+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;
--- a/src/graphexplorer/registerServiceWorker.js
+++ b/src/graphexplorer/registerServiceWorker.js
+// 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();
+    });
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock