Skip to content

Commit

Permalink
Merge b1bb286 into 889ea2d
Browse files Browse the repository at this point in the history
  • Loading branch information
@chiatt
chiatt committed Dec 7, 2020
2 parents 889ea2d + b1bb286 commit 6ab1353
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 53 deletions.
22 changes: 21 additions & 1 deletion arches/app/media/css/arches.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1694,10 +1694,30 @@ div.final-cons-step-separator>h4 {
content: "\f070";
}

.overlay-listing.rr-map-card.active-overlay .overlay-name:before {
.active-overlay .overlay-listing.rr-map-card .overlay-name {
color: #666;
content: "\f06e";
}

.active-overlay .overlay-listing.rr-map-card .overlay-name:before {
color: #666;
content: "\f06e";
}

.rr-map-card.related-instances .related-instance {
color: #9e9e9e;
font-size: 12px;
padding: 3px 0 0 12px;
}

.active-overlay .rr-map-card.related-instances .related-instance {
color: #666;
}

.active-overlay .rr-map-card.related-instances .related-instance.hovered {
background-color: #eee;
}

.summary-panel {
background: #f9f9f9;
margin-top: -30px;
Expand Down
73 changes: 54 additions & 19 deletions arches/app/media/js/views/components/cards/related-resources-map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,40 @@ define([
var parsedNodeIds = JSON.parse(JSON.stringify(this.nodeids));
var firstNode = parsedNodeIds.length > 0 ? [parsedNodeIds[0]] : [];
this.filterNodeIds = ko.observableArray(firstNode);
this.relatedResourceDetails = {};
this.relatedResourceWidgets = this.widgets.filter(function(widget){return widget.datatype.datatype === 'resource-instance' || widget.datatype.datatype === 'resource-instance-list';});
this.relatedResources = ko.pureComputed(function() {
var tileResourceIds = [];
self.relatedResourceWidgets.forEach(function(widget) {
var nodeid = ko.unwrap(widget.node_id);
var related = self.tile.data[nodeid]();
if (related) {
self.tile.data[nodeid]().forEach(function(rr) {
var resourceinstanceid = ko.unwrap(rr.resourceId);
if (resourceinstanceid) {
tileResourceIds.push(resourceinstanceid);
if (!self.relatedResourceDetails[resourceinstanceid]) {
window.fetch(arches.urls.search_results + "?id=" + resourceinstanceid)
.then(function(response) {
if (response.ok) {
return response.json();
}
})
.then(function(json) {
var details = json.results.hits.hits[0]._source
self.relatedResourceDetails[resourceinstanceid] = {graphid: details.graph_id, resourceinstanceid: resourceinstanceid, displayname: details.displayname};
self.tile.data[nodeid].valueHasMutated();
});
}
}
});
}
});
return tileResourceIds
.map(function(resourceid){return self.relatedResourceDetails[resourceid]})
.filter(function(val){return val !== undefined});
});

this.showRelatedQuery = ko.observable(false);
var resourceBounds = ko.observable();
var selectRelatedSource = this.selectRelatedSource();
Expand Down Expand Up @@ -137,8 +170,8 @@ define([
selectFeatureLayersFactory(source, sourceLayer, selectedResourceIds(), true, null, self.nodeids, self.filterNodeIds(), self.hoverId(), selectLayerConfig) :
[];
self.additionalLayers(
extendedLayers.concat(
selectFeatureLayers
selectFeatureLayers.concat(
extendedLayers
)
);
};
Expand Down Expand Up @@ -167,6 +200,11 @@ define([
var id = widget.node_id();
var resourceinstanceid = ko.unwrap(resourceData.resourceinstanceid);
var type = ko.unwrap(self.form.nodeLookup[id].datatype);
self.relatedResourceDetails[ko.unwrap(resourceData.resourceinstanceid)] = {
graphid: ko.unwrap(resourceData.graphid),
displayname: ko.unwrap(resourceData.displayname),
resourceinstanceid: ko.unwrap(resourceData.resourceinstanceid)
}
zoomToData = false;
var graphconfig = widget.node.config.graphs().find(function(graph){return graph.graphid === ko.unwrap(resourceData.graphid);});
var val = [{
Expand All @@ -188,6 +226,7 @@ define([
}
};


this.unrelateResource = function(resourceData, widget) {
var id = widget.node_id();
var resourceinstanceid = ko.unwrap(resourceData.resourceinstanceid);
Expand All @@ -212,23 +251,12 @@ define([
searchContext: self.showRelatedQuery
});

this.intersectionSummary = ko.observable({});
this.updateHoverId = function(val){
self.hoverId() === val.resourceinstanceid ? self.hoverId(null) : self.hoverId(val.resourceinstanceid);
};
this.targetGraphs = ko.observableArray();
this.mapFilter.filter.feature_collection.subscribe(function(val){
if (self.widget && self.widget.node.config.graphs().length && val.features && val.features.length > 0) {
self.targetGraphs.removeAll();
var graphs = self.widget.node.config.graphs().map(function(v){if (v.graphid){return v.graphid;}});
self.targetGraphs(graphs);
graphs.forEach(function(val){
if (!self.intersectionSummary()[val]) {
var resource = arches.resources.find(function(resource){return resource.graphid === val;});
self.intersectionSummary()[val] = resource;
self.intersectionSummary()[val].results = ko.observableArray([]);
}
}, this);
var payload = {
"map-filter": JSON.stringify(val),
"precision": 6,
Expand All @@ -244,9 +272,6 @@ define([
data: payload,
method: 'GET'
}).done(function(data){
graphs.forEach(function(graph){
self.intersectionSummary()[graph].results.removeAll();
});
self.relatedResourceWidgets.forEach(function(widget) {
if (ko.unwrap(self.tile.data[widget.node.nodeid])) {
self.tile.data[widget.node.nodeid]([]);
Expand All @@ -256,12 +281,10 @@ define([
var resourceInstance = hit._source;
if (graphs.indexOf(resourceInstance.graph_id) > -1) {
self.relateResource(
{resourceinstanceid: resourceInstance.resourceinstanceid, graphid: resourceInstance.graph_id},
{resourceinstanceid: resourceInstance.resourceinstanceid, graphid: resourceInstance.graph_id, displayname: resourceInstance.displayname},
self.widget);
}
self.intersectionSummary()[resourceInstance.graph_id].results.push(resourceInstance);
});
self.intersectionSummary.valueHasMutated();
var buffer = data['map-filter'].search_buffer;
self.map().getSource('geojson-search-buffer-data').setData(buffer);
});
Expand Down Expand Up @@ -290,6 +313,18 @@ define([
self.map().addLayer(layer);
extendedLayers.push(layer);
});
self.map().on('mousemove', (e) => {
var features = self.map().queryRenderedFeatures(e.point);
var feature;
if (features.length && features[0].properties.resourceinstanceid) {
feature = features[0].properties.resourceinstanceid;
if (self.relatedResources().filter(function(val){return val.resourceinstanceid === feature}).length) {
self.hoverId(feature);
}
} else {
self.hoverId(null);
}
});
}
});

Expand Down
45 changes: 12 additions & 33 deletions arches/app/templates/views/components/related-resources-map-editor.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,21 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, tex
</div>


<div style="margin: 70px 10px -25px;">
<div style="margin: 70px 10px 0px;">
<div class='control-label widget-input-label'>{% trans "Participating Layers" %}</div>
<!-- ko foreach: {data: self.nodeDetails, as: 'nodeInfo'} -->
<div class="overlay-listing rr-map-card" style="padding: 5px; min-height: 0px"
data-bind="click: function(){self.filterNodeIds.indexOf(nodeInfo.nodeid) > -1 ? self.filterNodeIds.remove(nodeInfo.nodeid) : self.filterNodeIds.push(nodeInfo.nodeid)}, css: {'active-overlay': self.filterNodeIds.indexOf(nodeInfo.nodeid) > -1}">
<div data-bind="css: {'active-overlay': self.filterNodeIds.indexOf(nodeInfo.nodeid) > -1}">
<div class="overlay-listing rr-map-card" style="padding: 5px; min-height: 0px" data-bind="click: function(){self.filterNodeIds.indexOf(nodeInfo.nodeid) > -1 ? self.filterNodeIds.remove(nodeInfo.nodeid) : self.filterNodeIds.push(nodeInfo.nodeid)}">
<div class="overlay-name" data-bind="text: nodeInfo.resourcemodelname"></div>
</div>
<div class="rr-map-card related-instances">
<!-- ko foreach: self.relatedResources -->
<!-- ko if: nodeInfo.graph_id === $data.graphid -->
<div class="related-instance" data-bind="text: $data.displayname, event: { mouseover: self.updateHoverId, mouseout: self.updateHoverId }, css: {hovered: self.hoverId() === $data.resourceinstanceid}"></div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>

Expand Down Expand Up @@ -113,7 +121,7 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, tex
<!-- /ko-->

<!-- ko if: showRelatedQuery() -->
<div class="card" style="padding-top: 55px; padding-bottom: 30px">
<div class="card" style="padding-top: 25px; padding-bottom: 30px">

<div data-bind="foreach: {
data:card.widgets, as: 'widget'
Expand Down Expand Up @@ -160,35 +168,6 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel, tex
</div>
</div>
</div>

<!--ko if: self.mapFilter.searchGeometries().length -->
<div class="rr-map-card-intersect-panel">
<div class='control-label widget-input-label'>{% trans "Intersection Results" %}</div>
<div>
<!-- ko foreach: {data: self.targetGraphs, as: 'targetGraph'} -->
<div style="margin-bottom: 12px; border: solid 1px #eee; min-height: 0px;">
<!--ko if: self.intersectionSummary()[targetGraph] -->
<div style="
display: inline-flex;
justify-content: space-between;
width: 100%;
padding: 10px;
background-color: aliceblue;
">
<div data-bind="text: self.intersectionSummary()[targetGraph].name"></div>
<div data-bind="text: 'Total: ' + self.intersectionSummary()[targetGraph].results().length"></div>
</div>
<div style="max-height: 200px; overflow-y: scroll;">
<!-- ko foreach: {data: self.intersectionSummary()[targetGraph].results(), as: 'result'} -->
<div class="intersection-result" data-bind="text: result.displayname, event: { mouseover: self.updateHoverId, mouseout: self.updateHoverId }, css: {hovered: self.hoverId() === result.resourceinstanceid } "></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>

Expand Down

0 comments on commit 6ab1353

Please sign in to comment.