Skip to content

Commit

Permalink
optimize table display, fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikelmaron
mikelmaron committed Feb 26, 2024
1 parent 7d0d233 commit e565582
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 68 deletions.
2 changes: 2 additions & 0 deletions site-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ var site_config = {
/* define column names to pull data from */
linkField: 'url',
countryField: 'country',
statusField: 'status',
capacityField: 'capacity',
locationColumns:{
lat: 'lat',
lng: 'lng'
Expand Down
157 changes: 91 additions & 66 deletions src/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,16 +319,18 @@ function addLayers() {
];
}

let interpolateExpression = ["linear"];
if (config.interpolateExponent) {
interpolateExpression = ["exponential", config.interpolateExponent];
}
paint['circle-radius'] = [
"interpolate", ["linear"], ["zoom"],
// 1, ["interpolate", ["exponential", 1.5],

1, ["interpolate", ["linear"],
1, ["interpolate", interpolateExpression,
["get", config.capacityField],
config.minCapacity, config.minRadius,
config.maxCapacity, config.maxRadius
],
10, ["interpolate", ["linear"],
10, ["interpolate", interpolateExpression,
["get", config.capacityField],
config.minCapacity, config.highZoomMinRadius,
config.maxCapacity, config.highZoomMaxRadius
Expand Down Expand Up @@ -357,11 +359,11 @@ function addLayers() {
'icon-allow-overlap': true,
'icon-size': [
"interpolate", ["linear"], ["zoom"],
1, ['interpolate', ['linear'],
1, ['interpolate', interpolateExpression,
["to-number", ["get", config.capacityField]],
config.minCapacity, config.minRadius * 2 / 64,
config.maxCapacity, config.maxRadius * 2 / 64],
10, ['interpolate', ['linear'],
10, ['interpolate', interpolateExpression,
["to-number", ["get", config.capacityField]],
config.minCapacity, config.highZoomMinRadius * 2 / 64,
config.maxCapacity, config.highZoomMaxRadius * 2 / 64]
Expand Down Expand Up @@ -442,11 +444,7 @@ function addEvents() {
(feature) => feature.properties[config.linkField]
);

map.setFilter('assets-highlighted', [
'in',
config.linkField,
...links
]);
setHighlightFilter(...links);

if (selectedFeatures.length == 1) {
//if (config.tiles) {
Expand All @@ -457,11 +455,11 @@ function addEvents() {
} else {
var modalText = "<h6 class='p-3'>There are multiple " + config.assetFullLabel + " near this location. Select one for more details</h6><ul>";
selectedFeatures.forEach((feature) => {
if (config.tiles) {
modalText += "<li class='asset-select-option' onClick='displayDetails(\"" + JSON.stringify([feature]).replace(/"/g, '\\"') + "\")'>" + feature.properties[config.nameField] + "</li>";
} else {
//if (config.tiles) {
// modalText += "<li class='asset-select-option' onClick='displayDetails(\"" + JSON.stringify([feature]).replace(/"/g, '\\"') + "\")'>" + feature.properties[config.nameField] + "</li>";
//} else {
modalText += "<li class='asset-select-option' onClick='displayDetails(\"" + JSON.stringify(config.linked[feature.properties[config.linkField]]).replace(/"/g, '\\"') + "\")'>" + feature.properties[config.nameField] + "</li>";
}
//}
});
modalText += "</ul>"
$('.modal-body').html(modalText);
Expand Down Expand Up @@ -505,7 +503,7 @@ function buildFilters() {
}
for (let i=0; i<filter.values.length; i++) {
let check_id = filter.field + '_' + filter.values[i];
let check = `<div class="row filter-row" data-checkid="${check_id}">`;
let check = `<div class="row filter-row" data-checkid="${(check_id).replace('/','\\/')}">`;
check += '<div class="col-sm-1 checkmark" id="' + check_id + '-checkmark"></div>';
check += `<div class="col-sm-8"><input type="checkbox" checked class="form-check-input d-none" id="${check_id}">`;
check += (config.color.field == filter.field ? '<span class="legend-dot" style="background-color:' + config.color.values[ filter.values[i] ] + '"></span>' : "");
Expand Down Expand Up @@ -595,27 +593,30 @@ function filterTiles() {
}
});

let filterExpression = [];
config.filterExpression = [];
if (config.searchText.length >= 3) {
let searchExpression = ['any'];
config.selectedSearchFields.split(',').forEach((field) => {
searchExpression.push(['in', ['literal', config.searchText], ["get", field]]);
searchExpression.push(['in', ['literal', config.searchText], ['downcase', ["get", field]]]);

});
filterExpression.push(searchExpression);
config.filterExpression.push(searchExpression);
}
if (config.selectedCountries.length > 0) {
filterExpression.push(['in', ['get', config.countryField], ['literal', config.selectedCountries]]);
config.filterExpression.push(['in', ['get', config.countryField], ['literal', config.selectedCountries]]);
}
for (let field in filterStatus) {
filterExpression.push(['in', ['get', field], ['literal', filterStatus[field]]]);
config.filterExpression.push(['in', ['get', field], ['literal', filterStatus[field]]]);
}
if (filterExpression.length > 0) {
filterExpression.unshift("all");
map.setFilter('assets', filterExpression);
if (config.filterExpression.length == 0) {
config.filterExpression = null;
} else {
map.setFilter('assets', null);
config.filterExpression.unshift("all");
}
map.setFilter('assets', config.filterExpression);
map.setFilter('assets-labels', config.filterExpression);


map.on('idle', filterGeoJSON);
}

Expand Down Expand Up @@ -668,7 +669,7 @@ function updateSummary() {
countFilteredFeatures();
config.filters.forEach((filter) => {
for (let i=0; i<filter.values.length; i++) {
let count_id = filter.field + '_' + filter.values[i] + '-count';
let count_id = (filter.field + '_' + filter.values[i] + '-count').replace('/','\\/');
$('#' + count_id).text(config.filterCount[filter.field][filter.values[i]]);
}
});
Expand All @@ -678,32 +679,14 @@ function updateSummary() {
table view
*/
function buildTable() {
config.table = $('#table').DataTable({
data: geoJSON2Table(),
searching: false,
pageLength: 100,
fixedHeader: true,
columns: config.tableHeaders.labels.map((header) => { return {'title': header}})
});

if ('rightAlign' in config.tableHeaders) {
config.tableHeaders.rightAlign.forEach((col) => {
$("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { text-align:right }', 0);
});
}
if ('noWrap' in config.tableHeaders) {
config.tableHeaders.noWrap.forEach((col) => {
$("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { white-space: nowrap }', 0);
});
}

$('#table-toggle').on("click", function() {
if ($('#table-toggle-label').text().includes("Table view")) {
$('#table-toggle-label').html("Map view <img src='../../src/img/arrow-right.svg' width='15'>");
$('#map').hide();
$('#sidebar').hide();
$('#table-container').show();
$('#basemap-toggle').hide();
updateTable(true);
} else {
$('#table-toggle-label').html("Table view <img src='../../src/img/arrow-right.svg' width='15'>");
$('#map').show();
Expand All @@ -713,9 +696,38 @@ function buildTable() {
}
});
}
function updateTable() {
config.table.clear();
config.table.rows.add(geoJSON2Table()).draw();
function createTable() {
if ('rightAlign' in config.tableHeaders) {
config.tableHeaders.rightAlign.forEach((col) => {
$("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { text-align:right }', 0);
});
}
if ('noWrap' in config.tableHeaders) {
config.tableHeaders.noWrap.forEach((col) => {
$("#site-style").get(0).sheet.insertRule('td:nth-child(' + (config.tableHeaders.values.indexOf(col)+1) + ') { white-space: nowrap }', 0);
});
}
config.table = $('#table').DataTable({
data: geoJSON2Table(),
searching: false,
pageLength: 100,
fixedHeader: true,
columns: config.tableHeaders.labels.map((header) => { return {'title': header}})
});
}
function updateTable(force) {
// table create/update with large number of rows is slow, only do it if visible
if ($('#table-container').is(':visible') || force) {
if (config.table == null) {
createTable();
} else if (config.tableDirty) {
config.table.clear();
config.table.rows.add(geoJSON2Table()).draw();
}
config.tableDirty = false;
} else {
config.tableDirty = true;
}
}
function geoJSON2Table() {
return config.preLinkedGeoJSON.features.map(feature => {
Expand All @@ -740,13 +752,28 @@ function geoJSON2Headers() {
function enableModal() {
config.modal = new bootstrap.Modal($('#modal'));
$('#modal').on('hidden.bs.modal', function (event) {
map.setFilter('assets-highlighted', [
setHighlightFilter('');
})
}
function setHighlightFilter(links) {
let filter;
if (config.filterExpression != null) {
filter = JSON.parse(JSON.stringify(config.filterExpression));
filter.push([
'==',
config.linkField,
''
["get", config.linkField],
["literal", links]
]);
})
} else {
filter = [
'==',
["get", config.linkField],
["literal", links]
];
}
map.setFilter('assets-highlighted',filter);
}

function displayDetails(features) {
if (typeof features == "string") {
features = JSON.parse(features);
Expand Down Expand Up @@ -817,12 +844,18 @@ function displayDetails(features) {
}
});

let capacity = Object.assign(...config.filters[0].values.map(f => ({[f]: 0})));
let count = Object.assign(...config.filters[0].values.map(f => ({[f]: 0})));
let filterIndex = 0;
for (const[index, filter] of config.filters.entries()) {
if (filter.field == config.statusField) {
filterIndex = index;
}
}
let capacity = Object.assign(...config.filters[filterIndex].values.map(f => ({[f]: 0})));
let count = Object.assign(...config.filters[filterIndex].values.map(f => ({[f]: 0})));

features.forEach((feature) => {
capacity[feature.properties['status']] += feature.properties['capacity'];
count[feature.properties['status']]++;
capacity[feature.properties[config.statusField]] += feature.properties[config.capacityField];
count[feature.properties[config.statusField]]++;
});

let detail_capacity = '';
Expand All @@ -849,11 +882,7 @@ function displayDetails(features) {
'</div>' +
'</div></div>');

map.setFilter('assets-highlighted', [
'==',
config.linkField,
features[0].properties[config.linkField]
]);
setHighlightFilter(features[0].properties[config.linkField]);
}
function buildSatImage(features) {
let location_arg = '';
Expand Down Expand Up @@ -887,11 +916,7 @@ function buildSatImage(features) {
}
function showAllPhases(link) {
config.modal.hide();
map.setFilter('assets-highlighted', [
'in',
config.linkField,
link
]);
setHighlightFilter(link);
var bbox = [];
config.linked[link].forEach((feature) => {
var feature_lng = Number(feature.geometry.coordinates[0]);
Expand Down
7 changes: 5 additions & 2 deletions trackers/integrated/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ var config = {
'wind': 'green'
}
},
minRadius: 2,
minRadius: 1,
maxRadius: 10,
highZoomMinRadius: 4,
highZoomMaxRadius: 32,
interpolateExponent: 1.5,
filters: [
{
field: 'Type',
values: ['coal','oilgas','nuclear','geothermal','hydro','bioenergy','solar','wind'],
values: ['coal','oil/gas','nuclear','geothermal','hydro','bioenergy','solar','wind'],
primary: true
},
{
Expand All @@ -35,7 +36,9 @@ var config = {
}
],
nameField: 'Plant/project name',
statusField: 'Status',
capacityField: 'Capacity (MW)',
capacityLabel: 'Capacity (MW)',
linkField: 'Wiki URL',
countryField: 'Country',
searchFields: { 'Project': ['Plant/project name'],
Expand Down

0 comments on commit e565582

Please sign in to comment.