feat: Add kg search dates filter (#1936)(#1950)

* fix: adjust navbar to prevent elements from wrapping Co-authored-by: Chandrasekhar Ramakrishnan <cramakri@ethz.ch> Co-authored-by: Lorenzo <lorenzo.cavazzi.tech@gmail.com> fix #1936
SwissDataScienceCenter · Sep 14, 2022 · c3bed8e · c3bed8e
1 parent b632973
commit c3bed8e
Show file tree

Hide file tree

Showing 16 changed files with 310 additions and 71 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/features/kgSearch/KgSearchApi.ts b/client/src/features/kgSearch/KgSearchApi.ts
@@ -31,6 +31,8 @@ type SearchEntitiesQueryParams = {
   author: KgAuthor;
   visibility?: VisibilitiesFilter;
   userName?: string;
+  since?: string;
+  until?: string
 };
 
 function getHeaderFieldNumeric(headers: Headers, field: string): number {
@@ -77,6 +79,14 @@ const getPhrase = (phrase?: string) => {
   return `*${phrase}*`;
 };
 
+const setDates = (query: string, since?: string, until?: string) => {
+  if (since)
+    query = `${query}&since=${since}`;
+  if (until)
+    query = `${query}&until=${until}`;
+  return query;
+};
+
 // Define a service using a base URL and expected endpoints
 export const kgSearchApi = createApi({
   reducerPath: "kgSearchApi",
@@ -94,16 +104,19 @@ export const kgSearchApi = createApi({
         type,
         visibility,
         author,
-        userName
+        userName,
+        since,
+        until
       }) => {
         const url = `entities?query=${getPhrase(
           phrase
         )}&sort=${sort}&page=${page}&per_page=${perPage}`;
-        return setAuthorInQuery(
-          setVisibilityInQuery(setTypeInQuery(url, type), visibility),
-          author,
-          userName
-        );
+        return setDates(
+          setAuthorInQuery(
+            setVisibilityInQuery(setTypeInQuery(url, type), visibility),
+            author,
+            userName
+          ), since, until);
       },
       transformResponse: (
         response: KgSearchResult[],

diff --git a/client/src/features/kgSearch/KgSearchPage.tsx b/client/src/features/kgSearch/KgSearchPage.tsx
@@ -25,12 +25,13 @@ import { FilterEntitySearch } from "../../utils/components/entitySearchFilter/En
 import { SearchResultsHeader } from "../../utils/components/searchResultsHeader/SearchResultsHeader";
 import { SearchResultsContent } from "../../utils/components/searchResultsContent/SearchResultsContent";
 import { useSearchEntitiesQuery } from "./KgSearchApi";
-import { setPage, setSort, reset, useKgSearchFormSelector } from "./KgSearchSlice";
+import { setPage, setSort, removeFilters, useKgSearchFormSelector } from "./KgSearchSlice";
 import { KgAuthor } from "./KgSearch";
 import { TypeEntitySelection } from "../../utils/components/typeEntityFilter/TypeEntityFilter";
 import { VisibilitiesFilter } from "../../utils/components/visibilityFilter/VisibilityFilter";
 import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { DatesFilter } from "../../utils/components/dateFilter/DateFilter";
 
 interface SearchPageProps {
   isLoggedUser: boolean;
@@ -46,6 +47,7 @@ interface ModalFilterProps {
   isOpen: boolean;
   onToggle: Function;
   isLoggedUser: boolean;
+  valuesDate: DatesFilter;
 }
 
 const ModalFilter = ({
@@ -57,6 +59,7 @@ const ModalFilter = ({
   isOpen,
   onToggle,
   isLoggedUser,
+  valuesDate
 }: ModalFilterProps) => {
   return (
     <Modal isOpen={isOpen} toggle={onToggle} className="filter-modal">
@@ -65,7 +68,8 @@ const ModalFilter = ({
       </ModalHeader>
       <ModalBody>
         <div className="bg-white px-4 pb-4 w-100">
-          <FilterEntitySearch author={author} type={type} visibility={visibility} isLoggedUser={isLoggedUser} />
+          <FilterEntitySearch
+            valuesDate={valuesDate} author={author} type={type} visibility={visibility} isLoggedUser={isLoggedUser} />
           <SortingEntities styleType="mobile" sort={sort} setSort={handleSort} />
         </div>
       </ModalBody>
@@ -74,7 +78,7 @@ const ModalFilter = ({
 };
 
 function SearchPage({ userName, isLoggedUser }: SearchPageProps) {
-  const { phrase, sort, page, type, author, visibility, perPage } = useKgSearchFormSelector(
+  const { phrase, sort, page, type, author, visibility, perPage, since, until, typeDate } = useKgSearchFormSelector(
     (state) => state.kgSearchForm
   );
   const [isOpenFilterModal, setIsOpenFilterModal] = useState(false);
@@ -88,9 +92,17 @@ function SearchPage({ userName, isLoggedUser }: SearchPageProps) {
     type,
     visibility,
     userName,
+    since,
+    until,
+  };
+
+  const valuesDate = {
+    since,
+    until,
+    type: typeDate
   };
   const onRemoveFilters = () => {
-    dispatch(reset());
+    dispatch(removeFilters());
   };
 
   const { data, isFetching, isLoading } = useSearchEntitiesQuery(searchRequest);
@@ -102,7 +114,8 @@ function SearchPage({ userName, isLoggedUser }: SearchPageProps) {
         </div>
       </div>
       <div className="bg-white p-4 rounded-2 d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
-        <FilterEntitySearch author={author} type={type} visibility={visibility} isLoggedUser={isLoggedUser} />
+        <FilterEntitySearch
+          valuesDate={valuesDate} author={author} type={type} visibility={visibility} isLoggedUser={isLoggedUser} />
       </div>
     </>
   );
@@ -136,6 +149,7 @@ function SearchPage({ userName, isLoggedUser }: SearchPageProps) {
               isOpen={isOpenFilterModal}
               onToggle={() => setIsOpenFilterModal(!isOpenFilterModal)}
               isLoggedUser={isLoggedUser}
+              valuesDate={valuesDate}
             />
           </div>
         </Col>

diff --git a/client/src/features/kgSearch/KgSearchSlice.ts b/client/src/features/kgSearch/KgSearchSlice.ts
@@ -22,6 +22,7 @@ import { TypeEntitySelection } from "../../utils/components/typeEntityFilter/Typ
 import { VisibilitiesFilter } from "../../utils/components/visibilityFilter/VisibilityFilter";
 import { SortingOptions } from "../../utils/components/sortingEntities/SortingEntities";
 import { KgAuthor } from "./KgSearch";
+import { dateFilterTypes, DatesFilter } from "../../utils/components/dateFilter/DateFilter";
 
 export interface KgSearchFormState {
   phrase: string;
@@ -31,6 +32,9 @@ export interface KgSearchFormState {
   type: TypeEntitySelection;
   author: KgAuthor;
   visibility: VisibilitiesFilter;
+  since: string;
+  until: string;
+  typeDate: dateFilterTypes;
 }
 
 const initialState: KgSearchFormState = {
@@ -48,6 +52,9 @@ const initialState: KgSearchFormState = {
     public: false,
     internal: false,
   },
+  since: "",
+  until: "",
+  typeDate: dateFilterTypes.all
 };
 
 type RootStateWithKgSearchForm = { kgSearchForm: KgSearchFormState };
@@ -72,6 +79,11 @@ export const kgSearchFormSlice = createSlice({
       state.type = action.payload;
       state.page = 1;
     },
+    setDates: (state, action: PayloadAction<DatesFilter>) => {
+      state.since = action.payload.since ?? "";
+      state.until = action.payload.until ?? "";
+      state.typeDate = action.payload.type ?? dateFilterTypes.all;
+    },
     setVisibility: (state, action: PayloadAction<VisibilitiesFilter>) => {
       state.visibility = action.payload;
       state.page = 1;
@@ -95,12 +107,23 @@ export const kgSearchFormSlice = createSlice({
       state.phrase = "";
       state.page = 1;
     },
+    removeFilters: (state, action: PayloadAction) => {
+      state.type = initialState.type;
+      state.author = initialState.author;
+      state.page = initialState.page;
+      state.typeDate = initialState.typeDate;
+      state.since = initialState.since;
+      state.until = initialState.until;
+      state.visibility = initialState.visibility;
+      state.sort = initialState.sort;
+    },
     reset: () => initialState
   },
 });
 
 export const {
-  setAuthor, setVisibility, setPage, setPhrase, setSort, setType, setMyDatasets, setMyProjects, reset } =
+  setAuthor, setDates, setVisibility, setPage, setPhrase, setSort, setType,
+  setMyDatasets, setMyProjects, reset, removeFilters } =
   kgSearchFormSlice.actions;
 export const useKgSearchFormSelector: TypedUseSelectorHook<RootStateWithKgSearchForm> =
   useSelector;

diff --git a/client/src/landing/AnonymousHome.js b/client/src/landing/AnonymousHome.js
@@ -149,6 +149,12 @@ function HomeHeader(props) {
             <NavItem className="nav-item pe-1">
               <QuickNav client={props.client} model={props.model} user={props.user} />
             </NavItem>
+            <NavItem>
+              <RenkuNavLink to="/projects" title="Projects" id="link-projects" className="link-secondary" />
+            </NavItem>
+            <NavItem>
+              <RenkuNavLink to="/datasets" title="Datasets" id="link-datasets" />
+            </NavItem>
             <NavItem className="nav-item">
               <RenkuNavLink to="/sessions" title="Sessions" id="link-sessions" />
             </NavItem>
@@ -232,7 +238,7 @@ function Section1(props) {
         </Row>
         <Row>
           <Col className="rk-pt-s rk-w-s">
-            <HashLink className="btn btn-secondary-home" role="button"
+            <HashLink className="btn btn-outline-rk-pink" role="button"
               to="#rk-anon-home-section-features">
             Learn more
             </HashLink>
@@ -251,11 +257,11 @@ function TutorialLink(props) {
   if (url.startsWith("http")) {
     return <ExternalLink
       title="Follow the tutorial"
-      className="btn btn-secondary-home" role="button" id="link-learn"
+      className="btn btn-outline-rk-pink" role="button" id="link-learn"
       showLinkIcon={true}
       url={url} />;
   }
-  return <Link className="btn btn-secondary-home" role="link" id="link-tutorial" to={url}>
+  return <Link className="btn btn-outline-rk-pink" role="link" id="link-tutorial" to={url}>
     Follow the tutorial
   </Link>;
 }
@@ -295,7 +301,7 @@ function Section4(props) {
         <div className="pt-2" style={{ minWidth: "180px" }}>
           <ExternalLink
             title="Learn more"
-            className="btn btn-secondary-home" role="button" id="link-learn"
+            className="btn btn-outline-rk-pink" role="button" id="link-learn"
             showLinkIcon={true}
             url={Docs.READ_THE_DOCS_ROOT} />
         </div>

diff --git a/client/src/landing/NavBar.css b/client/src/landing/NavBar.css
@@ -13,26 +13,10 @@
 }
 
 .menu-right {
-    margin-top: 10px;
+    margin: auto;
+    flex-grow: 0;
 }
 
 .menu-right ul{
     justify-content: space-between;
 }
-
-@media (min-width: 992px) {
-    .menu-right{
-        max-width: 260px;
-        margin-top: 0;
-    }
-}
-
-@media (min-width: 1440px) {
-    .menu-right{
-        max-width: 280px;
-        margin-top: 0;
-    }
-    .navbar-brand {
-        width: 280px;
-    }
-}
diff --git a/client/src/landing/NavBar.js b/client/src/landing/NavBar.js
@@ -283,7 +283,7 @@ class LoggedInNavBar extends Component {
             </NavbarToggler>
             <QuickNav client={this.props.client} model={this.props.model} user={this.props.user} />
             <Collapse isOpen={!this.state.isOpen} navbar className="menu-right">
-              <Nav className="navbar-nav flex-row flex-wrap ms-lg-auto">
+              <Nav className="navbar-nav flex-row flex-nowrap ms-lg-auto">
                 <NavItem className="nav-item col-4 col-lg-auto pe-lg-4">
                   <RenkuNavLink to="/sessions" title="Sessions" id="link-sessions" />
                 </NavItem>
@@ -342,9 +342,18 @@ class AnonymousNavBar extends Component {
             <NavbarToggler onClick={this.toggle} className="border-0">
               <FontAwesomeIcon icon={faBars} id="userIcon" color="white" />
             </NavbarToggler>
-            <QuickNav client={this.props.client} model={this.props.model} user={this.props.user} />
             <Collapse isOpen={!this.state.isOpen} navbar className="menu-right">
-              <Nav className="navbar-nav flex-row flex-wrap ms-lg-auto">
+              <Nav className="navbar-nav flex-row flex-nowrap ms-lg-auto">
+                <NavItem className="nav-item col-12 col-lg-auto pe-0 pe-lg-4 my-2 my-lg-0">
+                  <QuickNav client={this.props.client} model={this.props.model} user={this.props.user} />
+                </NavItem>
+                <NavItem className="nav-item col-4 col-lg-auto">
+                  <RenkuNavLink to="/projects" alternate={"/projects/all"}
+                    title="Projects" id="link-projects" className="link-secondary" />
+                </NavItem>
+                <NavItem className="nav-item col-4 col-lg-auto">
+                  <RenkuNavLink to="/datasets" title="Datasets" id="link-datasets" />
+                </NavItem>
                 <NavItem className="nav-item col-4 col-lg-auto pe-4">
                   <RenkuNavLink to="/sessions" title="Sessions" id="link-sessions" />
                 </NavItem>

diff --git a/client/src/styles/components/_renku_search.scss b/client/src/styles/components/_renku_search.scss
@@ -164,6 +164,7 @@
   background-color: white;
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
+  max-height: calc(100vh - 150px);
 
   .modal-content {
     border: none;
@@ -182,4 +183,7 @@
       padding-right: 20px;
     }
   }
+  .modal-body {
+    overflow: auto;
+  }
 }
diff --git a/client/src/utils/components/authorFilter/AuthorFilter.tsx b/client/src/utils/components/authorFilter/AuthorFilter.tsx
@@ -54,7 +54,8 @@ const AuthorFilter = ({ handler, value }: AuthorFilterProps) => {
           className="author-input"
           checked={value === item.value}
           data-cy={nameInput}/>
-        <label className="px-2 author-label">{item.title}</label>
+        <label className="px-2 author-label cursor-pointer"
+          onClick={() => changeAuthor(item.value)}>{item.title}</label>
       </div>
     );
   });