feat: génération de pyramide raster à partir de WMS-Vecteur et public…

…ation en WMS-Raster/WMTS (#470, #517) * refactor: pyramid -> pyramidVector #470 * feat: début formulaire génération de pyramide #470 * feat: ZoomRange utilisant Range de dsfr et possibilité d'avoir un seul des zoom top ou bottom #470 #362 * chore: sauvegarde * feat: visualisation WMS-Raster #470 * feat: fin de formulaire génération de pyramide raster #470 * feat: publication/modification de pyramide raster en WMS-Raster #470 * feat: publication/modification de pyramide raster en WMTS #470 * feat: ajout bouton pour accéder au form générer pyramide raster #470 * feat: suppr service WMS-raster/WMTS #470 * fix: récup technical_name default values form. WMS-raster/WMTS #470 * fix: publication capabilities et métadonnées WMS-raster/WMTS #470 * fix: correction suite rebase
IGNF · Dec 13, 2024 · 3a6adaf · 3a6adaf
1 parent fb07d63
commit 3a6adaf
Show file tree

Hide file tree

Showing 68 changed files with 2,911 additions and 337 deletions.
diff --git a/.env b/.env
@@ -34,9 +34,12 @@ HTTPS_PROXY=
 # id du processus d'intégration en base
 API_ENTREPOT_PROC_INT_VECT_FILES_DB=
 
-# id du processus de génération de pyramide
+# id du processus de génération de pyramide vecteur
 API_ENTREPOT_PROC_CREATE_VECT_PYR=
 
+# id du processus de génération de pyramide raster
+API_ENTREPOT_PROC_CREATE_RAST_PYR=
+
 # Id de la community liee au datastore bac a sable
 SANDBOX_COMMUNITY_ID=
 
@@ -47,8 +50,11 @@ SANDBOX_SERVICE_ACCOUNT_CLIENT_SECRET=
 # id du processus d'intégration en base pour le Bac a sable
 SANDBOX_PROC_INT_VECT_FILES_DB=
 
-# id du processus de génération de pyramide pour le Bac a sable
+# id du processus de génération de pyramide vecteur pour le Bac a sable
 SANDBOX_PROC_CREATE_VECT_PYR=
 
+# id du processus de génération de pyramide raster pour le Bac à sable
+SANDBOX_PROC_CREATE_RAST_PYR=
+
 # URL de l'API espace collaboratif
 API_ESPACE_COLLABORATIF_URL=
diff --git a/assets/@types/app.ts b/assets/@types/app.ts
@@ -83,7 +83,8 @@ export enum DatasheetDocumentTypeEnum {
 
 export type DatasheetDetailed = Datasheet & {
     vector_db_list: VectorDb[] | undefined;
-    pyramid_list: Pyramid[] | undefined;
+    pyramid_vector_list: PyramidVector[] | undefined;
+    pyramid_raster_list: PyramidRaster[] | undefined;
     upload_list: Upload[] | undefined;
     service_list: Service[] | undefined;
 };
@@ -108,7 +109,7 @@ export type VectorDb = StoredData & {
 };
 
 /** stored_data (donnée stockée) du type ROK4-PYRAMID-VECTOR */
-export type Pyramid = StoredData & {
+export type PyramidVector = StoredData & {
     type: StoredDataPrivateDetailResponseDtoTypeEnum.ROK4PYRAMIDVECTOR;
     tags: {
         datasheet_name?: string;
@@ -120,6 +121,18 @@ export type Pyramid = StoredData & {
     };
 };
 
+/** stored_data (donnée stockée) du type ROK4-PYRAMID-VECTOR */
+export type PyramidRaster = StoredData & {
+    type: StoredDataPrivateDetailResponseDtoTypeEnum.ROK4PYRAMIDRASTER;
+    tags: {
+        datasheet_name?: string;
+        upload_id?: string;
+        proc_int_id?: string;
+        vectordb_id?: string;
+        proc_pyr_creat_id?: string;
+    };
+};
+
 /** upload (livraison) */
 export type Upload = UploadPrivateDetailResponseDto & {
     tags: {
@@ -180,7 +193,13 @@ export type TmsMetadata = {
 };
 
 /** configuration & offerings */
-export type Configuration = ConfigurationDetailResponseDto & { styles?: CartesStyle[] };
+export type Configuration = ConfigurationDetailResponseDto & {
+    styles?: CartesStyle[];
+    tags: {
+        datasheet_name?: string;
+    };
+    pyramid?: PyramidVector | PyramidRaster;
+};
 
 export type Offering = OfferingDetailResponseDto;
 export { OfferingStatusEnum } from "./entrepot";

diff --git a/assets/components/Layout/DatastoreLayout.tsx b/assets/components/Layout/DatastoreLayout.tsx
@@ -2,7 +2,7 @@ import { BreadcrumbProps } from "@codegouvfr/react-dsfr/Breadcrumb";
 import { useQuery } from "@tanstack/react-query";
 import { FC, PropsWithChildren, memo, useMemo } from "react";
 
-import { Datastore } from "../../@types/app";
+import type { Datastore } from "../../@types/app";
 import { datastoreNavItems } from "../../config/datastoreNavItems";
 import api from "../../entrepot/api";
 import RQKeys from "../../modules/entrepot/RQKeys";

diff --git a/assets/components/Utils/MenuList.tsx b/assets/components/Utils/MenuList.tsx
@@ -29,7 +29,7 @@ type MenuListItem = MenuListItemCommon &
 
 type MenuListProps = {
     menuOpenButtonProps?: Omit<ButtonProps, "linkProps" | "onClick" | "type" | "disabled">;
-    items: MenuListItem[];
+    items: (MenuListItem | undefined | false)[];
     disabled?: boolean;
 };
 
@@ -48,6 +48,8 @@ const MenuList: FC<MenuListProps> = ({ menuOpenButtonProps, items = [], disabled
         setAnchorEl(null);
     };
 
+    const _items: MenuListItem[] = useMemo(() => items.filter((item) => item !== undefined && item !== false), [items]);
+
     // props du bouton ouvrir menu
     const _menuOpenBtnProps = useMemo<ButtonProps>(() => {
         const _props: ButtonProps = menuOpenButtonProps ? { ...(menuOpenButtonProps as ButtonProps) } : ({} as ButtonProps);
@@ -66,7 +68,7 @@ const MenuList: FC<MenuListProps> = ({ menuOpenButtonProps, items = [], disabled
         return _props;
     }, [menuOpenButtonProps, disabled, isMenuOpen, otherActionsBtnId, otherActionsMenuId]);
 
-    const atLeastOneIcon = useMemo<boolean>(() => items.filter((item) => item.iconId !== undefined).length > 0, [items]);
+    const atLeastOneIcon = useMemo<boolean>(() => _items.filter((item) => item.iconId !== undefined).length > 0, [_items]);
 
     return (
         <>
@@ -91,7 +93,7 @@ const MenuList: FC<MenuListProps> = ({ menuOpenButtonProps, items = [], disabled
                     }}
                 >
                     {disabled === false &&
-                        items.map((item, i) => {
+                        _items.map((item, i) => {
                             const itemContent = (
                                 <MenuItem
                                     key={i}

diff --git a/assets/components/Utils/RangeSlider.tsx b/assets/components/Utils/RangeSlider.tsx
@@ -23,7 +23,6 @@ const RangeSlider: FC<RangeSliderProps> = (props) => {
                     value: v,
                     label: v.toString(),
                 }))}
-                getAriaLabel={() => "Minimum distance"}
                 value={values}
                 onChange={(_, newValue) => {
                     if (!Array.isArray(newValue)) {

diff --git a/assets/components/Utils/TextWithLink.tsx b/assets/components/Utils/TextWithLink.tsx
diff --git a/assets/components/Utils/ZoomRange.tsx b/assets/components/Utils/ZoomRange.tsx
@@ -1,31 +1,38 @@
 import { fr } from "@codegouvfr/react-dsfr";
+import Range, { RangeProps } from "@codegouvfr/react-dsfr/Range";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import Map, { type MapOptions } from "ol/Map";
 import View, { ViewOptions } from "ol/View";
 import { ScaleLine } from "ol/control";
 import BaseLayer from "ol/layer/Base";
 import TileLayer from "ol/layer/Tile";
 import { fromLonLat } from "ol/proj";
 import WMTS, { optionsFromCapabilities } from "ol/source/WMTS";
-import { FC, memo, useCallback, useEffect, useRef } from "react";
+import { FC, memo, ReactNode, useCallback, useEffect, useRef } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { tss } from "tss-react";
 
 import olDefaults from "../../data/ol-defaults.json";
 import useCapabilities from "../../hooks/useCapabilities";
-import RangeSlider from "./RangeSlider";
 
-import "../../sass/components/zoom-range.scss";
+import imgMapZoomBottom from "../../img/zoom-range/map-zoom-bottom.png";
+import imgMapZoomTop from "../../img/zoom-range/map-zoom-top.png";
 
 type ZoomRangeProps = {
-    min: number;
-    max: number;
+    min: RangeProps["min"];
+    max: RangeProps["min"];
     values: number[];
     onChange: (values: number[]) => void;
+    step?: RangeProps["step"];
     center?: number[];
+    mode?: "top" | "bottom" | "both";
+    overlayContent?: ReactNode;
 };
 
 const ZoomRange: FC<ZoomRangeProps> = (props) => {
     const { data: capabilities } = useCapabilities();
 
-    const { min, max, values, center = olDefaults.center, onChange } = props;
+    const { min, max, values, center = olDefaults.center, onChange, step, mode = "both", overlayContent } = props;
 
     // References sur les deux cartes
     const leftMapRef = useRef<Map>();
@@ -109,15 +116,140 @@ const ZoomRange: FC<ZoomRangeProps> = (props) => {
         rightMapRef.current?.updateSize();
     }, [values]);
 
+    const handleChange = useCallback(
+        (newValue: number, zoomType?: "top" | "bottom") => {
+            switch (zoomType) {
+                case "top":
+                    onChange([newValue, values[1]]);
+                    break;
+                case "bottom":
+                    onChange([values[0], newValue]);
+                    break;
+                default:
+                    onChange([newValue]);
+                    break;
+            }
+        },
+        [onChange, values]
+    );
+
+    const { classes } = useStyles();
+
     return (
         <div className={fr.cx("fr-my-2v")}>
-            <div className="ui-map-zoom-levels">
-                <div ref={leftMapTargetRef} className="ui-top-zoom-level" />
-                <div ref={rightMapTargetRef} className="ui-bottom-zoom-level" />
+            <div className={fr.cx("fr-grid-row")}>
+                {(mode === "both" || mode === "top") && (
+                    <div className={fr.cx("fr-col", "fr-px-2v")}>
+                        <div ref={leftMapTargetRef} className={cx(classes.map)} />
+                    </div>
+                )}
+
+                {mode !== "both" && (
+                    <div className={cx(fr.cx("fr-col", "fr-px-2v"))}>
+                        <div className={cx(classes.falseMapRoot)}>
+                            <img
+                                src={mode === "top" ? imgMapZoomBottom : imgMapZoomTop}
+                                className={cx(classes.map, classes.falseMapImg)}
+                                alt="Illustration d'une carte fixe"
+                            />
+                            <div className={cx(classes.falseMapOverlay)}>
+                                {overlayContent && <div className={cx(fr.cx("fr-m-4v", "fr-p-2v"), classes.falseMapOverlayContent)}>{overlayContent}</div>}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {(mode === "both" || mode === "bottom") && (
+                    <div className={fr.cx("fr-col", "fr-px-2v")}>
+                        <div ref={rightMapTargetRef} className={cx(classes.map)} />
+                    </div>
+                )}
             </div>
-            <RangeSlider min={min} max={max} values={values} onChange={(newValues) => onChange(newValues)} />
+            <Range
+                label=" "
+                min={min}
+                max={max}
+                small={true}
+                step={step}
+                {...(() => {
+                    switch (mode) {
+                        case "top":
+                            return {
+                                nativeInputProps: {
+                                    value: values?.[0] ?? min,
+                                    onChange: (e) => {
+                                        handleChange(e.currentTarget.valueAsNumber);
+                                    },
+                                },
+                            };
+                        case "bottom":
+                            return {
+                                nativeInputProps: {
+                                    value: values?.[0] ?? max,
+                                    onChange: (e) => {
+                                        handleChange(e.currentTarget.valueAsNumber);
+                                    },
+                                },
+                            };
+                        case "both":
+                            return {
+                                double: true,
+                                nativeInputProps: [
+                                    {
+                                        value: values?.[0] ?? min,
+                                        onChange: (e) => {
+                                            handleChange(e.currentTarget.valueAsNumber, "top");
+                                        },
+                                    },
+                                    {
+                                        value: values?.[1] ?? max,
+                                        onChange: (e) => {
+                                            handleChange(e.currentTarget.valueAsNumber, "bottom");
+                                        },
+                                    },
+                                ],
+                            };
+                    }
+                })()}
+            />
         </div>
     );
 };
 
+ZoomRange.displayName = symToStr({ ZoomRange });
+
 export default memo(ZoomRange);
+
+const useStyles = tss.withName(ZoomRange.displayName).create(() => ({
+    map: {
+        height: "300px",
+        width: "100%",
+    },
+    falseMapRoot: {
+        position: "relative",
+        display: "inline-block",
+        width: "100%",
+        height: "300px",
+    },
+    falseMapImg: {
+        display: "block",
+        width: "100%",
+        height: "300px",
+    },
+    falseMapOverlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        textAlign: "center",
+    },
+    falseMapOverlayContent: {
+        backgroundColor: fr.colors.decisions.background.default.grey.default,
+        color: fr.colors.decisions.text.default.grey.default,
+    },
+}));
diff --git a/assets/data/ol-defaults.json b/assets/data/ol-defaults.json
@@ -1,10 +1,13 @@
 {
     "default_background_layer": "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
-    "center": [2.35, 48.85],
+    "center": [
+        2.35,
+        48.85
+    ],
     "projection": "EPSG:3857",
     "zoom": 10,
     "zoom_levels": {
-        "TOP": 0,
+        "TOP": 1,
         "BOTTOM": 18
     }
 }
diff --git a/assets/entrepot/api/index.ts b/assets/entrepot/api/index.ts
@@ -9,7 +9,8 @@ import community from "./community";
 import user from "./user";
 import wfs from "./wfs";
 import wmsVector from "./wms-vector";
-import pyramid from "./pyramid";
+import pyramidVector from "./pyramidVector";
+import pyramidRaster from "./pyramidRaster";
 import service from "./service";
 import epsg from "./epsg";
 import annexe from "./annexe";
@@ -31,7 +32,8 @@ const api = {
     user,
     wfs,
     wmsVector,
-    pyramid,
+    pyramidVector,
+    pyramidRaster,
     service,
     annexe,
     style,