Skip to content

P
purescript-gargantext
Commit ecc6cdf8 authored by Abinaya Sudhir's avatar Abinaya Sudhir
Browse files
Options

Graph explore design is done

parents 33af3069 9e8fbd42
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 263 deletions
dist/css/Login.css
View file @ ecc6cdf8
......@@ -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;
}
dist/css/ReactGraphExplorer.css 0 → 100644
View file @ ecc6cdf8
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;
}
dist/index.html
View file @ ecc6cdf8
......@@ -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 {
......
docker-env.sh 0 → 100644
View file @ ecc6cdf8
#!/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)
}
src/GraphExplorer.js
View file @ ecc6cdf8
This source diff could not be displayed because it is too large. You can view the blob instead.
src/GraphExplorer.purs
View file @ ecc6cdf8
module GraphExplorer where
import Prelude hiding (div)
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 DOM.File.FileReader (fileReader, readAsText, readyState, result)
import DOM.File.FileReader.ReadyState (ReadyState(..))
import DOM.File.Types (File, FileReader, fileToBlob)
import Prelude hiding (div)
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 React.DOM (a, button, button', div, form', input, li, li', menu, p, span, text, ul, ul')
import React.DOM.Props (_data, _id, _type, aria, checked, className, disabled, href, name, onChange, onClick, placeholder, role, style, title, value)
import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
import Unsafe.Coerce (unsafeCoerce)
foreign import data GraphData :: Type
foreign import initialGraph :: GraphData
foreign import initialFile :: File
foreign import getFile :: forall e. e -> File
......@@ -31,26 +26,43 @@ foreign import graphExplorerComponent :: ReactClass {graph :: GraphData, mode ::
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
= SetGraph
| SetFile File
| SetFile File (forall e. ReadyState -> Eff e Unit)
| SetProgress ReadyState
initialState :: State
initialState = State {mode : "select", graph : initialGraph, file : initialFile}
initialState = State {mode : "select", graph : unsafeCoerce "", fileReader : unsafeCoerce "", readyState : EMPTY}
reader :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) GraphData
reader f = do
startProcessing :: forall eff. File -> Eff (console :: CONSOLE, dom :: DOM | eff) FileReader
startProcessing f = do
fr <- fileReader
readAsText (fileToBlob f) fr
res <- result fr
--log $ show res
let da = parseJSON res
logger da
da
_ <- readAsText (fileToBlob f) fr
pure fr
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 = simpleSpec performAction render
......@@ -58,56 +70,178 @@ spec = simpleSpec performAction render
render :: Render State props Action
render d _ (State st) _ =
[ div [className "row"] [
div [className "col-md-12"]
div [className "col-md-12", style {marginTop : "21px", marginBottom : "21px"}]
[ menu [_id "toolbar"]
[ ul'
[ li [style {display : "inline-block"}]
[ form'
[ input [_type "file", name "file", onChange (\e -> d $ SetFile $ getFile e)] []
, input [_type "button", value "submit", onClick \_ -> d SetGraph] []
]
]
, li'
[
li'
[ button [className "btn btn-success btn-sm"] [text "Change Type"]
]
, li'
[ button [className "btn btn-primary btn-sm"] [text "Change Level"]
]
, li'
,li [style {display : "inline-block"}]
[ form'
[ input [_type "text", name "query", placeholder "Select Topics"] []
, input [_type "submit", value "Search"] []
[ input [_type "file", name "file", onChange (\e -> d $ SetFile (getFile e) (unsafeCoerce $ d <<< SetProgress)), className "btn btn-primary"] []
-- , text $ show st.readyState
]
]
, li' [ input [_type "button", className "btn btn-warning btn-sm",value "Run Demo", onClick \_ -> d SetGraph, disabled (st.readyState /= DONE)] []
]
, li'
[ button' [text "Screenshot"]]
[ form'
[ div [className "col-lg-2"]
[
div [className "input-group"]
[
span [className "input-group-btn"]
[
button [className "btn btn-primary", _type "button"]
[ span [className "glyphicon glyphicon-search"] []
]
]
,input [_type "text", className "form-control", placeholder "select topics"] []
]
]
]
]
, li [className "col-md-2"]
[ span [] [text "selector size"],input [_type "range", _id "myRange", value "90"] []
]
, li [className "col-md-2"]
[ span [] [text "label size"],input [_type "range", _id "myRange", value "90"] []
]
, li [className "col-md-2"]
[ span [] [text "Nodes"],input [_type "range", _id "myRange", value "90"] []
]
, li [className "col-md-2"]
[ span [] [text "Edges"],input [_type "range", _id "myRange", value "90"] []
]
, li'
[ button' [text "Save"] -- TODO: Implement Save!
[ button [className "btn btn-primary"] [text "Save"] -- TODO: Implement Save!
]
]
]
]
]
, div [className "row"]
[ div [className "col-md-8"]
[ div [className "col-md-9"]
[ div [style {border : "1px black solid", height: "90%"}]
[ text "GraphExplorer here...."
, createElement graphExplorerComponent { graph : st.graph
[ createElement graphExplorerComponent { graph : st.graph
, mode : st.mode
} []
]
]
, div [className "col-md-4"]
[ div [_id "sidepanel", style {border : "1px black solid", height: "90%"}]
[ text "SidePanel for contextual information"
, div [className "col-md-3", style {border : "1px black solid", height: "90%", backgroundColor : "beige"}]
[ div [className "row"]
[ div [_id "sidepanel" , className "col-md-12", style {borderBottom : "1px solid black"}]
[ p []
[ text "memory/status/important issue/ design/ knowledge mangaement/ design/ theory/ system design"
]
, button [className "btn btn-primary", style {marginBottom : "18px"}] [text "Remove"]
]
, div [className "col-md-12"]
[
ul [className "nav nav-tabs", _id "myTab", role "tablist", style {marginBottom : "18px", marginTop : "18px"}]
[
li [className "nav-item"]
[
a [className "nav-link active"
, _id "home-tab"
, _data {toggle : "tab"}
, href "#home"
, role "tab"
, aria {controls :"home" , selected : "true"}
] [text "Neighbours"]
]
]
, div [className "tab-content", _id "myTabContent", style {borderBottom : "1px solid black", paddingBottom : "19px"}]
[ div [ className "", _id "home", role "tabpanel" ]
[ a [ className "badge badge-light"][text "objects"]
, a [ className "badge badge-light"][text "evaluation"]
, a [ className "badge badge-light"][text "dynamics"]
, a [ className "badge badge-light"][text "virtual environments"]
, a [ className "badge badge-light"][text "virtual reality"]
, a [ className "badge badge-light"][text "performance analysis"]
, a [ className "badge badge-light"][text "software engineering"]
, a [ className "badge badge-light"][text "complex systems"]
, a [ className "badge badge-light"][text "wireless communications"]
]
]
]
, div [className "col-md-12", _id "horizontal-checkbox"]
[ ul [ style {display: "inline",float : "left" }]
[ li []
[ span [] [text "Pubs"]
,input [ _type "checkbox"
, className "checkbox"
, checked $ true
, title "Mark as completed"
-- , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
] []
]
, li []
[ span [] [text "Projets"]
,input [ _type "checkbox"
, className "checkbox"
, checked $ true
, title "Mark as completed"
-- , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
] []
]
, li []
[ span [] [text "Brevets"]
,input [ _type "checkbox"
, className "checkbox"
, checked $ true
, title "Mark as completed"
-- , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
] []
]
, li []
[ span [] [text "Others"]
,input [ _type "checkbox"
, className "checkbox"
, checked $ true
, title "Mark as completed"
-- , onChange $ dispatch <<< ( const $ SetMap $ not (getter _._type state.term == MapTerm))
] []
]
]
]
, div []
[ p []
[ text "Physical functions : common factor of side channel and fault attacks published in journal of cryptographic Enginering"
]
]
]
]
]
]
performAction :: PerformAction (console :: CONSOLE, dom :: DOM | eff) State props Action
performAction SetGraph _ (State st) = void do
gd <- liftEff $ reader st.file
gd <- liftEff $ getData st.fileReader
modifyState \(State s) -> State $ s {graph = gd}
performAction (SetFile f) _ _ = void do
modifyState \(State s) -> State $ s {file = f}
performAction (SetFile f fn) _ _ = void do
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 @ 33af3069
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 @ 33af3069
// 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 @ ecc6cdf8
......@@ -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