diff --git a/assets/src/pages/SearchFilterFields.js b/assets/src/pages/SearchFilterFields.js
index e16e0dcd..bb9f5a82 100644
--- a/assets/src/pages/SearchFilterFields.js
+++ b/assets/src/pages/SearchFilterFields.js
@@ -1,1317 +1,1317 @@
 /*
 This is the Open Access Check Tool (OACT).
 The publication of scientific articles as Open Access (OA), usually in the variants "Green OA" and "Gold OA", allows free access to scientific research results and their largely unhindered dissemination. Often, however, the multitude of available publication conditions makes the decision in favor of a particular journal difficult: requirements of the funding agencies and publication guidelines of the universities and colleges must be carefully compared with the offers of the publishing houses, and separately concluded publication agreements can also offer additional benefits. The "OA Compliance Check Tool" provides a comprehensive overview of the possible publication conditions for a large number of journals, especially for the Swiss university landscape, and thus supports the decision-making process.
 
 © All rights reserved. ECOLE POLYTECHNIQUE FEDERALE DE LAUSANNE, Switzerland, Scientific Information and Libraries, 2022
 
 See LICENSE.TXT for more details.
 
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License along with this program. If not, see
 <https://www.gnu.org/licenses/>. 
 
 */
 
 import React, {useContext, useState, useEffect} from 'react';
 import "./SearchFilterFields.css"
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { searchCondi, searchorganizationonly, searchjournalonly, searchInstitFunder, searchCondi3 } from '../services/requests/Condition'
 import {getJournal} from '../services/requests/Journal'
 import {getFunder} from '../services/requests/Funder'
 import {getInstitution} from '../services/requests/Institution'
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Typography from '@material-ui/core/Typography';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Grid from '@material-ui/core/Grid'
 import Box from '@material-ui/core/Box'
 import Container from '@material-ui/core/Container';
 import {Context} from "../ContextProvider"
 import ResultCard from  "../components/ResultCard"
 import DetailCard from  "../components/DetailCard"
 import CircularProgress from '@material-ui/core/CircularProgress'
 import Fab from '@material-ui/core/Fab'
 import ShareIcon from '@material-ui/icons/Share'
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Slide from '@material-ui/core/Slide';
 import Welcome from './welcome';
 import {
   useHistory,useLocation
 } from "react-router-dom";
 import PropTypes from 'prop-types';
 // import { FiFlag } from 'react-icons/fi';
 import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
 import Tooltip from '@material-ui/core/Tooltip';
 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
 // ID of condition type that must be excluded in some API requests
 const j_only_id = 3
 const o_only_id = 1
 
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
   },
 
 chip: {
   margin: 0.5,
   
 },
 
 }));
 
 /**
  * Contain the main logic of OACT tools to filter and send the appropriate request.
  * @version 0.0.1
  * @author [Hugo Galuppo](https://github.com/hgpulse)
  */
 
 
 // Comparison function to sort details as instititution ' funder - journal'
 // sort order on the is_funder field is True, False, undefined
 function details_compare(a, b) {
     console.log('Entering details_compare()')
     if (a.is_funder == undefined) {
         if (b.is_funder == undefined) {
             // the 1st object is a journal, must come last
             return 0;
         } else {
             return 1;
         }
     } else {
         if (b.is_funder == undefined) {
             return -1;
         } else {
             if (a.is_funder < b.is_funder) {
                 return -1;
             } else {
                 return 1;
             }
         }
     }
 
     return 0;
 }
 
 
 
 export default function SearchFilterFields() {
   /** Access to URL parameter */
   const history = useHistory();
   
   
 
   console.log(history)
   let query = useQuery()
   //state that allow to hide or show the share url button 
   const [open, setOpen] = React.useState(false)
  
  
   const classes = useStyles();
 
   
 
   //call the custom hook to share the state between different level componant 
 
   const { getSelectedInstitId,
           getSelectedJournalId,
           getSelectedFunderId,
           institList, 
           journalList,
           funderList,
           institId,
           journalId,
           funderId,
           setInstitId, 
           setJournalId,
           setFunderId,
           setUrl,
           url
         } 
           = useContext(Context)
   
 
   //responses
   const [conditions, setConditions] = useState([]);
   const [details, setDetails] = useState([]);
 
   const [result, updateResult] = useState([]);
   //Manage the loading state to hide or show the spinner in the search bar
   const [loading, setLoading] = useState(false);
   // const [url, setUrl] = useState(window.location.href);
 
   
   
   useEffect(() => {
   
    setDetails('null')
    
     setUrl(window.location.href)
   
    //handle Url param
 
   console.log(history)
   
   if (history.location.pathname === "/check") {
     console.log("this an url to check")
     setDetails('fromUrl')
     // alert(query.get("institution"))
   
   
               if (query.get("institution") && !query.get("funder") && !query.get("journal")){
                 //get organizations conditions
                 // alert(`get api organization Condition only: ${institId}`)
                 //condtion type is not journal only = 1
                 // Get the user
                 
                   const sendSearchInstitOnly =
                   async () => {
                     
                         try {
                           
                           
                             const resp = await searchorganizationonly(query.get("institution"), j_only_id)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   
                         
                   }
                   
                   console.log(details)
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
                             // console.log(`instit name from api: ${resp.data.name}`)
                             // setInstitName(resp.data.name)
                             updateResult(arr => [...arr, resp.data])
                             // if (details === "null") {
                             //   setDetails(resp.data)
                             // }
                             // else {
                             //   setDetails(prevArray => [...prevArray, resp.data])
                             // }
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
                     sendSearchInstitOnly().then(
                       sendGetrequest()
                     )
                     history.push({pathname:`check`, search:`institution=${query.get("institution")}`})
                 }
 
                 else if (!query.get("institution") && !query.get("journal") && query.get("funder")){
                   //get funder conditions
                
                   // alert(`get api funder Condition only: ${funderId}`)
                   //condtion type is not journal only = 1
               
                   const sendSearchOrgaOnly =
                   async () => {
                         try {
                             const resp = await searchorganizationonly(query.get("funder"), j_only_id)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getFunder(query.get("funder"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                 
                 sendSearchOrgaOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`funder=${query.get("funder")}`})
                 }
 
                 else if (!query.get("funder") && !query.get("institution") && query.get("journal")){
                   
                   //get journals conditions
                   // alert(`get api journal Condition only: ${journalId}`)
                   //condtion type is not institution only = 2
                   //get journal detail
               
                   const sendSearchJournalOnly =
                   async () => {
                         try {
                             const resp = await searchjournalonly(query.get("journal"), o_only_id)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                             // setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
               
                   }
                   
                   const sendGetrequest =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         
                   }
               
                 sendSearchJournalOnly().then(
                   sendGetrequest()
                 )
                 history.push({pathname:`check`, search:`journal=${query.get("journal")}`})
                 }
                 else if (query.get("institution") && query.get("funder") && !query.get("journal")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchInstitFunder(query.get("institution"), query.get("funder"), j_only_id)
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                  
                   const sendGetInstit =
                   async () => {
                         try {
                             const resp = await getInstitution(query.get("institution"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
-                            updateResult(arr => [...arr, resp.data])
+                            updateResult(arr => [...arr, resp.data].sort(details_compare))
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           
-                          updateResult(arr => [...arr, resp.data])
+                          updateResult(arr => [...arr, resp.data].sort(details_compare))
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                       
                     }
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetFunder())
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && !query.get("funder")) {
                    
                   //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
                   //condtion type journal/condition = 3
                   const sendSearchCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("institution"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                   async () => {
                     try {
                         const resp = await getInstitution(query.get("institution"))
                         console.log(resp.data)
                         
-                        updateResult(arr => [...arr, resp.data])
+                        updateResult(arr => [...arr, resp.data].sort(details_compare))
                         
                     } catch (err) {
                         // Handle Error Here
                         console.error(err);
                     }
                     
                   }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             // detailArray.push(resp.data)
                             // setDetails(detailArray)
-                            updateResult(arr => [...arr, resp.data])
+                            updateResult(arr => [...arr, resp.data].sort(details_compare))
                            
                             
                             
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   sendSearchCondi().then(
                     sendGetInstit().then(sendGetJournal)
                   )
               
                   history.push({pathname:`check`, search: `institution=${query.get("institution")}&journal=${query.get("journal")}`})
                 }
 
                 else if (!query.get("institution") && query.get("journal") && query.get("funder")) {
                    
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi(query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
               
                   const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
-                          updateResult(arr => [...arr, resp.data])
+                          updateResult(arr => [...arr, resp.data].sort(details_compare))
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                     }
 
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
-                            updateResult(arr => [...arr, resp.data])
+                            updateResult(arr => [...arr, resp.data].sort(details_compare))
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                   }
                   
                   
                   
                   sendGetCondi().then(
                     sendGetFunder().then(
                       sendGetJournal()
                     )
                   )
                   history.push({pathname:`check`, search: `funder=${query.get("funder")}&journal=${query.get("journal")}`})
                 }
 
                 else if (query.get("institution") && query.get("journal") && query.get("funder")) {
                  
                   // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
                   //condtion type journal/institution/funder conditions = 3
                   console.log("main check !")
                   //(institution + journal)
                   const detailArray = []
               
                   const sendGetCondi =
                   async () => {
                         try {
                             const resp = await searchCondi3(query.get("institution"),query.get("journal"),query.get("funder"))
                             console.log(resp.data)
                             setConditions(arr => [...arr, resp.data])
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         setLoading(false)
                   }
                   const sendGetInstit =
                     async () => {
                       try {
                           const resp = await getInstitution(query.get("institution"))
                           console.log(resp.data)
                           detailArray.push(resp.data)
                           updateResult(arr => [...arr, resp.data].sort(details_compare))
                           console.log("sendGetInst completing")
                           
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                       return 0;
                     }
 
                     const sendGetFunder =
                     async () => {
                       try {
                           const resp = await getFunder(query.get("funder"))
                           console.log(resp.data)
                           updateResult(arr => [...arr, resp.data].sort(details_compare))
                           console.log("sendGetFunder completing")
                       } catch (err) {
                           // Handle Error Here
                           console.error(err);
                       }
                       return 0;
                     }
                   const sendGetJournal =
                   async () => {
                         try {
                             const resp = await getJournal(query.get("journal"))
                             console.log(resp.data)
                             updateResult(arr => [...arr, resp.data].sort(details_compare))
                             console.log("sendGetJournal completing")
                         } catch (err) {
                             // Handle Error Here
                             console.error(err);
                         }
                         return 0;
                   }
 
               
                   //order requests
                   sendGetCondi()
                   sendGetInstit().then(
                       sendGetFunder()
                       ).then(
                         sendGetJournal()
                     )
                     history.push({pathname:`check`, search: `institution=${query.get("institution")}&funder=${query.get("funder")}&journal=${query.get("journal")}`})
                     
                    
                 }
            
                   
 
   }
   
  
 
   
   }, [])
   //useEffect on Url state change
   React.useEffect(() => {
     //condition to avoid infinite loop
     if (history.location.pathname === "/") {
       setConditions([])
       setDetails('null')
       updateResult([])
       setUrl(window.location.href)
     
     }
   }, [url]);
  
   function handleReport () {
     // ## Create mail template to report a modification, contain the actual Url and the reference Term Card
     window.open(`mailto:publishsupport@epfl.ch?subject= OACT Modification request for ${encodeURIComponent(url)} &body=Request Description:`)
     }
 
 
  //copy url to clipboard 
  function handlShare(e) {
   
   setOpen(true)
   navigator.clipboard.writeText(url)
   
 }
 const handleClose = () => {
   setOpen(false);
 };
   
   function handleInstit(e, newInputValue) { 
 
    if (newInputValue){
     getSelectedInstitId(newInputValue)
     return
 
    }
 
   //  if (institName){
   //   getSelectedInstitId(institName)
   //   return
 
   //  }
    
    setInstitId("")
 
   }
   
   function handleFunder(e, newInputValue) {
     console.log(newInputValue)
     if (newInputValue){
     getSelectedFunderId(newInputValue)
     return
     }
     setFunderId("")
   }
 
   function handleJournal(e, newInputValue) {
     
     if (newInputValue){
       getSelectedJournalId(newInputValue)
       return
      }
      setJournalId("")     
   }
 
 function handleSubmit(e) {
   setLoading(true)
   e.preventDefault()
   
   //reset precedent results
   setConditions([])
   setDetails([])
   updateResult([])
   
 
 
   if (!institId && !journalId && !funderId){
     setLoading(false)
     setDetails('null')
     
   }
 
   if (institId && !journalId && !funderId){
   //get organizations conditions
   // alert(`get api organization Condition only: ${institId}`)
   //condtion type is not journal only = 1
   // Get the user
   
     const sendSearchInstitOnly =
     async () => {
       
           try {
             
             
               const resp = await searchorganizationonly(institId, j_only_id)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     
           
     }
     
     console.log(details)
 
     const sendGetrequest =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               // if (details === "null") {
               //   setDetails(resp.data)
               // }
               // else {
               //   setDetails(prevArray => [...prevArray, resp.data])
               // }
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
       sendSearchInstitOnly().then(
         sendGetrequest()
       )
       history.push({pathname:`check`, search:`institution=${institId}`})
       
   }
   
   else if (!institId && !journalId && funderId){
     //get funder conditions
     // alert(`get api funder Condition only: ${funderId}`)
     //condtion type is not journal only = 1
 
     const sendSearchOrgaOnly =
     async () => {
           try {
               const resp = await searchorganizationonly(funderId, j_only_id)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getFunder(funderId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
   
   sendSearchOrgaOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`funder=${funderId}`})
   }
   else if (!funderId && !institId && journalId){
     //get journals conditions
     // alert(`get api journal Condition only: ${journalId}`)
     //condtion type is not institution only = 2
     //get journal detail
 
     const sendSearchJournalOnly =
     async () => {
           try {
               const resp = await searchjournalonly(journalId, o_only_id)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               // setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
 
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
 
   sendSearchJournalOnly().then(
     sendGetrequest()
   )
   history.push({pathname:`check`, search:`journal=${journalId}`})
   }
   
   else if (institId && funderId && !journalId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchInstitFunder(institId, funderId, j_only_id)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
    
     const sendGetInstit =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               //manage the order output
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
               
             
              
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
         
       }
     sendSearchCondi().then(
       sendGetInstit().then(sendGetFunder())
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}`})
   }
   else if (institId && journalId && !funderId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,institId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetInstit =
     async () => {
       try {
           const resp = await getInstitution(institId)
           console.log(resp.data)
           
           updateResult(arr => [...arr, resp.data])
         
       } catch (err) {
           // Handle Error Here
           console.error(err);
       }
       
     }
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
            
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     sendSearchCondi().then(
       sendGetInstit().then(sendGetJournal)
     )
 
     history.push({pathname:`check`, search: `institution=${institId}&journal=${journalId}`})
   }
   else if (!institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     
     
     sendGetCondi().then(
       sendGetJournal().then(
         sendGetFunder()
       )
     )
     history.push({pathname:`check`, search: `funder=${funderId}&journal=${journalId}`})
   }
   else if (institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
     console.log("main check !")
     //(institution + journal)
     const detailArray = []
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi3(institId,journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
 
     const sendGetInstit =
       async () => {
         try {
             const resp = await getInstitution(institId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
             
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
       const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     
     //order the request
     sendGetCondi()
     sendGetInstit().then(
         sendGetFunder()
         ).then(
           sendGetJournal()
       )
       history.push({pathname:`check`, search: `institution=${institId}&funder=${funderId}&journal=${journalId}`})
       
   }
   
   
 }
 
 console.log(`all conditions SET: ${conditions}`)
 console.log(details)
 
 console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
 
 
 
 function detailsResult() {
 
 console.log(`details: ${details}`)
 console.log(result)
 
 
 
 
 if (details !== 'null') {
   
 
   return (
     
 
     <div className={classes.root} >
       
  
 
                   <Accordion style={{ marginBottom: "2rem"}} defaultExpanded="true">
                   <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1a-content"
                     id="panel1a-header"
                   >
                  
                     <Typography className={classes.heading}>
                       
                     <p>Selected option(s)</p>
                     
                     </Typography>
                   
                    
                   </AccordionSummary>
                   <Container maxWidth="xl" >
                   <Grid container spacing={0.5} direction="row">
        
                   
                   {result?.map(i => (
                   
                   <Grid key={i.id} item>
                  
                    <AccordionDetails>
                   
 
                   <DetailCard  details={i}/>
                   
                  
                  
                   </AccordionDetails>
                
                   </Grid>
     
                   ))}
                   </Grid>
                   </Container>
               
                 
                   </Accordion>
         
           
   </div>
   )
   }
 }
 
 function conditionResults () {
 
   return (
     <div className={classes.root} >
     {conditions?.map(i=> (
 
     
      <ResultCard  result={i}/>
    
     ))}
     </div>
   )
 
 }
 
 
   return (
     <Box>
 
     <div id="bannertext">
      Your input on OACT is welcome! Do not hesitate to contact <a href="mailto:publishsupport@epfl.ch">publishsupport@epfl.ch</a> for comments or questions,
      or use the "Modification request" buttons in the results for feedback regarding specific details.
     </div>
 
     <div className={classes.root}>
 
 
     <Container maxWidth="xl" >
     <Grid container spacing={1} direction="row">
       
         <form className={classes.root} style={{ marginTop: "8rem"}}  noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
         
         
             <FormControl  className="form-input" style={{ width: 340}}>
               <Autocomplete
                   freeSolo
                   autoSelect
                   selectOnFocus
                   clearOnBlur 
                   id="institution"
                   options={institList.map((option) => option.name)}
                   renderOption={(params) => (
                     <a style={{ textAlign: "left"}}>{params}</a>
                   )}
                   
                   // getOptionLabel={(option) => option.name}
                   // filterOptions={filterOptions}
                   onInputChange={handleInstit}
                   // inputValue={institName}
                   renderInput={(params) => (
                     <TextField
                         {...params}
                         label="Swiss Institution"
                         // margin="normal"
                         value={institId}
                         variant="outlined"
                         
                     />
                     )}
                     
               />
 
               { (institList.length > 0) ? 
                         <p class="field-comment">
                         {institList.length} institutions
                          </p>
                          :
                          <p class="field-comment">
                         Loading...
                          </p>
                     }
             </FormControl>
           
          
 
          
            
             <FormControl className="form-input" style={{ width: 340}}>
               <Autocomplete
                 freeSolo
                 id="funder"
                 options={funderList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleFunder}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Funder"
                       // margin="normal"
                       value={funderId}
                       variant="outlined"
                   />
                   )}
                 />
 
                         { (funderList.length > 0) ? 
                         <p class="field-comment">
                         {funderList.length} funders
                          </p>
                          :
                          <p class="field-comment">
                         Loading...
                          </p>
                     }
               </FormControl>
               
          
         
 
          
          
             <FormControl className="form-input" style={{ width: 340}}>
             
               <Autocomplete
                 freeSolo
                 id="journal"
                 options={journalList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleJournal}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Journal"
                       // margin="normal"
                       value={journalId}
                       variant="outlined"
                   />
                   )}
                 />
 
                     { (journalList.length > 0) ? 
                         <p class="field-comment">
                         {journalList.length} journals
                          </p>
                          :
                          <p class="field-comment">
                         Loading...
                          </p>
                     }
                
               </FormControl>
 
         
             
            
             <FormControl className="form-input" style={{ width: 340}}>
             
                         {!loading && 
                       
                       
                             <Button
                             className="App-btn"
                             variant="contained" 
                             type="submit"
                             >
                                     Check
                               </Button>
                           }
                         {loading && 
                       <Button
                       className="App-btn"
                       variant="contained" 
                       type="submit"
                       disabled
                       
                       >
                         < CircularProgress 
                         color="white"
                         />
                               Checking...
                         </Button>
                     }
             </FormControl>
           
            
           
           </form>
           </Grid>
           </Container>
         
       <Container maxWidth="xl" >
         
             
               {detailsResult()}
       
               {conditionResults()}
 
 
 
 
         {  history.location.pathname === "/" &&
         
         
 
         <Welcome />
         }
         {/* {  history.location.pathname === "/" && */}
         <Tooltip disableFocusListener title="Share Url" arrow>
         <Fab onClick={handlShare} color="primary" aria-label="add">
         <ShareIcon />
         </Fab>
         </Tooltip>
         {/* } */}
         <Dialog
         open={open}
         TransitionComponent={Transition}
         keepMounted
         onClose={handleClose}
         aria-labelledby="alert-dialog-slide-title"
         aria-describedby="alert-dialog-slide-description"
       >
         <DialogTitle id="alert-dialog-slide-title">{"Share your Result!"}</DialogTitle>
         <DialogContent>
           <DialogContentText id="alert-dialog-slide-description">
           
          {url}
             
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Copy to clipboard!
           </Button>
         </DialogActions>
       </Dialog>
       <Tooltip disableFocusListener title="Modification Request" arrow>
       <Fab onClick={handleReport} color="secondary" aria-label="Report">
         <FlagOutlinedIcon  fontSize="medium"/>
         </Fab >
         </Tooltip>
       </Container>
     
    </div>
    </Box>
   );
 }
 
 SearchFilterFields.propTypes = {
   /** Store the selected option/field Result from API. */
   details: PropTypes.object,
   /** Store the individual response for each request. */
   result: PropTypes.object,
   /** Store at the same place the aggregation of all request result */
   conditions: PropTypes.object,
   /** Manage the loading wheels inside the check button. */
   loading: PropTypes.bool
 }