Skip to content

gargantext
gargantext
Commit 056a8725 authored by Romain Loth's avatar Romain Loth
Browse files
Options

[feat] mygraphs refresh for all active graphs (bug46)

parent 09c25441
Show whitespace changes
Inline Side-by-side
Showing with 390 additions and 316 deletions
templates/pages/corpora/myGraphs.html
View file @ 056a8725
...@@ -16,7 +16,183 @@ ...@@ -16,7 +16,183 @@
} }
</style> </style>
<script type="text/javascript"> {% endblock %}
{% block content %}
<div class="container theme-showcase" role="main">
<h2>My Graphs </h2>
<ol id="graph-list">
{% if coocs %}
{% for cooc in coocs %}
<div id="graph_{{cooc.id}}" class="graph-elt">
<div class="row">
<div class="col-md-1 content"></div>
<div class="col-md-5 content">
<li>
<h4>{{cooc.name}}</h4>
{{cooc.date}}<br>
{% for key, value in coocs_count.items %}
{% if key == cooc.id %}
{% if value > 0 %}
From: {% if not cooc.hyperdata.parameters.start %} begin of corpus {% else %} {{cooc.hyperdata.parameters.start}} {% endif %}
, To: {% if not cooc.hyperdata.parameters.end %} end of corpus {% else %} {{cooc.hyperdata.parameters.end}} {% endif %}
<br>
<ul id="graph_{{cooc.id}}_finished">
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&amp;distance=conditional&amp;bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
{% if cooc.hyperdata.conditional %}
~{{ cooc.hyperdata.conditional.nodes }} nodes,
~{{ cooc.hyperdata.conditional.edges }} edges
with <b>Conditional</b> distance
{% else %}
Compute this graph with Conditional distance
{% endif %}
</a>
</li>
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&amp;distance=distributional&amp;bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
{% if cooc.hyperdata.distributional %}
~{{ cooc.hyperdata.distributional.nodes }} nodes,
~{{ cooc.hyperdata.distributional.edges }} edges
with <b>Distributional</b> distance
{% else %}
Compute this graph with Distributional distance
{% endif %}
</a>
</li>
</ul>
<br>
<!-- <li>{{cooc.id}}</li>
<ul>
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
Conditional
</a>
(with bridgeness
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=10">10</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=20">20</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=30">30</a>
)
</li>
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
Distributional
</a>
(with bridgeness
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=10">10</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=20">20</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=30">30</a>
)
</li>
</ul>
-->
{% else %}
<!--
<br> Processing (wait and reload the page)
!-->
<div class="progress">
<div class=" progress-bar progress-bar-striped active"
role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
<span>
Processing (wait and reload the page)
</span>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</li>
</div>
<div class="col-md-3 content">
<!--
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional"
title="View Graph">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
</a>
-->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom"
data-content="
<ul>
<li
onclick=&quot;deleteGraph(event, {{cooc.id}})&quot;>
<a href='#'>Delete this</a>
</li>
</ul>
">
<span class="glyphicon glyphicon-trash" aria-hidden="true"
title='Delete this graph'></span>
</button>
</div>
</div>
</div>
{% endfor %}
{% else %}
<h3>
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
You have not computed any graph already</h3>
<h4>
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
What is Graph ?
</h4>
<ul>
<li>Graph is a conveniant tool to explore your documents</li>
<li>Nodes are terms selected in your Map List</li>
<li>Edges between nodes represent proximities of terms according to a specific distance between your documents.</li>
<ul>
<li>Conditional distance between the terms X and Y is the probability to have both terms X <b> and </b> Y in the same textual context.</li>
<li>Distributional distance between the terms X and Y is the probability to have same others terms in the same textual context as X <b>or</b> Y.</li>
</ul>
</ul>
<h4>
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
How to compute a new graph ?
</h4>
<ol>
<li>Look at the menu</li>
<li>Click on Graphs</li>
<li>Choose a distance</li>
<li>Click on the distance or on MyGraph which is this page</li>
</ol>
<h4>
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
Do you want to test ?</h4>
<btn class="btn btn-info" onclick="goFirstGraph()">
<span style="font-size:120%">Compute a new graph</span> <br/> with conditional distance
</btn>
{% endif %}
</ol>
<script type="text/javascript">
// initial vars // initial vars
var projectId = "{{project.id | escapejs}}" var projectId = "{{project.id | escapejs}}"
...@@ -42,7 +218,7 @@ ...@@ -42,7 +218,7 @@
From: begin of corpus\ From: begin of corpus\
, To: end of corpus\ , To: end of corpus\
<br>\ <br>\
<ul>\ <ul id="graph_%%cooc_id%%_finished">\
<li>\ <li>\
<a href="/projects/%%project_id%%/corpora/%%corpus_id%%/explorer?cooc_id=%%cooc_id%%&amp;distance=conditional&amp;bridgeness=5">\ <a href="/projects/%%project_id%%/corpora/%%corpus_id%%/explorer?cooc_id=%%cooc_id%%&amp;distance=conditional&amp;bridgeness=5">\
<span class="glyphicon glyphicon-eye-open" style="font-size:150%"></span>\ <span class="glyphicon glyphicon-eye-open" style="font-size:150%"></span>\
...@@ -61,7 +237,7 @@ ...@@ -61,7 +237,7 @@
<br>' <br>'
var baseSkeletonTemplate='\ var baseSkeletonTemplate='\
<div id="graph_%%cooc_id%%" class="first-graph">\ <div id="graph_%%cooc_id%%" class="graph-elt first-graph">\
<div class="row">\ <div class="row">\
<div class="col-md-1 content"></div>\ <div class="col-md-1 content"></div>\
<div class="col-md-5 content">\ <div class="col-md-5 content">\
...@@ -93,7 +269,21 @@ ...@@ -93,7 +269,21 @@
</div>\ </div>\
</div>' </div>'
// -----------------------------------------------------
// for testing on client side which need refresh
// -----------------------------------------------------
function testActiveGraphs() {
var activeGraphIds = []
for (var i in graphIds) {
var grid = graphIds[i]
if ((! document.getElementById('graph_'+grid+'_finished'))
&& (! trashedIds[grid])) {
activeGraphIds.push(grid)
}
}
return activeGraphIds
}
/** /**
* function showNewCoocDiv(status_code, cooc_id, cooc_name, cooc_date) * function showNewCoocDiv(status_code, cooc_id, cooc_name, cooc_date)
* *
...@@ -205,6 +395,7 @@ ...@@ -205,6 +395,7 @@
// 3 - run status updating // 3 - run status updating
// (it will call next step of // (it will call next step of
// showNewCoocDiv when ready) // showNewCoocDiv when ready)
console.log("goFirstGraph => keepCheckingGraphStatus on:", coocId)
keepCheckingGraphStatus(coocId) keepCheckingGraphStatus(coocId)
}, },
error: function(result) { error: function(result) {
...@@ -221,10 +412,13 @@ ...@@ -221,10 +412,13 @@
* 2) triggers showNewCoocDiv('finished_status') if ready * 2) triggers showNewCoocDiv('finished_status') if ready
* or abandons after 5 attempts * or abandons after 5 attempts
*/ */
var nChecks = 0
var currentJob = null var currentJob = null
function keepCheckingGraphStatus(coocNodeId, nChecksArg) {
var graphReadyFlag = false var graphReadyFlag = false
function keepCheckingGraphStatus(coocNodeId) { var nChecks = 0
if (typeof nChecksArg != 'undefined') {
nChecks = nChecksArg
}
console.log("checking status", nChecks) console.log("checking status", nChecks)
nChecks ++ nChecks ++
...@@ -263,7 +457,6 @@ ...@@ -263,7 +457,6 @@
// we abandon after 5 checks // we abandon after 5 checks
console.warn("stopping status checks for graph:", console.warn("stopping status checks for graph:",
coocNodeId) coocNodeId)
nChecks = 0
return null return null
} }
// scheduled recursion // scheduled recursion
...@@ -272,7 +465,7 @@ ...@@ -272,7 +465,7 @@
// decreasing intervals (preserving DB while "loosing interest") // decreasing intervals (preserving DB while "loosing interest")
var nextTime = nChecks * 3000 var nextTime = nChecks * 3000
// schedule next check // schedule next check
currentJob = setTimeout(function(){keepCheckingGraphStatus(coocNodeId)}, nextTime) currentJob = setTimeout(function(){keepCheckingGraphStatus(coocNodeId, nChecks)}, nextTime)
console.log("next status check in", nextTime/1000, "s" ) console.log("next status check in", nextTime/1000, "s" )
return false return false
} }
...@@ -323,183 +516,64 @@ ...@@ -323,183 +516,64 @@
return newDateStr + ', ' + newTimeStr return newDateStr + ', ' + newTimeStr
} }
</script>
{% endblock %}
{% block content %}
<div class="container theme-showcase" role="main">
<h2>My Graphs </h2>
<ol id="graph-list">
{% if coocs %}
{% for cooc in coocs %}
<div id="graph_{{cooc.id}}">
<div class="row">
<div class="col-md-1 content"></div>
<div class="col-md-5 content"> function deleteGraph(e, graphId) {
<li> // prevents scroll back to top of page
<h4>{{cooc.name}}</h4> e.preventDefault()
{{cooc.date}}<br>
{% for key, value in coocs_count.items %}
{% if key == cooc.id %}
{% if value > 0 %}
From: {% if not cooc.hyperdata.parameters.start %} begin of corpus {% else %} {{cooc.hyperdata.parameters.start}} {% endif %}
, To: {% if not cooc.hyperdata.parameters.end %} end of corpus {% else %} {{cooc.hyperdata.parameters.end}} {% endif %}
<br>
<ul> // register pending operation
<li> trashedIds[graphId] = true ;
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&amp;distance=conditional&amp;bridgeness=5"> // POSSIBLE visual loader wheel
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
{% if cooc.hyperdata.conditional %}
~{{ cooc.hyperdata.conditional.nodes }} nodes,
~{{ cooc.hyperdata.conditional.edges }} edges
with <b>Conditional</b> distance // REST and callback
{% else %} garganrest.nodes.delete(
Compute this graph with Conditional distance graphId,
{% endif %} function(){
</a> $('#graph_'+graphId).remove()
</li> delete trashedIds[graphId]
// remove any popover too
<li> $('.popover').remove();
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&amp;distance=distributional&amp;bridgeness=5"> }
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> );
{% if cooc.hyperdata.distributional %} }
~{{ cooc.hyperdata.distributional.nodes }} nodes,
~{{ cooc.hyperdata.distributional.edges }} edges
with <b>Distributional</b> distance
{% else %}
Compute this graph with Distributional distance
{% endif %}
</a>
</li>
</ul>
<br>
<!-- <li>{{cooc.id}}</li>
<ul>
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
Conditional
</a>
(with bridgeness
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=10">10</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=20">20</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional&bridgeness=30">30</a>
)
</li>
<li>
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=5">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
Distributional
</a>
(with bridgeness
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=10">10</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=20">20</a>
or <a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=distributional&bridgeness=30">30</a>
)
</li>
</ul>
-->
{% else %}
<!--
<br> Processing (wait and reload the page)
!-->
<div class="progress">
<div class=" progress-bar progress-bar-striped active"
role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
<span>
Processing (wait and reload the page)
</span>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
</li> // main
</div>
<div class="col-md-3 content">
<!--
<a href="/projects/{{project.id}}/corpora/{{corpus.id}}/explorer?cooc_id={{cooc.id}}&distance=conditional"
title="View Graph">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
</button>
</a> // all graph ids
-->
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" var graphDivs = document.getElementsByClassName('graph-elt')
data-content="
<ul>
<li
onclick=&quot;
garganrest.nodes.delete({{cooc.id}}, function(){$('#graph_'+{{cooc.id}}).remove()});
$(this).parent().parent().remove();
&quot;>
<a href='#'>Delete this</a>
</li>
</ul>
">
<span class="glyphicon glyphicon-trash" aria-hidden="true"
title='Delete this graph'></span>
</button>
</div> var graphIds = []
</div> // for graph ids whose delete is pending
</div> var trashedIds = {}
{% endfor %} for (var i = 0 ; i < graphDivs.length ; i++) {
{% else %} // ex: graph_48
<h3> divId = graphDivs[i].id
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> if (divId) {
You have not computed any graph already</h3> var graphId = divId.match(/[0-9]+$/).pop()
<h4> graphIds.push(graphId)
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> }
What is Graph ? }
</h4>
<ul>
<li>Graph is a conveniant tool to explore your documents</li>
<li>Nodes are terms selected in your Map List</li>
<li>Edges between nodes represent proximities of terms according to a specific distance between your documents.</li>
<ul>
<li>Conditional distance between the terms X and Y is the probability to have both terms X <b> and </b> Y in the same textual context.</li>
<li>Distributional distance between the terms X and Y is the probability to have same others terms in the same textual context as X <b>or</b> Y.</li>
</ul>
</ul>
var activeGraphIds = testActiveGraphs()
if (activeGraphIds.length) {
// initial checks if page reloaded with active corpora
for (var i in activeGraphIds) {
// !careful with closure, async function & loop on i
// cf stackoverflow.com/a/21819961/2489184
(function(i) {
var myCoocId = activeGraphIds[i]
keepCheckingGraphStatus(activeGraphIds, 0)
})(i)
}
}
<h4> console.warn("hello", activeGraphIds)
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
How to compute a new graph ?
</h4>
<ol>
<li>Look at the menu</li>
<li>Click on Graphs</li>
<li>Choose a distance</li>
<li>Click on the distance or on MyGraph which is this page</li>
</ol>
<h4> </script>
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
Do you want to test ?</h4>
<btn class="btn btn-info" onclick="goFirstGraph()">
<span style="font-size:120%">Compute a new graph</span> <br/> with conditional distance
</btn>
{% endif %}
</ol>
{% endblock %} {% endblock %}
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