Add all compare map info to share maps, use mosaic

app/assets/scripts/components/share-map/index.js

@@ -4,20 +4,30 @@ import PageHeader from '../common/page-header';
 import toasts from '../common/toasts';
 import { PageBody } from '../../styles/page';
 import { MapContainer, TileLayer, FeatureGroup } from 'react-leaflet';
-import { useMosaics } from '../../context/global';
+
+import { getMosaicTileUrl } from '../../utils/mosaics';
+import { toTitleCase } from '../../utils/format';
+import { composeMosaicName } from '../compare-map';
+import { Accordion, AccordionFold as BaseFold } from '@devseed-ui/accordion';
 
 import { useParams } from 'react-router-dom';
 import App from '../common/app';
 import {
   MAX_BASE_MAP_ZOOM_LEVEL,
   BaseMapLayer,
 } from '../common/map/base-map-layer';
+import {
+  PanelBlock,
+  PanelBlockHeader,
+  PanelBlockFooter,
+  PanelBlockBody,
+} from '../common/panel-block';
+import DetailsList from '../common/details-list';
 import { BOUNDS_PADDING } from '../common/map/constants';
 import config from '../../config';
 import { useAuth } from '../../context/auth';
 import logger from '../../utils/logger';
 import {
-  ClassList,
   Class,
   Thumbnail as ClassThumbnail,
   ClassHeading,
@@ -29,42 +39,73 @@ import { DownloadAoiButton } from '../profile/project/batch-list';
 import LayersPanel from './layers-control';
 import GenericControl from '../common/map/generic-control';
 
-const { restApiEndpoint, tileUrlTemplate } = config;
+const { restApiEndpoint } = config;
 
-const ClassLegend = styled(ClassList)`
+const AOIPanel = styled(PanelBlock)`
   background: ${themeVal('color.surface')};
   position: absolute;
   bottom: ${glsp(2)};
   right: ${glsp(2)};
-  padding: ${glsp(1.5)};
-  grid-gap: ${glsp(0.25)};
+  left: ${({ leftPanel }) => leftPanel && glsp(2)};
+  padding: ${glsp()} ${glsp(1.5)};
+  gap: ${glsp(0.5)};
   z-index: 401;
-  width: 16rem;
+  width: 22rem;
   overflow: hidden;
-
-  > ${Heading} {
+  ${PanelBlockHeader} {
     padding: 0;
+  }
+  ${Heading} {
     margin: 0;
   }
+  ${PanelBlockFooter} {
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    gap: ${glsp()};
+    > * {
+      flex: 1;
+    }
+  }
   ${Class} {
     grid-template-columns: 1rem minmax(10px, 1fr);
+    gap: 0 ${glsp(0.5)};
     padding: 0;
     min-height: 0;
   }
   ${ClassHeading} {
     white-space: normal;
+    font-size: 0.875rem;
   }
   ${ClassThumbnail} {
-    width: ${glsp()};
-    height: ${glsp()};
+    width: ${glsp(0.875)};
+    height: ${glsp(0.875)};
     border: 1px solid ${themeVal('color.baseAlphaD')};
   }
 `;
 
+const AccordionFold = styled(BaseFold)`
+  header {
+    a {
+      padding: ${glsp(0.5)} 0;
+      &:active {
+        transform: none;
+      }
+    }
+  }
+  > div {
+    overflow: visible;
+    & > div {
+      padding: 1rem 2rem;
+      margin: 0 -2rem;
+    }
+  }
+`;
+
 const INITIAL_MAP_LAYERS = {
   mosaic: {
     id: 'mosaic',
-    name: 'naip.latest',
+    name: 'Mosaic',
     opacity: 1,
     visible: true,
     active: true,
@@ -87,8 +128,7 @@ function ShareMap() {
   const [showLayersControl, setShowLayersControl] = useState(false);
   const [classes, setClasses] = useState([]);
   const [aoiInfo, setAoiInfo] = useState({ id: null, projectId: null });
-  const { mosaics } = useMosaics();
-  const mosaic = mosaics && mosaics.length > 0 ? mosaics[0] : null;
+  const [mosaicUrl, setMosaicUrl] = useState(null);
 
   useEffect(() => {
     if (!mapRef) return;
@@ -107,8 +147,10 @@ function ShareMap() {
       setAoiInfo({
         id: aoiData.aoi_id,
         projectId: aoiData.project_id,
-        timeframe: aoiData.timeframe_id,
+        timeframe_id: aoiData.timeframe_id,
+        ...aoiData,
       });
+      setMosaicUrl(getMosaicTileUrl(aoiData.mosaic));
       if (aoiData.bounds && aoiData.bounds.coordinates) {
         const bounds = [
           aoiData.bounds.coordinates[0][0].reverse(),
@@ -128,7 +170,7 @@ function ShareMap() {
         <DownloadAoiButton
           aoi={aoiInfo.id}
           projectId={aoiInfo.projectId}
-          timeframeId={aoiInfo?.timeframe}
+          timeframeId={aoiInfo?.timeframe_id}
           uuid={uuid}
           variation='primary-raised-dark'
         >
@@ -142,10 +184,15 @@ function ShareMap() {
           whenCreated={(m) => setMapRef(m)}
         >
           <BaseMapLayer />
-          {mosaic && (
+          {mosaicUrl && aoiInfo.mosaic && (
             <TileLayer
-              url={tileUrlTemplate.replace('{LAYER_NAME}', mosaic)}
-              attribution='&copy; NAIP'
+              url={mosaicUrl}
+              attribution={toTitleCase(
+                `${aoiInfo.mosaic?.params.collection.replace(
+                  /-/g,
+                  ' '
+                )} | Microsoft Planetary Computer`
+              )}
               minZoom={12}
               maxZoom={20}
               zIndex={2}
@@ -183,26 +230,62 @@ function ShareMap() {
           mapLayers={mapLayers}
           setMapLayers={setMapLayers}
         />
-        <ClassLegend>
-          <Subheading>LULC Classes</Subheading>
-          {classes.length > 1
-            ? classes.map((c) => (
-                <Class key={c.name} noHover>
-                  <ClassThumbnail color={c.color} />
-                  <ClassHeading size='xsmall'>{c.name}</ClassHeading>
-                </Class>
-              ))
-            : [1, 2, 3].map((i) => (
-                <Class
-                  key={i}
-                  placeholder={+true}
-                  className='placeholder-class'
-                >
-                  <ClassThumbnail />
-                  <ClassHeading size='xsmall' placeholder={+true} />
-                </Class>
-              ))}
-        </ClassLegend>
+        {aoiInfo.mosaic && (
+          <AOIPanel>
+            <Accordion
+              className='aoi__panel'
+              foldCount={1}
+              initialState={[true]}
+            >
+              {({ checkExpanded, setExpanded }) => (
+                <AccordionFold
+                  title={aoiInfo.aoi.name}
+                  isFoldExpanded={checkExpanded(0)}
+                  setFoldExpanded={(v) => setExpanded(0, v)}
+                  content={
+                    <DetailsList
+                      styles={{
+                        fontSize: '0.875rem',
+                        gridTemplateColumns: 'minmax(0,3fr) minmax(0,4fr)',
+                      }}
+                      details={{
+                        'Imagery source': toTitleCase(
+                          aoiInfo.mosaic?.params.collection.replace('-', ' ')
+                        ),
+                        Mosaic: composeMosaicName(
+                          aoiInfo.mosaic.mosaic_ts_start,
+                          aoiInfo.mosaic.mosaic_ts_end
+                        ),
+                        Model: aoiInfo.model.name,
+                        Checkpoint: aoiInfo.checkpoint.name,
+                      }}
+                    />
+                  }
+                />
+              )}
+            </Accordion>
+            <PanelBlockBody>
+              <Subheading>LULC Classes</Subheading>
+              {classes.length > 1
+                ? classes.map((c) => (
+                    <Class key={c.name} noHover>
+                      <ClassThumbnail color={c.color} />
+                      <ClassHeading size='xsmall'>{c.name}</ClassHeading>
+                    </Class>
+                  ))
+                : [1, 2, 3].map((a) => (
+                    <Class
+                      key={a}
+                      placeholder={+true}
+                      className='placeholder-class'
+                    >
+                      <ClassThumbnail />
+                      <ClassHeading size='xsmall' placeholder={+true} />
+                    </Class>
+                  ))}
+            </PanelBlockBody>
+          </AOIPanel>
+        )}
       </PageBody>
     </App>
   );