Skip to content

P
purescript-gargantext
Commit 9e8fbd42 authored by Sudhir Kumar's avatar Sudhir Kumar
Browse files
Options

working graphExplorer

parent 00a6d750
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 247 deletions
src/GraphExplorer.js
View file @ 9e8fbd42
This source diff could not be displayed because it is too large. You can view the blob instead.
src/GraphExplorer.purs
View file @ 9e8fbd42
...@@ -2,25 +2,21 @@ module GraphExplorer where ...@@ -2,25 +2,21 @@ module GraphExplorer where
import Prelude hiding (div) import Prelude hiding (div)
import Control.Monad.Aff (runAff)
import Control.Monad.Aff.Class (liftAff)
import Control.Monad.Aff.Console (CONSOLE) import Control.Monad.Aff.Console (CONSOLE)
import Control.Monad.Cont.Trans (lift)
import Control.Monad.Eff (Eff) import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Class (liftEff) import Control.Monad.Eff.Class (liftEff)
import Control.Monad.Eff.Console (log)
import DOM (DOM) import DOM (DOM)
import DOM.File.FileReader (fileReader, readAsText, result) import DOM.File.FileReader (fileReader, readAsText, readyState, result)
import DOM.File.Types (File, fileToBlob) import DOM.File.FileReader.ReadyState (ReadyState(..))
import DOM.File.Types (File, FileReader, fileToBlob)
import React (ReactClass, createElement) import React (ReactClass, createElement)
import React.DOM (button, button', div, form', input, li, li', menu, text, ul') 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 React.DOM.Props (_id, _type, className, disabled, name, onChange, onClick, placeholder, style, value)
import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec) import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
import Unsafe.Coerce (unsafeCoerce)
foreign import data GraphData :: Type foreign import data GraphData :: Type
foreign import initialGraph :: GraphData
foreign import initialFile :: File foreign import initialFile :: File
foreign import getFile :: forall e. e -> File foreign import getFile :: forall e. e -> File
...@@ -31,26 +27,43 @@ foreign import graphExplorerComponent :: ReactClass {graph :: GraphData, mode :: ...@@ -31,26 +27,43 @@ foreign import graphExplorerComponent :: ReactClass {graph :: GraphData, mode ::
foreign import logger :: forall a eff. a -> Eff eff Unit foreign import logger :: forall a eff. a -> Eff eff Unit
newtype State = State {mode :: String, graph :: GraphData, file :: File} foreign import setupProgress :: forall e a. FileReader -> a -> Eff e Unit
newtype State = State {mode :: String, graph :: GraphData, fileReader :: FileReader, readyState :: ReadyState}
data Action data Action
= SetGraph = SetGraph
| SetFile File | SetFile File (forall e. ReadyState -> Eff e Unit)
| SetProgress ReadyState
initialState :: State initialState :: State
initialState = State {mode : "select", graph : initialGraph, file : initialFile} initialState = State {mode : "select", graph : unsafeCoerce "", fileReader : unsafeCoerce "", readyState : EMPTY}
startProcessing :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) FileReader
reader :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) GraphData startProcessing f = do
reader f = do
fr <- fileReader fr <- fileReader
readAsText (fileToBlob f) fr _ <- readAsText (fileToBlob f) fr
res <- result fr pure fr
--log $ show res
let da = parseJSON res
logger da
da
getData :: forall eff. FileReader -> Eff (console :: CONSOLE, dom :: DOM | eff) GraphData
getData fr = do
res <- result fr
parseJSON res
-- processingStatus :: FileReader -> Boolean
-- processingStatus fr = readyState fr == DONE
-- rs <- readyState fr
-- logger $ show rs
-- res <- result fr
-- logger fr
-- logger "res"
-- logger res
-- logger "/res"
-- da <- parseJSON res
-- logger "parsed Data"
-- logger da
-- logger "/parsed data"
spec :: forall eff props. Spec (console :: CONSOLE, dom :: DOM | eff) State props Action spec :: forall eff props. Spec (console :: CONSOLE, dom :: DOM | eff) State props Action
spec = simpleSpec performAction render spec = simpleSpec performAction render
...@@ -63,8 +76,9 @@ spec = simpleSpec performAction render ...@@ -63,8 +76,9 @@ spec = simpleSpec performAction render
[ ul' [ ul'
[ li [style {display : "inline-block"}] [ li [style {display : "inline-block"}]
[ form' [ form'
[ input [_type "file", name "file", onChange (\e -> d $ SetFile $ getFile e)] [] [ input [_type "file", name "file", onChange (\e -> d $ SetFile (getFile e) (unsafeCoerce $ d <<< SetProgress))] []
, input [_type "button", value "submit", onClick \_ -> d SetGraph] [] , input [_type "button", value "submit", onClick \_ -> d SetGraph, disabled (st.readyState /= DONE)] []
-- , text $ show st.readyState
] ]
] ]
, li' , li'
...@@ -91,8 +105,7 @@ spec = simpleSpec performAction render ...@@ -91,8 +105,7 @@ spec = simpleSpec performAction render
, div [className "row"] , div [className "row"]
[ div [className "col-md-8"] [ div [className "col-md-8"]
[ div [style {border : "1px black solid", height: "90%"}] [ div [style {border : "1px black solid", height: "90%"}]
[ text "GraphExplorer here...." [ createElement graphExplorerComponent { graph : st.graph
, createElement graphExplorerComponent { graph : st.graph
, mode : st.mode , mode : st.mode
} [] } []
] ]
...@@ -106,8 +119,20 @@ spec = simpleSpec performAction render ...@@ -106,8 +119,20 @@ spec = simpleSpec performAction render
] ]
performAction :: PerformAction (console :: CONSOLE, dom :: DOM | eff) State props Action performAction :: PerformAction (console :: CONSOLE, dom :: DOM | eff) State props Action
performAction SetGraph _ (State st) = void do performAction SetGraph _ (State st) = void do
gd <- liftEff $ reader st.file gd <- liftEff $ getData st.fileReader
modifyState \(State s) -> State $ s {graph = gd} modifyState \(State s) -> State $ s {graph = gd}
performAction (SetFile f) _ _ = void do performAction (SetFile f fn) _ _ = void do
modifyState \(State s) -> State $ s {file = f} fr <- liftEff $ startProcessing f
_ <- liftEff $ setupProgress fr (unsafeCoerce $ setP fr fn)
modifyState \(State s) -> State $ s {fileReader = fr}
performAction (SetProgress rs) _ _ = void do
modifyState $ \(State s) -> State $ s {readyState = rs}
setP :: forall t89. FileReader -> (ReadyState -> Eff ( dom :: DOM | t89 ) Unit ) -> Eff ( dom :: DOM | t89 ) Unit
setP fr fn = do
rs <- readyState fr
fn rs
pure unit
src/graphexplorer/ReactGraphExplorer.js deleted 100644 → 0
View file @ 00a6d750
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;
src/graphexplorer/registerServiceWorker.js deleted 100644 → 0
View file @ 00a6d750
// 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();
});
}
}
yarn.lock
View file @ 9e8fbd42
...@@ -2653,9 +2653,9 @@ react-echarts-v3@^1.0.14: ...@@ -2653,9 +2653,9 @@ react-echarts-v3@^1.0.14:
element-resize-detector latest element-resize-detector latest
lodash latest lodash latest
"react-graph-explorer@git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git": "react-graph-explorer@git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#7f6d19396b694c70162f63b2f3e456eb14644928":
version "0.1.0" version "0.1.0"
resolved "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#aaed893de5fc6029639815d75426bc5d06646050" resolved "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/reactGraphExplorer.git#7f6d19396b694c70162f63b2f3e456eb14644928"
dependencies: dependencies:
graph-explorer "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git" graph-explorer "git+ssh://git@gitlab.iscpif.fr:20022/gargantext/graphExplorer.git"
prop-types "^15.6.0" prop-types "^15.6.0"
......
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