Commit 8fcdb44f authored by Themousaillon's avatar Themousaillon

adding map + fixing bugs

parent bd34a012
......@@ -431,6 +431,12 @@
"field": "summary"
}
},
"mapVisu": {
"nodeTypes": ["regest"],
"center": [12.672629, 48.440605],
"zoom": 5.2
},
"source": {
"name": "regest",
......
......@@ -242,6 +242,12 @@
"keywords": ["source"]
},
"mapVisu": {
"nodeTypes": ["regest"],
"center": [16.005991, 38.162624],
"zoom": 5
},
"source": {
"name": "source",
"names": "sources",
......
......@@ -49,7 +49,7 @@ class QueryEngine {
getNodeGeoloc = rawNode => {
const geoField = this._dbConnector.settings.fieldNames.geoLocalisation
if (!rawNode || !rawNode.properties.latLong)
if (!rawNode || !rawNode.properties[geoField])
return [null, null]
return rawNode.properties[geoField].split(",").map(Number)
......@@ -180,13 +180,15 @@ export class Graph2d {
constructor(dbConnector, idList, cullList){
// curentNodes contains the current nodes ids at expention n, in order to differentiate with n+1 expention
this._currentNodes = new Set(idList)
this._excludedNodes = new Set()
this._nodes = new IdSet()
this._edges = new IdSet()
this._cullList = cullList
this._queryEngine = new QueryEngine(dbConnector)
this._pending = []
this._filters = new NodeFilters(dbConnector.settings)
this.fetchFromIds(idList)(x => x)
if (idList.length !== 0)
this.fetchFromIds(idList)(x => x)
}
/**
......@@ -309,6 +311,7 @@ export class Graph2d {
}
addComponents = f => (nodes, edges) => {
nodes = nodes.filter(n => !this._excludedNodes.has(n.id))
nodes.forEach(node => {
if (node){
node.hide = !this._currentNodes.has(node.id)
......@@ -342,6 +345,7 @@ export class Graph2d {
this._nodes.removeByIds(idList)
this._edges.removeByIds(edgesIds)
idList.forEach(id => {
this._excludedNodes.add(id)
this._currentNodes.delete(id)
f("node", id)
})
......@@ -375,8 +379,10 @@ export class Graph2d {
toGraphObj = () => ({
elements: {
nodes: this._nodes.toArray(n => !n.hide).map(n => ({data: n.toObj()})),
edges: this._edges.toArray(e => !this.isEdgeHidden(e)).map(e => ({data: e.toObj()}))
nodes: this._nodes.toArray(n => this._currentNodes.has(n.id)).map(n => ({data: n.toObj()})),
edges: this._edges
.toArray(e => this._currentNodes.has(e.target) && this._currentNodes.has(e.source))
.map(e => ({data: e.toObj()}))
}
})
}
\ No newline at end of file
......@@ -129,6 +129,7 @@ intergraph #filters {
height: 10%;
padding: 0px 50px;
width: 100%;
z-index: 3;
}
intergraph #filters table {
......@@ -357,7 +358,7 @@ intergraph .tooltip-arrow {
#topButtons {
position: absolute;
z-index: 1;
z-index: 102;
margin-top: 5px;
margin-left: 10px;
}
......@@ -418,4 +419,13 @@ intergraph .tooltip-arrow {
height: 100%;
width: 100%;
z-index: 2;
}
#mapVisu > .ol-viewport > .ol-overlaycontainer {
z-index: 1 !important;
}
#mapVisu {
height: 100vh;
width: 100vw;
}
\ No newline at end of file
......@@ -6,6 +6,7 @@ import { testGraph2d } from "./2d-graphosaurus/test"
import { Graph2d } from "./2d-graphosaurus/graph";
import { Graph2D } from "./graph2D";
import { EntrySearch } from '../searchTools/entrySearch'
import { MapVisu } from './map_visu'
const dbConnectorConstructor = require('../database/DatabaseConnector'),
NodesList = require('../misc/nodes-list'),
......@@ -29,7 +30,7 @@ const toIso = (dateValue) => {
return date
}
function setupDateFilter(app, newGraph, id, start, end) {
function setupDateFilter(app, newGraph, mapVisu, id, start, end) {
let dateSlider = document.getElementById(id + '-slider');
// Create a string representation of the date.
......@@ -79,7 +80,7 @@ function setupDateFilter(app, newGraph, id, start, end) {
dateSlider.noUiSlider.on('update', function (values, handle) {
dateValues[handle].innerHTML = values[handle];
app.updateFilter();
mapVisu.drawSources()
newGraph.filterGraph();
newGraph.applyFilterToGraph();
});
......@@ -103,6 +104,8 @@ function start(settings, login, password) {
let app = new App(dbConnector);
const graph2D = new Graph2D(dbConnector, [], []);
// setup the map canevas
const mapVisu = new MapVisu("mapVisu", graph2D, settings);
testGraph2d(dbConnector)
// Setup interface
......@@ -161,8 +164,7 @@ function start(settings, login, password) {
if (!!option.filter) {
switch (option.type) {
case "date":
setupDateFilter(app, graph2D, id, option.filter.start, option.filter.end);
setupDateFilter(app, graph2D, mapVisu, id, option.filter.start, option.filter.end);
break;
case 'category':
let list = [option.filter, 'others'];
......@@ -230,14 +232,38 @@ function start(settings, login, password) {
$('#graphselector button').click(function() {
$(this).addClass('active').siblings().removeClass('active');
if (this.id == "cytocanvas") {
$('#center-panel').addClass("col-md-9")
$('#toggle-right-panel-canvas').show()
$('#graph').hide();
$('#mapVisu').hide()
$('#graph2D').show();
$('#generate-btn').hide();
$('#left-panel').show()
$('#right-panel').show()
$('#addToGraphButton').show();
} else {
} else if (this.id === "threecanvas") {
$('#center-panel').addClass("col-md-9")
$('#toggle-right-panel-canvas').show()
$('#graph').show();
$('#right-panel').show()
$('#mapVisu').hide()
$('#graph2D').hide();
$('#generate-btn').show();
$('#left-panel').show()
$('#addToGraphButton').hide();
$('#contextMenu').hide();
$('#graph2DMenu').hide();
}
else {
$('#center-panel').removeClass("col-md-9")
$('#toggle-right-panel-canvas').hide()
$('#left-panel').hide()
$('#right-panel').hide()
$('#mapVisu').show();
mapVisu.drawSources()
$('#graph').hide();
$('#generate-btn').hide();
$('#graph2D').hide();
$('#addToGraphButton').hide();
$('#contextMenu').hide();
$('#graph2DMenu').hide();
......@@ -269,6 +295,13 @@ function start(settings, login, password) {
$("#suggestions").append(options)
})
$("#keyword").on("change",
() => {
$("#keyword").blur()
$("#queryButton").focus()
}
)
$('#union-btn').click(table);
......@@ -320,6 +353,10 @@ function start(settings, login, password) {
return false;
});
$('#mapVisu').bind("contextmenu",function(e){
return false;
});
$('#generate-btn').click(() => {
let idsList = [];
let count = 0;
......@@ -427,6 +464,7 @@ function start(settings, login, password) {
const keywords = $("#filter-content").val().split(" ")
graph2D.filterGraph();
graph2D.applyFilterToGraph();
mapVisu.drawSources();
})
$("#filter-content").attr("placeholder",
......
......@@ -33,7 +33,7 @@
<select class="form-control" id="input-graph-type">
</select>
<div class="input-group">
<input id="keyword" type="text" class="form-control" value="" aria-label="keyword">
<input id="keyword" type="text" class="form-control" value="" aria-label="keyword" autocomplete="off">
<span class="input-group-btn">
<button id="queryButton" class="btn btn-light" type="button">Search</button>
</span>
......@@ -77,6 +77,7 @@
<div id="graphselector" class="btn-group btn-group-toggle">
<button type="button" id="cytocanvas" class="btn active">Cytocanvas</button>
<button type="button" id="threecanvas" class="btn">Threecanvas</button>
<button type="button" id="mapCanvas" class="btn">Mapcanvas</button>
</div>
<div id="generate-btn-container" hidden>
<button id="generate-btn" class="btn btn-primary" disabled>Generate graph</button>
......@@ -109,6 +110,8 @@
<div class="menuItem" id="clear2DGraph"><i class="fa fa-fw"></i>Clear Canvas</div>
</div>
</div>
<div id="mapVisu">
</div>
<div id="filters">
<table>
<tbody>
......
import { Map, View } from 'ol'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import TileLayer from 'ol/layer/Tile'
import OMS from 'ol/source/OSM'
import Feature from 'ol/Feature'
import Circle from 'ol/geom/Circle'
import { fromLonLat } from 'ol/proj'
export class MapVisu {
constructor(elementId, graph2D, settings){
this._settings = settings
this._canevas = elementId
this._graph2D = graph2D
this._sourceVector = new VectorSource()
this._sourceLayer = new VectorLayer({
source: this._sourceVector
})
this._map = new Map({
view: new View({
center: fromLonLat(settings.mapVisu.center),
zoom: settings.mapVisu.zoom
}),
layers: [
new TileLayer({
source: new OMS()
}),
this._sourceLayer
],
target: this._canevas
});
}
drawSources = () => {
this._sourceVector.clear()
const drawAbleTypes = this._settings.mapVisu.nodeTypes
this._graph2D.graph2d.forEachCurrentNode(
n => {
if (drawAbleTypes.includes(n.type) && n.data.latitude && n.data.longitude && !n.hide)
this._sourceVector.addFeature(
new Feature(
new Circle(fromLonLat([n.data.longitude, n.data.latitude]), 100000)
)
)
}
)
}
}
\ No newline at end of file
......@@ -32,8 +32,17 @@ export class EntrySearch {
getNodeName = (node, type) => node.properties[this._dbConnector.settings.nodeTypes2[type].labelField]
searchEntry = (searchString, type) => {
if (this._entries[type] && searchString.length > 2)
return this._entries[type].filter(x => x && x.toLowerCase().includes(searchString.toLowerCase()))
if (this._entries[type] && searchString.length > 2){
if (searchString[0] === "#"){
return this._entries[type].filter(
x => x && searchString.slice(1, ).split("-")
.every(n => n === "" || x.toLowerCase().includes(n))
)
}
else {
return this._entries[type].filter(x => x && x.toLowerCase().includes(searchString.toLowerCase()))
}
}
else
return []
}
......
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