feat(ui-links): set first link as default when component mounts (#2268)

webapp/public/locales/en/main.json

@@ -253,7 +253,8 @@
   "study.links": "Links",
   "study.diskUsage": "Disk usage",
   "study.district": "District",
-  "study.bindingconstraints": "Binding Constraints",
+  "study.bindingConstraints": "Binding Constraints",
+  "study.bindingConstraints.empty": "No Binding Constraints",
   "study.debug": "Debug",
   "study.debug.file.unsupported": "Unsupported file type",
   "study.debug.file.deleteConfirm.title": "Delete File?",
@@ -295,6 +296,7 @@
   "study.outputFilters": "Output print status",
   "study.outputFilters.filterByYear": "Output year by year",
   "study.outputFilters.filterSynthesis": "Synthesis outputs",
+  "study.modelization.links.empty": "No links available",
   "study.modelization.links.hurdleCost": "Hurdle costs",
   "study.modelization.links.loopFlows": "Loop flows",
   "study.modelization.links.pst": "PST",
@@ -566,6 +568,7 @@
   "study.modelization.bindingConst.offset": "Offset",
   "study.modelization.bindingConst.question.deleteConstraintTerm": "Are you sure you want to delete this constraint term?",
   "study.modelization.bindingConst.question.deleteBindingConstraint": "Are you sure you want to delete this binding constraint?",
+  "study.tableMode.empty": "No table available",
   "study.tableMode": "Table Mode",
   "study.tableMode.dialog.add.title": "Add table",
   "study.tableMode.dialog.edit.title": "Edit table",
@@ -703,6 +706,7 @@
   "variants.commands.exportMatrices": "Export matrices",
   "variants.commands.question.deleteAll": "Are you sure you want to delete all commands?",
   "variants.commands.question.delete": "Are you sure you want to delete this command?",
+  "xpansion.candidates.empty": "No Xpansion candidates",
   "xpansion.timeSeries": "Time-Series",
   "xpansion.link": "Link",
   "xpansion.annualCost": "Annual cost per MW",

webapp/public/locales/fr/main.json

@@ -253,7 +253,8 @@
   "study.links": "Liens",
   "study.diskUsage": "Espace disque",
   "study.district": "District",
-  "study.bindingconstraints": "Contraintes Couplantes",
+  "study.bindingConstraints": "Contraintes Couplantes",
+  "study.bindingConstraints.empty": "Aucune Contraintes Couplantes",
   "study.debug": "Debug",
   "study.debug.folder.empty": "Le dossier est vide",
   "study.debug.file.unsupported": "Type de fichier non supporté",
@@ -295,6 +296,7 @@
   "study.outputFilters": "Affichage des sorties",
   "study.outputFilters.filterByYear": "Sorties année par année",
   "study.outputFilters.filterSynthesis": "Sorties de la synthèse",
+  "study.modelization.links.empty": "Aucun lien disponible",
   "study.modelization.links.hurdleCost": "Hurdle costs",
   "study.modelization.links.loopFlows": "Loop flows",
   "study.modelization.links.pst": "PST",
@@ -566,6 +568,7 @@
   "study.modelization.bindingConst.offset": "Décalage",
   "study.modelization.bindingConst.question.deleteConstraintTerm": "Êtes-vous sûr de vouloir supprimer ce terme ?",
   "study.modelization.bindingConst.question.deleteBindingConstraint": "Êtes-vous sûr de vouloir supprimer cette contrainte couplante ?",
+  "study.tableMode.empty": "Aucun tableau disponible",
   "study.tableMode": "Table Mode",
   "study.tableMode.dialog.add.title": "Ajouter une table",
   "study.tableMode.dialog.edit.title": "Modifier une table",
@@ -703,6 +706,7 @@
   "variants.commands.exportMatrices": "Exporter les matrices",
   "variants.commands.question.deleteAll": "Êtes-vous sûr de vouloir supprimer toutes les commandes ?",
   "variants.commands.question.delete": "Êtes-vous sûr de vouloir supprimer cette commande ?",
+  "xpansion.candidates.empty": "Aucun candidats Xpansion",
   "xpansion.timeSeries": "Séries temporelles",
   "xpansion.link": "Lien",
   "xpansion.annualCost": "Coût annuel par mw",

webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/index.tsx

@@ -13,7 +13,7 @@
  */
 
 import { BindingConstraint } from "./utils";
-import { Box, Button, Paper, Skeleton } from "@mui/material";
+import { Box, Button, Skeleton } from "@mui/material";
 import Form from "../../../../../../common/Form";
 import UsePromiseCond, {
   mergeResponses,
@@ -120,20 +120,11 @@ function BindingConstView({ constraintId }: Props) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Paper
-      sx={{
-        p: 2,
-        width: 1,
-        height: 1,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "auto",
-      }}
-    >
+    <>
       <UsePromiseCond
         response={mergeResponses(constraint, linksAndClusters)}
         ifFulfilled={([defaultValues, linksAndClusters]) => (
-          <>
+          <Box sx={{ display: "flex", flexDirection: "column" }}>
             <Box sx={{ alignSelf: "flex-end" }}>
               <Button
                 variant="outlined"
@@ -166,7 +157,7 @@ function BindingConstView({ constraintId }: Props) {
                 />
               </Form>
             </Box>
-          </>
+          </Box>
         )}
         ifPending={() => <Skeleton sx={{ height: 1, transform: "none" }} />}
       />
@@ -184,7 +175,7 @@ function BindingConstView({ constraintId }: Props) {
           )}
         </ConfirmationDialog>
       )}
-    </Paper>
+    </>
   );
 }
 

webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx

@@ -12,10 +12,8 @@
  * This file is part of the Antares project.
  */
 
-import { Box } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
-import SimpleLoader from "../../../../../common/loaders/SimpleLoader";
 import EmptyView from "../../../../../common/page/SimpleContent";
 import BindingConstPropsView from "./BindingConstPropsView";
 import {
@@ -31,9 +29,12 @@ import { getBindingConstraintList } from "../../../../../../services/api/studyda
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import { useEffect } from "react";
 import SplitView from "../../../../../common/SplitView";
+import ViewWrapper from "@/components/common/page/ViewWrapper";
+import { useTranslation } from "react-i18next";
 
 function BindingConstraints() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
+  const [t] = useTranslation();
   const dispatch = useAppDispatch();
 
   const currentConstraintId = useAppSelector(getCurrentBindingConstId);
@@ -42,22 +43,22 @@ function BindingConstraints() {
     getBindingConst(state, study.id),
   );
 
-  // TODO find better name
-  const constraints = usePromise(
+  const constraintsRes = usePromise(
     () => getBindingConstraintList(study.id),
     [study.id, bindingConstraints],
   );
 
   useEffect(() => {
-    const { data } = constraints;
+    const { data } = constraintsRes;
 
     if (!data || data.length === 0 || currentConstraintId) {
       return;
     }
 
     const firstConstraintId = data[0].id;
     dispatch(setCurrentBindingConst(firstConstraintId));
-  }, [constraints, currentConstraintId, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [constraintsRes.data, currentConstraintId, dispatch]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers
@@ -73,25 +74,24 @@ function BindingConstraints() {
 
   return (
     <UsePromiseCond
-      response={constraints}
-      ifPending={() => <SimpleLoader />}
+      response={constraintsRes}
       ifFulfilled={(data) => (
         <SplitView id="binding-constraints" sizes={[10, 90]}>
           {/* Left */}
           <BindingConstPropsView // TODO rename ConstraintsList
             list={data}
             onClick={handleConstraintChange}
             currentConstraint={currentConstraintId}
-            reloadConstraintsList={constraints.reload}
+            reloadConstraintsList={constraintsRes.reload}
           />
           {/* Right */}
-          <Box>
+          <ViewWrapper>
             {data.length > 0 && currentConstraintId ? (
               <BindingConstView constraintId={currentConstraintId} />
             ) : (
-              <EmptyView title="No Binding Constraints" />
+              <EmptyView title={t("study.bindingConstraints.empty")} />
             )}
-          </Box>
+          </ViewWrapper>
         </SplitView>
       )}
       ifRejected={(error) => <EmptyView title={error?.toString()} />}

webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/LinkForm.tsx

@@ -241,7 +241,7 @@ function LinkForm(props: Props) {
             width: "100%",
             display: "flex",
             flexDirection: "column",
-            height: "500px",
+            height: "70vh",
           }}
         >
           {isTabMatrix ? (

webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx

@@ -16,30 +16,52 @@ import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
 import EmptyView from "../../../../../common/page/SimpleContent";
 import LinkPropsView from "./LinkPropsView";
-import useStudySynthesis from "../../../../../../redux/hooks/useStudySynthesis";
 import { getCurrentLink } from "../../../../../../redux/selectors";
 import useAppDispatch from "../../../../../../redux/hooks/useAppDispatch";
+import useAppSelector from "../../../../../../redux/hooks/useAppSelector";
 import { setCurrentLink } from "../../../../../../redux/ducks/studySyntheses";
 import LinkView from "./LinkView";
+import usePromise from "../../../../../../hooks/usePromise";
+import { getLinks } from "@/services/api/studies/links";
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import SplitView from "../../../../../common/SplitView";
-import ViewWrapper from "../../../../../common/page/ViewWrapper";
+import { useEffect } from "react";
+import { makeLinkId } from "@/redux/utils";
+import ViewWrapper from "@/components/common/page/ViewWrapper";
+import { useTranslation } from "react-i18next";
 
 function Links() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
-  const res = useStudySynthesis({
-    studyId: study.id,
-    selector: getCurrentLink,
-  });
-
+  const [t] = useTranslation();
   const dispatch = useAppDispatch();
+  const currentLink = useAppSelector((state) =>
+    getCurrentLink(state, study.id),
+  );
+
+  const linksRes = usePromise(
+    () => getLinks({ studyId: study.id }),
+    [study.id],
+  );
+
+  // Handle automatic selection of the first link
+  useEffect(() => {
+    const { data } = linksRes;
+
+    if (!data || data.length === 0 || currentLink) {
+      return;
+    }
+
+    const firstLinkId = makeLinkId(data[0].area1, data[0].area2);
+    dispatch(setCurrentLink(firstLinkId));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [linksRes.data, currentLink, dispatch]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleLinkClick = (linkName: string): void => {
-    dispatch(setCurrentLink(linkName));
+  const handleLinkClick = (linkId: string) => {
+    dispatch(setCurrentLink(linkId));
   };
 
   ////////////////////////////////////////////////////////////////
@@ -53,12 +75,12 @@ function Links() {
       {/* Right */}
       <ViewWrapper>
         <UsePromiseCond
-          response={res}
-          ifFulfilled={(currentLink) =>
-            currentLink ? (
+          response={linksRes}
+          ifFulfilled={(data) =>
+            data.length > 0 && currentLink ? (
               <LinkView link={currentLink} />
             ) : (
-              <EmptyView title="No Links" />
+              <EmptyView title={t("study.modelization.links.empty")} />
             )
           }
         />

webapp/src/components/App/Singlestudy/explore/Modelization/index.tsx

@@ -76,7 +76,7 @@ function Modelization() {
         disabled: links.length === 0,
       },
       {
-        label: t("study.bindingconstraints"),
+        label: t("study.bindingConstraints"),
         path: `${basePath}/bindingcontraint`,
       },
     ];

webapp/src/components/App/Singlestudy/explore/TableModeList/index.tsx

@@ -12,7 +12,7 @@
  * This file is part of the Antares project.
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { MenuItem } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { useUpdateEffect } from "react-use";
@@ -32,6 +32,7 @@ import ConfirmationDialog from "../../../../common/dialogs/ConfirmationDialog";
 import TableMode from "../../../../common/TableMode";
 import SplitView from "../../../../common/SplitView";
 import ViewWrapper from "../../../../common/page/ViewWrapper";
+import EmptyView from "@/components/common/page/SimpleContent";
 
 function TableModeList() {
   const { t } = useTranslation();
@@ -56,6 +57,13 @@ function TableModeList() {
   const dialogTemplate =
     dialog && templates.find((tp) => tp.id === dialog.templateId);
 
+  // Handle automatic selection of the first element
+  useEffect(() => {
+    if (templates.length > 0 && !selectedTemplate) {
+      setSelectedTemplateId(templates[0].id);
+    }
+  }, [templates, selectedTemplate]);
+
   // Update local storage
   useUpdateEffect(() => {
     storage.setItem(
@@ -132,6 +140,9 @@ function TableModeList() {
         />
         {/* Right */}
         <ViewWrapper>
+          {!templates.length && (
+            <EmptyView title={t("study.tableMode.empty")} />
+          )}
           {selectedTemplate && (
             <TableMode
               studyId={study.id}

webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx

@@ -19,7 +19,6 @@ import {
   Typography,
   Button,
   ButtonGroup,
-  Paper,
   TextField,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -100,7 +99,7 @@ function CandidateForm(props: PropType) {
   }, [candidate]);
 
   return (
-    <Paper sx={{ width: "100%", height: "100%", overflow: "auto", p: 2 }}>
+    <Box sx={{ width: "100%", height: "100%", overflow: "auto", p: 1 }}>
       <Box>
         <Box
           display="flex"
@@ -449,7 +448,7 @@ function CandidateForm(props: PropType) {
           {t("xpansion.question.deleteCandidate")}
         </ConfirmationDialog>
       )}
-    </Paper>
+    </Box>
   );
 }