From 966b445172ddd33518e78a583132a66f569a5177 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= <anne.lhote@gmail.com>
Date: Thu, 9 Nov 2023 15:15:04 +0100
Subject: [PATCH] fix(ui): Restore sources facet

---
 client/src/pages/home/index.jsx | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/home/index.jsx b/client/src/pages/home/index.jsx
index ef057fa6..3d090564 100644
--- a/client/src/pages/home/index.jsx
+++ b/client/src/pages/home/index.jsx
@@ -38,6 +38,8 @@ const {
   VITE_BSO_PUBLICATIONS_INDEX,
 } = import.meta.env;
 
+const DATASOURCES = [{ key: 'bso', label: 'French OSM' }, { key: 'openalex', label: 'OpenAlex' }];
+
 const getData = async (options) => {
   const promises1 = [getBsoWorks({ options, index: VITE_BSO_PUBLICATIONS_INDEX }), getOpenAlexPublications(options)];
   const publications = await Promise.all(promises1.flat());
@@ -78,6 +80,7 @@ export default function Home() {
   const [allAffiliations, setAllAffiliations] = useState([]);
   const [allDatasets, setAllDatasets] = useState([]);
   const [allPublications, setAllPublications] = useState([]);
+  const [filteredDatasources, setFilteredDatasources] = useState(DATASOURCES.map((datasource) => datasource.key));
   const [filteredPublications, setFilteredPublications] = useState([]);
   const [filteredStatus, setFilteredStatus] = useState(Object.keys(status));
   const [filteredYears, setFilteredYears] = useState([]);
@@ -207,9 +210,9 @@ export default function Home() {
   }, [data, regexp]);
 
   useEffect(() => {
-    const filteredPublicationsTmp = allPublications.filter((publication) => filteredStatus.includes(publication.status) && filteredYears.includes(publication.year));
+    const filteredPublicationsTmp = allPublications.filter((publication) => filteredDatasources.includes(publication.datasource) && filteredStatus.includes(publication.status) && filteredYears.includes(publication.year));
     setFilteredPublications(filteredPublicationsTmp);
-  }, [allPublications, filteredStatus, filteredYears]);
+  }, [allPublications, filteredDatasources, filteredStatus, filteredYears]);
 
   useEffect(() => {
     groupByAffiliations();
@@ -266,6 +269,14 @@ export default function Home() {
     </>
   );
 
+  const onDatasourcesChange = (datasource) => {
+    if (filteredDatasources.includes(datasource.key)) {
+      setFilteredDatasources(filteredDatasources.filter((filteredDatasource) => filteredDatasource !== datasource.key));
+    } else {
+      setFilteredDatasources(filteredDatasources.concat([datasource.key]));
+    }
+  };
+
   const onStatusChange = (st) => {
     if (filteredStatus.includes(st)) {
       setFilteredStatus(filteredStatus.filter((filteredSt) => filteredSt !== st));
@@ -383,6 +394,20 @@ export default function Home() {
                       />
                     ))}
                   </CheckboxGroup>
+                  <CheckboxGroup
+                    hint="Filter results on selected datasources"
+                    legend="Source"
+                  >
+                    {DATASOURCES.map((datasource) => (
+                      <Checkbox
+                        checked={filteredDatasources.includes(datasource.key)}
+                        key={datasource.key}
+                        label={datasource.label}
+                        onChange={() => onDatasourcesChange(datasource)}
+                        size="sm"
+                      />
+                    ))}
+                  </CheckboxGroup>
                   <CheckboxGroup
                     hint="Filter results on selected years"
                     legend="Years"