feat: unique more info modal for all geomaps

Author: andreishket

vis/js/templates/modals/InfoModal.tsx

@@ -1,34 +1,43 @@
 // @ts-nocheck
 
 import React from "react";
-import { connect } from "react-redux";
 import { Modal } from "react-bootstrap";
+import { connect } from "react-redux";
 
-import { closeInfoModal } from "../../actions";
-import { STREAMGRAPH_MODE } from "../../reducers/chartType";
+import { useVisualizationType } from "@/hooks";
 
+import { closeInfoModal } from "../../actions";
 import BaseInfo from "./infomodal/BaseInfo";
 import CovisInfo from "./infomodal/CovisInfo";
 import DefaultKMInfo from "./infomodal/DefaultKMInfo";
 import DefaultSGInfo from "./infomodal/DefaultSGInfo";
+import OpenAireInfo from "./infomodal/OpenAireInfo";
+import OrcidInfo from "./infomodal/OrcidInfo";
 import PubMedInfo from "./infomodal/PubMedInfo";
 import TripleKMInfo from "./infomodal/TripleKMInfo";
 import TripleSGInfo from "./infomodal/TripleSGInfo";
 import ViperInfo from "./infomodal/ViperInfo";
-import OpenAireInfo from "./infomodal/OpenAireInfo";
-import OrcidInfo from "./infomodal/OrcidInfo";
 
+const getInfoTemplate = (
+  service: string,
+  isStreamgraph: boolean,
+  modalType: string,
+  isGeomap: boolean,
+) => {
+  if (isGeomap) {
+    return BaseInfo;
+  }
 
-const getInfoTemplate = (service: string, isStreamgraph: boolean, modalType: string) => {
   switch (service) {
     case "base":
       return BaseInfo;
     case "pubmed":
       return PubMedInfo;
     case "openaire":
-      if (modalType && modalType === 'openaire') {
+      if (modalType && modalType === "openaire") {
         return OpenAireInfo;
-      } else if (modalType && modalType === 'viper') {
+      }
+      if (modalType && modalType === "viper") {
         return ViperInfo;
       }
       return OpenAireInfo;
@@ -45,19 +54,25 @@ const getInfoTemplate = (service: string, isStreamgraph: boolean, modalType: str
   }
 };
 
-const InfoModal = ({open, onClose, params, service, isStreamgraph, modalInfoType}) => {
-  const InfoTemplate = getInfoTemplate(service, isStreamgraph, modalInfoType);
+const InfoModal = ({ open, onClose, params, service, modalInfoType }) => {
+  const { isStreamgraph, isGeoMap } = useVisualizationType();
+
+  const InfoTemplate = getInfoTemplate(
+    service,
+    isStreamgraph,
+    modalInfoType,
+    isGeoMap,
+  );
 
   return (
-      // html template starts here
-      <Modal id="info_modal" show={open} onHide={onClose} animation>
-        <InfoTemplate params={params} isStreamgraph={isStreamgraph}/>
-      </Modal>
-      // html template ends here
+    // html template starts here
+    <Modal id="info_modal" show={open} onHide={onClose} animation>
+      <InfoTemplate params={params} isStreamgraph={isStreamgraph} />
+    </Modal>
+    // html template ends here
   );
 };
 
-
 const mapStateToProps = (state) => ({
   open: state.modals.openInfoModal,
   params: {
@@ -68,9 +83,8 @@ const mapStateToProps = (state) => ({
     author: state.author,
   },
   service: state.isCovis ? "covis" : state.service,
-  isStreamgraph: state.chartType === STREAMGRAPH_MODE,
   // new parameter from config to render correct type of info modal window
-  modalInfoType: state.modalInfoType
+  modalInfoType: state.modalInfoType,
 });
 
 const mapDispatchToProps = (dispatch) => ({

vis/js/templates/modals/infomodal/BaseInfo.tsx

@@ -2,16 +2,27 @@
 
 import React from "react";
 
-import baseLogo from "../../../../images/logos/base_logo.png";
+import { useVisualizationType } from "@/hooks";
 
+import baseLogo from "../../../../images/logos/base_logo.png";
+import { StandardGeomapInfo } from "./subcomponents/StandardGeomapInfo";
 import StandardKMInfo from "./subcomponents/StandardKMInfo";
 import StandardSGInfo from "./subcomponents/StandardSGInfo";
 
-const BaseInfo = ({ params, isStreamgraph }) => {
-  const MainTemplate = isStreamgraph ? StandardSGInfo : StandardKMInfo;
+const BaseInfo = ({ params }) => {
+  const { isGeoMap, isStreamgraph } = useVisualizationType();
+
+  let MainTemplate = StandardKMInfo;
+
+  if (isStreamgraph) {
+    MainTemplate = StandardSGInfo;
+  }
+
+  if (isGeoMap) {
+    MainTemplate = StandardGeomapInfo;
+  }
 
   return (
-    // html template starts here
     <MainTemplate
       serviceName="BASE"
       serviceDesc={
@@ -31,7 +42,6 @@ const BaseInfo = ({ params, isStreamgraph }) => {
       }
       params={params}
     />
-    // html template ends here
   );
 };
 

vis/js/templates/modals/infomodal/subcomponents/StandardGeomapInfo.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { Modal } from "react-bootstrap";
+
+import { queryConcatenator } from "@/js/utils/data";
+import { unescapeHTML } from "@/js/utils/unescapeHTMLentities";
+
+import AboutSoftware from "./AboutSoftware";
+
+interface StandardGeomapInfoProps {
+  params: {
+    query: string;
+    customTitle: string;
+    q_advanced: string;
+  };
+}
+
+export const StandardGeomapInfo: FC<StandardGeomapInfoProps> = ({ params }) => {
+  const { query, customTitle, q_advanced: queryAdvanced } = params;
+
+  const queryAfterConcatenate = queryConcatenator([query, queryAdvanced]);
+  const saveCustomTitle = customTitle && unescapeHTML(customTitle);
+
+  return (
+    <>
+      <Modal.Header closeButton>
+        <Modal.Title id="info-title">What's this?</Modal.Title>
+      </Modal.Header>
+      <Modal.Body id="info-body">
+        {(!!saveCustomTitle || !!query || !!queryAdvanced) && (
+          <p>
+            This geo map presents you with an overview of{" "}
+            <strong className="hs-strong">
+              {saveCustomTitle ? saveCustomTitle : queryAfterConcatenate}
+            </strong>
+          </p>
+        )}
+        {!!saveCustomTitle && (
+          <p>
+            This map has a custom title and was created using the following
+            query:{" "}
+            <strong className="hs-strong">{queryAfterConcatenate}</strong>
+          </p>
+        )}
+        <AboutSoftware />
+      </Modal.Body>
+    </>
+  );
+};