Merge branch '20-link-DatasetService-to-front-end-part-3' into nick/dev3

Relates to #20

Author: Nick Stokoe

apps/front-end/src/App.tsx

@@ -10,11 +10,21 @@ import Popup from "./components/popup/Popup";
 const App = () => {
   const dispatch = useAppDispatch();
 
+  /** Startup tasks */
   useEffect(() => {
     dispatch(fetchConfig()).then(() => {
       const urlParamLang = getUrlSearchParam("lang")?.toLowerCase();
       if (urlParamLang) dispatch(setLanguage(urlParamLang));
     });
+
+    fetch(`${import.meta.env.VITE_API_URL}/version`)
+      .then((response) => response.json())
+      .then((versionInfo) => {
+        console.log("API version info", versionInfo);
+      })
+      .catch((error) => {
+        console.error("Error fetching API version info", error);
+      });
   }, []);
 
   return (

apps/front-end/src/app/configSlice.ts

@@ -42,7 +42,7 @@ export const configSlice = createAppSlice({
       },
       {
         fulfilled: (state, action) => {
-          console.log("Mock config", action.payload);
+          console.log("Config", action.payload);
           state.vocabs = action.payload.vocabs;
           state.languages = action.payload.languages;
           state.currentLanguage = action.payload.languages[0];

apps/front-end/src/components/map/MapWrapper.tsx

@@ -20,9 +20,9 @@ const MapWrapper = () => {
   const map = useRef<MapLibreMap | null>(null);
   const dispatch = useAppDispatch();
 
-  const popupCreatedCallback = () => {
+  const popupCreatedCallback = (itemIx: number) => {
     console.log("Popup created");
-    dispatch(openPopup());
+    dispatch(openPopup(itemIx));
   };
 
   const popupClosedCallback = () => {
@@ -58,7 +58,7 @@ const MapWrapper = () => {
       console.log(`Found ${visibleIndexes?.length} features that matched`);
     }
 
-    console.log("Rendering data in MapLibreGL", features);
+    console.log(`Rendering ${features.length} points in MapLibreGL`);
 
     (map.current?.getSource("items-geojson") as GeoJSONSource)?.setData({
       type: "FeatureCollection",

apps/front-end/src/components/map/mapLibre.ts

@@ -60,7 +60,7 @@ const disableRotation = (map: Map) => {
 const onMarkerClick = async (
   map: Map,
   feature: GeoJSON.Feature<GeoJSON.Point>,
-  popupCreatedCallback: () => void,
+  popupCreatedCallback: (itemIx: number) => void,
   popupClosedCallback: () => void,
   offset?: [number, number],
 ) => {
@@ -86,7 +86,7 @@ const onMarkerClick = async (
     .setOffset(popupOffset)
     .on("close", popupClosedCallback);
 
-  popupCreatedCallback();
+  popupCreatedCallback(ix);
 };
 
 const onMarkerHover = (
@@ -119,7 +119,7 @@ const onMarkerHover = (
  * Set up the sources and layers of the MapLibreGL map instance.
  */
 export const createMap = (
-  popupCreatedCallback: () => void,
+  popupCreatedCallback: (itemIx: number) => void,
   popupClosedCallback: () => void,
 ): Map => {
   const map = new MapLibreGL.Map({

apps/front-end/src/components/map/mapSlice.ts

@@ -53,7 +53,7 @@ export const mapSlice = createAppSlice({
         rejected: (state, action) => {
           state.status = "failed";
           state.allLocations = [];
-          console.error("Error detching locations", action.payload);
+          console.error("Error fetching locations", action.payload);
         },
       },
     ),

apps/front-end/src/components/panel/directoryPanel/directoryItem/DirectoryItem.tsx

@@ -12,7 +12,8 @@ interface DirectoryItemProps {
   onClick?: (e: React.MouseEvent) => void; // for storybook testing
 }
 
-const StyledButton = styled(Button)(({ active }: { active: boolean }) => ({
+/** Passing active as a boolean gives a React error so just pass as a number 0 or 1. */
+const StyledButton = styled(Button)(({ active }: { active: number }) => ({
   width: "100%",
   padding: "var(--spacing-small) var(--spacing-medium)",
   display: "block",
@@ -49,7 +50,7 @@ const DirectoryItem = ({
 
   return (
     <ListItem>
-      <StyledButton role="button" active={active} onClick={handleClick}>
+      <StyledButton role="button" active={+active} onClick={handleClick}>
         {label}
       </StyledButton>
     </ListItem>

apps/front-end/src/components/panel/searchPanel/SearchPanel.tsx

@@ -44,7 +44,10 @@ const SearchPanel = () => {
   };
 
   return (
-    <form onSubmit={onSubmit}>
+    <form
+      onSubmit={onSubmit}
+      style={{ display: "flex", flexDirection: "column", overflow: "hidden" }} // Fix for search filter overflow issue
+    >
       <Heading title="Search">
         <SearchBox
           value={currentText}

apps/front-end/src/components/popup/Popup.stories.tsx

@@ -6,7 +6,7 @@ import { CssBaseline } from "@mui/material";
 import { store } from "../../app/store";
 import { Provider } from "react-redux";
 import Popup from "./Popup";
-import { togglePopup } from "./popupSlice";
+// import { togglePopup } from "./popupSlice";
 
 const meta = {
   title: "Common/Popup",
@@ -33,6 +33,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   play: () => {
-    store.dispatch(togglePopup());
+    // TODO: feed in mock item data
+    // https://storybook.js.org/tutorials/intro-to-storybook/react/en/data/
+    // store.dispatch(togglePopup());
   },
 };

apps/front-end/src/components/popup/Popup.tsx

@@ -1,36 +1,36 @@
 import { createPortal } from "react-dom";
 import Box from "@mui/material/Box";
-import Modal from "@mui/material/Modal";
-import Fade from "@mui/material/Fade";
 import LeftPane from "./leftPane/LeftPane";
 import RightPane from "./rightPane/RightPane";
-import CloseButton from "../common/closeButton/CloseButton";
 import { styled } from "@mui/material/styles";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { closePopup, popupIsOpen } from "./popupSlice";
-import mockItem from "../../data/mockItem";
+import { useAppSelector } from "../../app/hooks";
+import { selectPopupIsOpen, selectPopupData } from "./popupSlice";
 import { POPUP_CONTAINER_ID } from "../map/mapLibre";
 
 const StyledPopup = styled(Box)(({ theme }) => ({
-  width: "calc (100% - (var(--spacing-large) * 2))",
-  height: "calc(100% - (var(--spacing-large) * 2 + 80px))",
+  width: "300px",
+  height: "500px",
   display: "flex",
   backgroundColor: theme.palette.background.paper,
   padding: 0,
   borderRadius: "var(--border-radius-xlarge)",
-  margin: "auto var(--spacing-large)",
   outline: "none",
   position: "relative",
+  textAlign: "left",
+  overflowY: "auto",
   "@media (min-width: 768px)": {
     width: "100%",
     height: "auto",
-    maxWidth: 900,
-    maxHeight: 600,
+    minWidth: 600,
+    maxWidth: 700,
+    maxHeight: 450,
     margin: "auto",
+    overflow: "hidden",
   },
 }));
 
 const StylePopupInner = styled(Box)(() => ({
+  width: "100%",
   display: "flex",
   flexDirection: "column",
   overflowY: "auto",
@@ -54,65 +54,20 @@ const StylePopupInner = styled(Box)(() => ({
   },
 }));
 
-const StyledPointer = styled(Box)(({ theme }) => ({
-  position: "absolute",
-  bottom: -17,
-  left: "50%",
-  transform: "translateX(-50%)",
-  width: 0,
-  borderLeft: "17px solid transparent",
-  borderRight: "17px solid transparent",
-  borderTop: `20px solid ${theme.palette.background.paper}`,
-}));
-
 const Popup = () => {
-  const dispatch = useAppDispatch();
-  const open = useAppSelector(popupIsOpen);
-
-  const handleClosePopup = () => {
-    dispatch(closePopup());
-  };
+  const open = useAppSelector(selectPopupIsOpen);
+  const data = useAppSelector(selectPopupData);
 
   return (
     open &&
     document.getElementById(POPUP_CONTAINER_ID) &&
     createPortal(
-      // <Modal
-      //   open={open}
-      //   onClose={handleClosePopup}
-      //   aria-labelledby={`pop-up-${mockItem.id}`}
-      //   aria-describedby="pop-up-description"
-      //   closeAfterTransition
-      // >
-      //   <Fade in={open}>
-      <StyledPopup id="'aaaaaaaaaa">
-        {/* <CloseButton
-          sx={{
-            position: "absolute",
-            right: "14px",
-            top: "14px",
-          }}
-          buttonAction={handleClosePopup}
-        /> */}
+      <StyledPopup>
         <StylePopupInner>
-          <LeftPane
-            name={mockItem.name}
-            primaryActivity={mockItem.primary_activity}
-            description={mockItem.description}
-            dcDomains={mockItem.dc_domains}
-          />
-          <RightPane
-            geocodedAddr={mockItem.geocoded_addr}
-            website={mockItem.website}
-            organisationalStructure={mockItem.organisational_structure}
-            typology={mockItem.typology}
-            dataSources={mockItem.data_sources}
-          />
+          <LeftPane {...data} />
+          <RightPane {...data} />
         </StylePopupInner>
-        {/* <StyledPointer /> */}
       </StyledPopup>,
-      //   </Fade>
-      // </Modal>
       document.getElementById(POPUP_CONTAINER_ID)!!,
     )
   );

apps/front-end/src/components/popup/leftPane/LeftPane.tsx

@@ -17,10 +17,10 @@ const StyledLeftPane = styled(Box)(() => ({
   flexDirection: "column",
   margin: "var(--spacing-large)",
   "@media (min-width: 768px)": {
-    width: "60%",
+    width: "70%",
     flexDirection: "column",
     margin:
-      "var(--spacing-xlarge) 0 var(--spacing-xxlarge) var(--spacing-xxlarge)",
+      "var(--spacing-large) 0 var(--spacing-xlarge) var(--spacing-xlarge)",
     overflowY: "hidden",
   },
 }));
@@ -35,14 +35,14 @@ const StyledHeaderContainer = styled(Box)(() => ({
   top: 0,
   left: 0,
   "& h1": {
-    fontSize: "var(--font-size-large)",
+    fontSize: "var(--font-size-xxlarge)",
     color: "var(--color-primary)",
   },
   "@media (min-width: 768px)": {
     position: "sticky",
-    padding: "0 var(--spacing-xxlarge) var(--spacing-xlarge) 0",
+    padding: "0 var(--spacing-xlarge) var(--spacing-large) 0",
     "& h1": {
-      fontSize: "28px",
+      fontSize: "26px",
     },
   },
 }));
@@ -61,11 +61,11 @@ const StyledContentContainer = styled(Box)(() => ({
   },
   "&::-webkit-scrollbar-track": {
     background: "rgba(0, 0, 0, 0.1)",
-    borderRadius: "10px",
+    borderRadius: "8px",
   },
   "&::-webkit-scrollbar-thumb": {
     backgroundColor: "rgba(0, 0, 0, 0.3)",
-    borderRadius: "10px",
+    borderRadius: "8px",
   },
   "& h4": {
     fontSize: "var(--font-size-small)",
@@ -78,14 +78,7 @@ const StyledContentContainer = styled(Box)(() => ({
   "@media (min-width: 768px)": {
     overflowY: "auto",
     paddingRight: "var(--spacing-large)",
-    marginRight: "var(--spacing-medium)",
-    "& h4": {
-      fontSize: "var(--font-size-large)",
-    },
-
-    "& p": {
-      fontSize: "var(--font-size-medium)",
-    },
+    marginRight: "var(--spacing-small)",
   },
 }));