Features/6364 detail page reramp dataaccess

playwright/pages/components/tab_container.py

@@ -7,7 +7,7 @@
 from pages.components.tabs.citation import CitationTab
 from pages.components.tabs.global_attr import GlobalAttrTab
 from pages.components.tabs.lineage import LineageTab
-from pages.components.tabs.links import LinksTab
+from pages.components.tabs.links import DataAccessTab
 from pages.components.tabs.metadata_info import MetadataInfoTab
 
 
@@ -22,8 +22,8 @@ def __init__(self, page: Page):
 
         # Tabs
         self.abstract = SummaryTab(page)
+        self.links = DataAccessTab(page)
         self.about = AboutTab(page)
-        self.links = LinksTab(page)
         self.lineage = LineageTab(page)
         self.metadata_info = MetadataInfoTab(page)
         self.citation = CitationTab(page)

playwright/pages/components/tabs/links.py

@@ -3,8 +3,8 @@
 from pages.base_page import BasePage
 
 
-class LinksTab(BasePage):
-    TAB_NAME = 'Links'
+class DataAccessTab(BasePage):
+    TAB_NAME = 'Data Access'
 
     def __init__(self, page: Page):
         self.page = page

src/components/common/constants.ts

@@ -23,7 +23,7 @@ const detailPageDefault = {
   ABOUT: "about",
   ASSOCIATED_RECORDS: "associated records",
   CITATION: "citation",
-  LINKS: "links",
+  DATA_ACCESS: "data_access",
   LINEAGE: "lineage",
   METADATA_INFORMATION: "metadata information",
   SUMMARY: "summary",

src/components/common/hover-tip/ComplexMapHoverTip.tsx

@@ -39,7 +39,7 @@ const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
     () =>
       tabNavigation(
         collection.id,
-        detailPageDefault.LINKS,
+        detailPageDefault.DATA_ACCESS,
         SEARCH_PAGE_REFERER
       ),
     [collection.id, tabNavigation]

src/components/common/store/OGCCollectionDefinitions.tsx

@@ -107,6 +107,7 @@ export enum RelationType {
 export enum MediaType {
   TEXT_HTML = "text/html",
   IMAGE_PNG = "image/png",
+  PYTHON_NOTEBOOK = "application/x-ipynb+json",
 }
 
 const getIcon = (href: string, rel: string) => {
@@ -203,12 +204,18 @@ export class OGCCollection {
   getLicense = (): string | undefined => this.propValue?.license;
   getCreation = (): string | undefined => this.propValue?.creation;
   getRevision = (): string | undefined => this.propValue?.revision;
+  getPythonNotebook = (): ILink[] | undefined =>
+    this.links?.filter((link) => link.type === MediaType.PYTHON_NOTEBOOK);
   getDataAccessLinks = (): ILink[] | undefined =>
     this.links?.filter(
       (link) => link.rel === RelationType.WMS || link.rel === RelationType.WFS
     );
   getDistributionLinks = (): ILink[] | undefined =>
-    this.links?.filter((link) => link.rel === RelationType.RELATED);
+    this.links?.filter(
+      (link) =>
+        link.rel === RelationType.RELATED &&
+        link.type !== MediaType.PYTHON_NOTEBOOK
+    );
   getMetadataUrl = (): string | undefined =>
     this.links?.filter(
       (link) =>

src/components/list/DataAccessList.tsx

@@ -0,0 +1,75 @@
+import React, { FC, useState } from "react";
+import ExpandableList from "./ExpandableList";
+import ItemBaseGrid from "./listItem/ItemBaseGrid";
+import { ILink } from "../common/store/OGCCollectionDefinitions";
+import LinkCard from "./listItem/subitem/LinkCard";
+import NaList from "./NaList";
+
+interface DataAccessListProps {
+  linksToData?: ILink[];
+  dataAccessLinks?: ILink[];
+  pythonNotebook?: ILink[];
+}
+
+const DataAccessList: FC<DataAccessListProps> = ({
+  linksToData = [],
+  dataAccessLinks = [],
+  pythonNotebook = [],
+}) => {
+  const [clickedCopyLinkButtonIndex, setClickedCopyLinkButtonIndex] = useState<
+    number[]
+  >([]);
+
+  const pythonNotebookItems = pythonNotebook.map(
+    (link: ILink, index: number) => (
+      <ItemBaseGrid key={index} sx={{}}>
+        <LinkCard
+          key={index}
+          index={index}
+          link={link}
+          clickedCopyLinkButtonIndex={clickedCopyLinkButtonIndex}
+          setClickedCopyLinkButtonIndex={setClickedCopyLinkButtonIndex}
+        />
+      </ItemBaseGrid>
+    )
+  );
+
+  const linksToDataItems = linksToData.map((link: ILink, index: number) => (
+    <ItemBaseGrid key={index} sx={{}}>
+      <LinkCard
+        key={index}
+        index={index}
+        link={link}
+        clickedCopyLinkButtonIndex={clickedCopyLinkButtonIndex}
+        setClickedCopyLinkButtonIndex={setClickedCopyLinkButtonIndex}
+      />
+    </ItemBaseGrid>
+  ));
+
+  const dataAccessItems = dataAccessLinks.map((link: ILink, index: number) => (
+    <ItemBaseGrid key={index} sx={{}}>
+      <LinkCard
+        key={index}
+        index={index}
+        link={link}
+        clickedCopyLinkButtonIndex={clickedCopyLinkButtonIndex}
+        setClickedCopyLinkButtonIndex={setClickedCopyLinkButtonIndex}
+      />
+    </ItemBaseGrid>
+  ));
+
+  return dataAccessItems ? (
+    <>
+      <ExpandableList childrenList={linksToDataItems} title="Links to Data" />
+      <ExpandableList childrenList={dataAccessItems} title="Data Access List" />
+      <ExpandableList
+        childrenList={pythonNotebookItems}
+        title="Python Notebook"
+      />
+    </>
+  ) : (
+    <NaList title={"Data Access"} />
+  );
+};
+
+export default DataAccessList;

src/components/list/listItem/subitem/LinkCard.tsx

@@ -42,22 +42,6 @@ const LinkCard: FC<LinkCardProps> = ({
       data-testid="links-card"
     >
       <Grid container>
-        {setClickedCopyLinkButtonIndex && (
-          <Grid item xs={2}>
-            <Box
-              sx={{
-                visibility:
-                  isShowCopyLinkButton || hasBeenCopied ? "visible" : "hidden",
-              }}
-            >
-              <CopyLinkButton
-                index={index}
-                setClickedCopyLinkButtonIndex={setClickedCopyLinkButtonIndex}
-                copyUrl={link.href}
-              />
-            </Box>
-          </Grid>
-        )}
         <Grid item xs={setClickedCopyLinkButtonIndex ? 10 : 12}>
           <Grid container spacing={1} aria-label="link and title">
             {icon && link.getIcon && (
@@ -107,6 +91,22 @@ const LinkCard: FC<LinkCardProps> = ({
             </Grid>
           </Grid>
         </Grid>
+        {setClickedCopyLinkButtonIndex && (
+          <Grid item xs={2}>
+            <Box
+              sx={{
+                visibility:
+                  isShowCopyLinkButton || hasBeenCopied ? "visible" : "hidden",
+              }}
+            >
+              <CopyLinkButton
+                index={index}
+                setClickedCopyLinkButtonIndex={setClickedCopyLinkButtonIndex}
+                copyUrl={link.href}
+              />
+            </Box>
+          </Grid>
+        )}
       </Grid>
     </Box>
   );

src/components/map/mapbox/layers/DetailSymbolLayer.tsx

@@ -126,14 +126,16 @@ const DetailSymbolLayer: FC<LayerBasicType> = ({
         data: featureCollection,
       });
 
-      map?.loadImage("/images/legend1.png", (error, image) => {
-        if (error) {
-          throw error;
-        }
-        if (image) {
-          map?.addImage("legend1_img", image);
-        }
-      });
+      if (!map?.hasImage("legend1_img")) {
+        map?.loadImage("/images/legend1.png", (error, image) => {
+          if (error) {
+            throw error;
+          }
+          if (image) {
+            map?.addImage("legend1_img", image);
+          }
+        });
+      }
 
       map?.addLayer({
         id: clusterLayer,

src/components/result/ResultCards.tsx

@@ -220,7 +220,7 @@ const ResultCards: FC<ResultCardsProps> = ({
 
   const onClickLinks = useCallback(
     (uuid: string) =>
-      goToDetailPage(uuid, detailPageDefault.LINKS, SEARCH_PAGE_REFERER),
+      goToDetailPage(uuid, detailPageDefault.DATA_ACCESS, SEARCH_PAGE_REFERER),
     [goToDetailPage]
   );
 

src/pages/detail-page/DetailsPage.tsx

@@ -8,10 +8,8 @@ import ContentSection from "./subpages/ContentSection";
 import SectionContainer from "../../components/layout/components/SectionContainer";
 import { LngLatBounds, MapLayerMouseEvent } from "mapbox-gl";
 import { useCallback, useState } from "react";
-import useBreakpoint from "../../hooks/useBreakpoint";
 
 const DetailsPage = () => {
-  const { isUnderLaptop } = useBreakpoint();
   const [bbox, setBbox] = useState<LngLatBounds | undefined>(undefined);
   const onSpatialCoverageLayerClick = useCallback(
     (evt: MapLayerMouseEvent) => {