From 1b211a04efef03b40f36635521f1f94711638349 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 13 Dec 2021 17:55:31 +0200
Subject: [PATCH] JSON config for deck.gl
---
.../perspectives/sampo/Perspective1.js | 195 +++++-------------
.../search_perspectives/perspective1.json | 43 +++-
src/client/translations/sampo/localeEN.json | 2 +-
3 files changed, 100 insertions(+), 140 deletions(-)
diff --git a/src/client/components/perspectives/sampo/Perspective1.js b/src/client/components/perspectives/sampo/Perspective1.js
index bfdb5607..94f3951e 100644
--- a/src/client/components/perspectives/sampo/Perspective1.js
+++ b/src/client/components/perspectives/sampo/Perspective1.js
@@ -1,12 +1,12 @@
import React, { lazy } from 'react'
import PropTypes from 'prop-types'
-// import intl from 'react-intl-universal'
+import intl from 'react-intl-universal'
import { Route, Redirect } from 'react-router-dom'
import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
import { has } from 'lodash'
const ResultTable = lazy(() => import('../../facet_results/ResultTable'))
const LeafletMap = lazy(() => import('../../facet_results/LeafletMap'))
-// const Deck = lazy(() => import('../../facet_results/Deck'))
+const Deck = lazy(() => import('../../facet_results/Deck'))
// const ApexChart = lazy(() => import('../../facet_results/ApexChart'))
// const BarChartRace = lazy(() => import('../../facet_results/BarChartRace'))
// const Network = lazy(() => import('../../facet_results/Network'))
@@ -43,6 +43,7 @@ const Perspective1 = props => {
const { component, tabPath } = resultClassConfig
const path = [`${rootUrl}/${perspectiveID}/${searchMode}/${tabPath}`, '/iframe.html']
const facetClass = resultClassConfig.facetClass ? resultClassConfig.facetClass : resultClass
+ const resultClassMap = maps[resultClass]
let routeComponent
switch (component) {
case 'ResultTable':
@@ -69,8 +70,7 @@ const Perspective1 = props => {
)
break
case 'LeafletMap': {
- const resultClassMap = maps[resultClass]
- const { facetID, mapMode = 'cluster', customMapControl = false } = resultClassConfig
+ const { facetID = null, mapMode = 'cluster', customMapControl = false } = resultClassConfig
routeComponent = (
<Route
path={path}
@@ -114,10 +114,58 @@ const Perspective1 = props => {
)
break
}
- // case 'Deck':
- // routeComponent = (
-
- // )
+ case 'Deck': {
+ const { layerType, showTooltips = false } = resultClassConfig
+ const { instanceAnalysisData, instanceAnalysisDataUpdateID } = perspectiveState
+ let deckProps = {
+ portalConfig,
+ center: resultClassMap.center,
+ zoom: resultClassMap.zoom,
+ results: perspectiveState.results,
+ facetUpdateID: facetState.facetUpdateID,
+ resultClass,
+ facetClass,
+ fetchResults: props.fetchResults,
+ fetching: perspectiveState.fetching,
+ fetchInstanceAnalysis: props.fetchInstanceAnalysis,
+ fetchingInstanceAnalysisData: perspectiveState.fetchingInstanceAnalysisData,
+ layerType,
+ updateMapBounds: props.updateMapBounds,
+ showTooltips,
+ layoutConfig: props.layoutConfig
+ }
+ if (instanceAnalysisData) {
+ deckProps = {
+ ...deckProps,
+ instanceAnalysisData,
+ instanceAnalysisDataUpdateID
+ }
+ }
+ if (layerType === 'arcLayer') {
+ const { arcWidthVariable, instanceVariable } = resultClassConfig
+ deckProps = {
+ ...deckProps,
+ getArcWidth: d => d[arcWidthVariable],
+ fromText: intl.get(`deckGlMap.${resultClass}.from`),
+ toText: intl.get(`deckGlMap.${resultClass}.to`),
+ countText: intl.get(`deckGlMap.${resultClass}.count`),
+ legendTitle: intl.get(`deckGlMap.${resultClass}.legendTitle`),
+ legendFromText: intl.get(`deckGlMap.${resultClass}.legendFrom`),
+ legendToText: intl.get(`deckGlMap.${resultClass}.legendTo`),
+ showMoreText: intl.get('deckGlMap.showMoreInformation'),
+ listHeadingSingleInstance: intl.get(`deckGlMap.${resultClass}.listHeadingSingleInstance`),
+ listHeadingMultipleInstances: intl.get(`deckGlMap.${resultClass}.listHeadingMultipleInstances`),
+ instanceVariable
+ }
+ }
+ routeComponent = (
+ <Route
+ path={path}
+ key={resultClass}
+ render={() => <Deck {...deckProps} />}
+ />
+ )
+ }
// case 'ApexChart':
// routeComponent = (
@@ -147,136 +195,7 @@ const Perspective1 = props => {
render={() => <Redirect to={`${rootUrl}/${perspective.id}/faceted-search/table`} />}
/>
{Object.keys(perspective.resultClasses).map(resultClass => createRouteForResultClass(resultClass))}
- {/* <Route
- path={`${rootUrl}/${perspective.id}/faceted-search/production_places`}
- render={() =>
- <LeafletMap
- portalConfig={portalConfig}
- center={props.perspectiveState.maps.placesMsProduced.center}
- zoom={props.perspectiveState.maps.placesMsProduced.zoom}
- // center={[60.187, 24.821]}
- // zoom={13}
- // locateUser
- results={props.perspectiveState.results}
- leafletMapState={props.leafletMapState}
- pageType='facetResults'
- facetUpdateID={props.facetState.facetUpdateID}
- facet={props.facetState.facets.productionPlace}
- facetID='productionPlace'
- resultClass='placesMsProduced'
- facetClass='perspective1'
- mapMode='cluster'
- instance={props.perspectiveState.instanceTableData}
- createPopUpContent={props.leafletConfig.createPopUpContentMMM}
- popupMaxHeight={popupMaxHeight}
- popupMinWidth={popupMinWidth}
- popupMaxWidth={popupMaxWidth}
- fetchResults={props.fetchResults}
- fetchGeoJSONLayers={props.fetchGeoJSONLayers}
- clearGeoJSONLayers={props.clearGeoJSONLayers}
- fetchByURI={props.fetchByURI}
- fetching={props.perspectiveState.fetching}
- showInstanceCountInClusters
- updateFacetOption={props.updateFacetOption}
- updateMapBounds={props.updateMapBounds}
- showError={props.showError}
- showExternalLayers
- layerControlExpanded={layerControlExpanded}
- // customMapControl
- layerConfigs={props.leafletConfig.layerConfigs}
- infoHeaderExpanded={props.perspectiveState.facetedSearchHeaderExpanded}
- layoutConfig={props.layoutConfig}
- />}
- />
- <Route
- path={`${rootUrl}/${perspective.id}/faceted-search/production_places_heatmap`}
- render={() =>
- <Deck
- portalConfig={portalConfig}
- center={props.perspectiveState.maps.placesMsProducedHeatmap.center}
- zoom={props.perspectiveState.maps.placesMsProducedHeatmap.zoom}
- results={props.perspectiveState.results}
- facetUpdateID={props.facetState.facetUpdateID}
- resultClass='placesMsProducedHeatmap'
- facetClass='perspective1'
- fetchResults={props.fetchResults}
- fetching={props.perspectiveState.fetching}
- layerType='heatmapLayer'
- updateMapBounds={props.updateMapBounds}
- layoutConfig={props.layoutConfig}
- />}
- />
- <Route
- path={`${rootUrl}/${perspective.id}/faceted-search/last_known_locations`}
- render={() =>
- <LeafletMap
- portalConfig={portalConfig}
- center={props.perspectiveState.maps.lastKnownLocations.center}
- zoom={props.perspectiveState.maps.lastKnownLocations.zoom}
- results={props.perspectiveState.results}
- leafletMapState={props.leafletMapState}
- pageType='facetResults'
- facetUpdateID={props.facetState.facetUpdateID}
- facet={props.facetState.facets.lastKnownLocation}
- facetID='lastKnownLocation'
- resultClass='lastKnownLocations'
- facetClass='perspective1'
- mapMode='cluster'
- showMapModeControl={false}
- instance={props.perspectiveState.instanceTableData}
- createPopUpContent={props.leafletConfig.createPopUpContentMMM}
- popupMaxHeight={popupMaxHeight}
- popupMinWidth={popupMinWidth}
- popupMaxWidth={popupMaxWidth}
- fetchResults={props.fetchResults}
- fetchGeoJSONLayers={props.fetchGeoJSONLayers}
- clearGeoJSONLayers={props.clearGeoJSONLayers}
- fetchByURI={props.fetchByURI}
- fetching={props.perspectiveState.fetching}
- showInstanceCountInClusters
- updateFacetOption={props.updateFacetOption}
- updateMapBounds={props.updateMapBounds}
- showError={props.showError}
- showExternalLayers
- layerControlExpanded={layerControlExpanded}
- layerConfigs={props.leafletConfig.layerConfigs}
- infoHeaderExpanded={props.perspectiveState.facetedSearchHeaderExpanded}
- layoutConfig={props.layoutConfig}
- />}
- />
- <Route
- path={`${rootUrl}/${perspective.id}/faceted-search/migrations`}
- render={() =>
- <Deck
- portalConfig={portalConfig}
- center={props.perspectiveState.maps.placesMsMigrations.center}
- zoom={props.perspectiveState.maps.placesMsMigrations.zoom}
- results={props.perspectiveState.results}
- facetUpdateID={props.facetState.facetUpdateID}
- instanceAnalysisData={props.perspectiveState.instanceAnalysisData}
- instanceAnalysisDataUpdateID={props.perspectiveState.instanceAnalysisDataUpdateID}
- resultClass='placesMsMigrations'
- facetClass='perspective1'
- fetchResults={props.fetchResults}
- fetchInstanceAnalysis={props.fetchInstanceAnalysis}
- fetching={props.perspectiveState.fetching}
- fetchingInstanceAnalysisData={props.perspectiveState.fetchingInstanceAnalysisData}
- layerType='arcLayer'
- getArcWidth={d => d.instanceCountScaled}
- fromText={intl.get('deckGlMap.manuscriptMigrations.from')}
- toText={intl.get('deckGlMap.manuscriptMigrations.to')}
- countText={intl.get('deckGlMap.manuscriptMigrations.count')}
- legendTitle={intl.get('deckGlMap.manuscriptMigrations.legendTitle')}
- legendFromText={intl.get('deckGlMap.manuscriptMigrations.legendFrom')}
- legendToText={intl.get('deckGlMap.manuscriptMigrations.legendTo')}
- showMoreText={intl.get('deckGlMap.showMoreInformation')}
- listHeadingSingleInstance={intl.get('deckGlMap.manuscriptMigrations.listHeadingSingleInstance')}
- listHeadingMultipleInstances={intl.get('deckGlMap.manuscriptMigrations.listHeadingMultipleInstances')}
- instanceVariable='manuscript'
- showTooltips
- layoutConfig={props.layoutConfig}
- />}
- />
+ {/*
<Route
path={`${rootUrl}/${perspective.id}/faceted-search/choropleth_map`}
render={() =>
diff --git a/src/client/configs/sampo/perspective_configs/search_perspectives/perspective1.json b/src/client/configs/sampo/perspective_configs/search_perspectives/perspective1.json
index 8d9c2fc5..e4151043 100644
--- a/src/client/configs/sampo/perspective_configs/search_perspectives/perspective1.json
+++ b/src/client/configs/sampo/perspective_configs/search_perspectives/perspective1.json
@@ -49,23 +49,44 @@
}
},
"placesMsProducedHeatmap": {
+ "tabID": 2,
+ "component": "Deck",
+ "tabPath": "production_places_heatmap",
+ "tabIcon": "AddLocation",
"sparqlQuery": "productionPlacesQuery",
+ "facetClass": "perspective1",
"filterTarget": "manuscripts",
- "resultMapper": "mapPlaces"
+ "resultMapper": "mapPlaces",
+ "layerType": "heatmapLayer"
},
"lastKnownLocations": {
+ "tabID": 5,
+ "component": "LeafletMap",
+ "tabPath": "last_known_locations",
+ "tabIcon": "LocationOn",
"sparqlQuery": "lastKnownLocationsQuery",
+ "facetClass": "perspective1",
"filterTarget": "manuscripts",
"resultMapper": "mapPlaces",
+ "facetID": "lastKnownLocation",
"instanceConfig": {
"propertiesQueryBlock": "placePropertiesInfoWindow",
"relatedInstances": "lastKnownLocationsAt"
}
},
"placesMsMigrations": {
+ "tabID": 6,
+ "component": "Deck",
+ "tabPath": "migrations",
+ "tabIcon": "Redo",
"sparqlQuery": "migrationsQuery",
+ "facetClass": "perspective1",
"filterTarget": "manuscript",
"resultMapper": "makeObjectList",
+ "layerType": "arcLayer",
+ "arcWidthVariable": "instanceCountScaled",
+ "instanceVariable": "manuscript",
+ "showTooltips": true,
"postprocess": {
"func": "linearScale",
"config": {
@@ -81,7 +102,12 @@
"resultMapper": "makeObjectList"
},
"productionTimespanLineChart": {
+ "tabID": 1,
+ "component": "LeafletMap",
+ "tabPath": "production_places",
+ "tabIcon": "AddLocation",
"sparqlQuery": "productionsByDecadeQuery",
+ "facetClass": "perspective1",
"filterTarget": "instanceConfig",
"resultMapper": "mapLineChart",
"resultMapperConfig": {
@@ -89,7 +115,12 @@
}
},
"productionsByDecadeAndCountry": {
+ "tabID": 1,
+ "component": "LeafletMap",
+ "tabPath": "production_places",
+ "tabIcon": "AddLocation",
"sparqlQuery": "productionsByDecadeAndCountryQuery",
+ "facetClass": "perspective1",
"filterTarget": "manuscript",
"resultMapper": "makeObjectList",
"postprocess": {
@@ -100,7 +131,12 @@
}
},
"eventLineChart": {
+ "tabID": 1,
+ "component": "LeafletMap",
+ "tabPath": "production_places",
+ "tabIcon": "AddLocation",
"sparqlQuery": "eventsByDecadeQuery",
+ "facetClass": "perspective1",
"filterTarget": "manuscript",
"resultMapper": "mapMultipleLineChart",
"resultMapperConfig": {
@@ -113,7 +149,12 @@
"useNetworkAPI": true
},
"manuscriptFacetResultsNetwork": {
+ "tabID": 1,
+ "component": "LeafletMap",
+ "tabPath": "production_places",
+ "tabIcon": "AddLocation",
"sparqlQuery": "manuscriptFacetResultsNetworkLinksQuery",
+ "facetClass": "perspective1",
"sparqlQueryNodes": "manuscriptNetworkNodesQuery",
"filterTarget": "manuscript",
"useNetworkAPI": true
diff --git a/src/client/translations/sampo/localeEN.json b/src/client/translations/sampo/localeEN.json
index 8fc5f24b..e1243988 100644
--- a/src/client/translations/sampo/localeEN.json
+++ b/src/client/translations/sampo/localeEN.json
@@ -165,7 +165,7 @@
"deckGlMap": {
"arcColouring": "Arc colouring:",
"showMoreInformation": "Click to show more information.",
- "manuscriptMigrations": {
+ "placesMsMigrations": {
"legendTitle": "Arc colouring",
"legendFrom": "Manuscript production place",
"legendTo": "Last known location",
--
GitLab