Sketching generalized perspective component

src/client/components/perspectives/sampo/Perspective1.js

 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'
 const ResultTable = lazy(() => import('../../facet_results/ResultTable'))
-const LeafletMap = lazy(() => import('../../facet_results/LeafletMap'))
-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'))
-const Export = lazy(() => import('../../facet_results/Export'))
+// const LeafletMap = lazy(() => import('../../facet_results/LeafletMap'))
+// 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'))
+// const Export = lazy(() => import('../../facet_results/Export'))
 
 const Perspective1 = props => {
-  const { rootUrl, perspective, screenSize, portalConfig } = props
-  const layerControlExpanded = screenSize === 'md' ||
-    screenSize === 'lg' ||
-    screenSize === 'xl'
-  let popupMaxHeight = 320
-  let popupMinWidth = 280
-  let popupMaxWidth = 280
-  if (screenSize === 'xs' || screenSize === 'sm') {
-    popupMaxHeight = 200
-    popupMinWidth = 150
-    popupMaxWidth = 150
-  }
-  return (
-    <>
-      <PerspectiveTabs
-        routeProps={props.routeProps}
-        tabs={props.perspective.tabs}
-        screenSize={props.screenSize}
-        layoutConfig={props.layoutConfig}
-      />
-      <Route
-        exact path={`${rootUrl}/${perspective.id}/faceted-search`}
-        render={() => <Redirect to={`${rootUrl}/${perspective.id}/faceted-search/table`} />}
-      />
+  const { rootUrl, perspective, /* screenSize, */ portalConfig } = props
+  const { searchMode } = perspective
+  const perspectiveID = perspective.id
+  console.log(perspective)
+  // const layerControlExpanded = screenSize === 'md' ||
+  //   screenSize === 'lg' ||
+  //   screenSize === 'xl'
+  // let popupMaxHeight = 320
+  // let popupMinWidth = 280
+  // let popupMaxWidth = 280
+  // if (screenSize === 'xs' || screenSize === 'sm') {
+  //   popupMaxHeight = 200
+  //   popupMinWidth = 150
+  //   popupMaxWidth = 150
+  // }
+  const defaultResultClassConfig = perspective.resultClasses[perspectiveID].paginatedResultsConfig
+
+  const createRouteForTab = (resultClass, resultClassConfig) => {
+    const { tabPath } = resultClassConfig
+    const facetClass = resultClassConfig.facetClass ? resultClassConfig.facetClass : resultClass
+    const Component = ResultTable
+    return (
       <Route
-        path={[`${props.rootUrl}/${perspective.id}/faceted-search/table`, '/iframe.html']}
+        path={[`${rootUrl}/${perspectiveID}/${searchMode}/${tabPath}`, '/iframe.html']}
+        key={resultClass}
         render={routeProps =>
-          <ResultTable
+          <Component
             portalConfig={portalConfig}
             data={props.perspectiveState}
             facetUpdateID={props.facetState.facetUpdateID}
-            resultClass='perspective1'
-            facetClass='perspective1'
+            resultClass={resultClass}
+            facetClass={facetClass}
             fetchPaginatedResults={props.fetchPaginatedResults}
             updatePage={props.updatePage}
             updateRowsPerPage={props.updateRowsPerPage}
@@ -54,7 +53,23 @@ const Perspective1 = props => {
             layoutConfig={props.layoutConfig}
           />}
       />
+    )
+  }
+
+  return (
+    <>
+      <PerspectiveTabs
+        routeProps={props.routeProps}
+        tabs={props.perspective.tabs}
+        screenSize={props.screenSize}
+        layoutConfig={props.layoutConfig}
+      />
       <Route
+        exact path={`${rootUrl}/${perspective.id}/faceted-search`}
+        render={() => <Redirect to={`${rootUrl}/${perspective.id}/faceted-search/table`} />}
+      />
+      {createRouteForTab(perspectiveID, defaultResultClassConfig)}
+      {/* <Route
         path={`${rootUrl}/${perspective.id}/faceted-search/production_places`}
         render={() =>
           <LeafletMap
@@ -333,7 +348,7 @@ const Perspective1 = props => {
             updatePage={props.updatePage}
             layoutConfig={props.layoutConfig}
           />}
-      />
+      /> */}
     </>
   )
 }

src/client/configs/sampo/perspective_configs/search_perspectives/perspective1.json

@@ -18,6 +18,10 @@
     "resultClasses": {
         "perspective1": {
             "paginatedResultsConfig": {
+                "component": "ResultTable",
+                "tabID": 0,
+                "tabPath": "table",
+                "tabIcon": "CalendarViewDay",
                 "propertiesQueryBlock": "manuscriptPropertiesFacetResults",
                 "paginatedResultsAlwaysExpandRows": true,
                 "paginatedResultsRowContentMaxHeight": 190,