Merge pull request #2 from elixir-europe/dev

Merge news changes to main

Author: JessicaFM

Dockerfile

@@ -1,8 +1,19 @@
+# --- stage 1 --- # 
 ARG NODE_VERSION=20
-FROM node:${NODE_VERSION}-alpine
-COPY . /app
+FROM node:${NODE_VERSION}-alpine AS build
 WORKDIR /app
+
+COPY package.json yarn.lock ./
 RUN sh -c "corepack enable && (yarn install --immutable || yarn install --frozen-lockfile)"
-EXPOSE 3000
-CMD yarn start
 
+COPY . .
+RUN yarn build   # CRA genera en /app/build
+
+# --- stage 2 --- # 
+FROM nginx:1.27-alpine
+RUN rm -f /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=build /app/build /usr/share/nginx/html
+
+EXPOSE 80

__nginx.conf

@@ -0,0 +1,20 @@
+server {
+  listen 80;
+  sendfile on;
+  default_type application/octet-stream;
+
+  gzip on;
+  gzip_http_version 1.1;
+  gzip_disable      "MSIE [1-6]\.";
+  gzip_min_length   256;
+  gzip_vary         on;
+  gzip_proxied      expired no-cache no-store private auth;
+  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+  gzip_comp_level   9;
+
+  root /usr/share/nginx/html;
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+  }
+}

package.json

@@ -15,10 +15,12 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.0.1",
+    "@mui/lab": "^7.0.0-beta.16",
     "@mui/material": "^7.0.1",
     "formik": "^2.4.6",
     "fuse.js": "^7.1.0",
     "joi": "^17.13.3",
+    "papaparse": "^5.5.3",
     "react": "18",
     "react-dom": "18",
     "react-router-dom": "^7.5.0",

src/components/Search.js

@@ -37,6 +37,7 @@ export default function Search({
   const { selectedPathSegment, setSelectedPathSegment } = useSelectedEntry();
   const [assembly, setAssembly] = useState(config.assemblyId[0]);
   const [open, setOpen] = useState(false);
+  const { isLoaded, setIsLoaded } = useSelectedEntry();
   const searchRef = useRef(null);
 
   useEffect(() => {
@@ -87,7 +88,9 @@ export default function Search({
         const res = await fetch(`${config.apiUrl}/map`);
         const data = await res.json();
         const endpointSets = data.response.endpointSets || {};
-  
+
+        setIsLoaded(false);
+
         const entries = Object.entries(endpointSets)
           .filter(filterGenomicVariation)
           .map(mapEntry)
@@ -100,6 +103,8 @@ export default function Search({
           setSelectedPathSegment(sorted[0].pathSegment);
         }
         await handleBeaconsInfo();
+
+        setIsLoaded(true);
       } catch (err) {
         console.error("Error fetching entry types:", err);
       } finally {
@@ -123,7 +128,7 @@ export default function Search({
   useEffect(() => {
     const fetchAll = async () => {
       await fetchConfiguration();
-      setLoading(false);
+      //setLoading(false);
     };
 
     fetchAll();
@@ -418,7 +423,7 @@ export default function Search({
           </Box>
         )}
 
-        {loading ? (
+        {loading || !isLoaded ? (
           <CircularProgress />
         ) : !isSingleEntryType ? (
           <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>

src/components/context/SelectedEntryContext.js

@@ -14,6 +14,7 @@ export const SelectedEntryProvider = ({ children }) => {
   const [entryTypesConfig, setEntryTypesConfig] = useState({});
   const [message, setMessage] = useState(null);
   const [hasSearchBeenTriggered, setHasSearchBeenTriggered] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   return (
     <SelectedEntryContext.Provider
@@ -40,6 +41,8 @@ export const SelectedEntryProvider = ({ children }) => {
         setMessage,
         hasSearchBeenTriggered,
         setHasSearchBeenTriggered,
+        isLoaded,
+        setIsLoaded
       }}
     >
       {children}

src/components/homepageBanner/SingleBeaconBanner.js

@@ -33,9 +33,7 @@ export default function SingleBeaconBanner() {
   const handleChange = (event, newValue) => {
     setTabValue(newValue);
   };
-
-  // console.log("localDatasets", localDatasets);
-
+  
   // Fetch datasets on component mount
   // Saves the full list to local state and preselects the first dataset
   useEffect(() => {

src/components/pages/HomePage.js

@@ -27,7 +27,6 @@ export default function HomePage({ selectedTool, setSelectedTool }) {
 
   return (
     <>
-      {/* Main container */}
       <Box
         sx={{
           display: "flex",
@@ -43,12 +42,6 @@ export default function HomePage({ selectedTool, setSelectedTool }) {
             display: "flex",
             flexDirection: "column",
             width: { lg: "60%", md: "60%" },
-            // backgroundColor: {
-            //   lg: "lightsalmon",
-            //   md: "pink",
-            //   sm: "lightgreen",
-            //   xs: "lightblue",
-            // },
           }}
         >
           <Founders />

src/components/results/ResultsContainer.js

@@ -7,13 +7,8 @@ import { useEffect, useRef } from "react";
 import { COMMON_MESSAGES } from "../common/CommonMessage";
 
 export default function ResultsContainer() {
-  const { loadingData, resultData, hasSearchResults, message } =
-    useSelectedEntry();
-
+  const { loadingData, resultData, hasSearchResults, message } = useSelectedEntry();
   const showBox = loadingData || hasSearchResults || message;
-
-  // console.log("message", message);
-
   const tableRef = useRef(null);
 
   useEffect(() => {

src/components/results/ResultsTable.js

@@ -90,8 +90,6 @@ export default function ResultsTable() {
       });
     }
 
-    console.log("beacon<: ", beacon);
-
     const logo = beacon.response
       ? beacon.response?.organization?.logoUrl
       : beacon.organization?.logoUrl;
@@ -136,6 +134,7 @@ export default function ResultsTable() {
                   <TableCell
                     key={column.id}
                     align={column.align}
+                    style={{ width: column.width }}
                     sx={{
                       ...headerCellStyle,
                       width: column.width,

src/components/results/ResultsTableRow.js

@@ -16,30 +16,20 @@ import CalendarViewMonthIcon from '@mui/icons-material/CalendarViewMonth';
 import config from '../../config/config.json';
 
 export default function ResultsTableRow({ item, handleOpenModal }) {
-  console.log(item);
   return (
     <TableRow>
       <TableCell colSpan={6} sx={{
         backgroundColor: 'background.paper',
         borderTop: '1px solid',
-        borderColor: 'divider'
+        borderColor: 'divider',
+        p: 0
       }}>
         <Box sx={{ p: 0 }}>
           <TableContainer>
             <Table stickyHeader aria-label="Results table">
               <TableBody>
                 { item.items.map((dataset) => (
                   <TableRow key={dataset.id || dataset.dataset}>
-                    <TableCell style={{ width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset }}></TableCell>
-                    <TableCell style={{ width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset_name }}>
-                      <Box sx={{ display: 'flex'}}>
-                        <Typography sx={{ fontWeight: "bold" }} variant="body2">Dataset: </Typography>
-                        <Typography sx={{ paddingLeft: '5px' }} variant="body2">{ dataset.dataset } </Typography>
-                      </Box>
-                    </TableCell>
-                    <TableCell sx={{ fontWeight: "bold"  }}  style={{ width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset_response }}>
-                      { item.totalResultsCount > 0 ? new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(Number(item.totalResultsCount)) : '-' }
-                    </TableCell>
                     <TableCell 
                       style={{ 
                         width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset_detail.width,
@@ -76,6 +66,16 @@ export default function ResultsTableRow({ item, handleOpenModal }) {
                         </Button>
                       </Tooltip>
                     </TableCell>
+                    <TableCell style={{ width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset_name }}>
+                      <Box sx={{ display: 'flex'}}>
+                        <Typography sx={{ fontWeight: "bold" }} variant="body2">Dataset: </Typography>
+                        <Typography sx={{ paddingLeft: '5px' }} variant="body2">{ dataset.dataset } </Typography>
+                      </Box>
+                    </TableCell>
+                    <TableCell sx={{ fontWeight: "bold"  }}  style={{ width: BEACON_NETWORK_COLUMNS_EXPANDED.beacon_dataset_response }}>
+                      { item.totalResultsCount > 0 ? new Intl.NumberFormat(navigator.language, { useGrouping: true }).format(Number(item.totalResultsCount)) : '-' }
+                    </TableCell>
+                  
                   </TableRow>
                 ))}
               </TableBody>