feat: configurations for list filters

vis/js/components/FilterSort.tsx

@@ -1,25 +1,37 @@
 import React, { FC } from "react";
 import { connect } from "react-redux";
-import StandardFilterSort from "../templates/filtersort/StandardFilterSort";
+
 import BasicFilterSort from "../templates/filtersort/BasicFilterSort";
+import StandardFilterSort from "../templates/filtersort/StandardFilterSort";
 import { State } from "../types";
 
 export interface FilterSortProps {
-  showList: boolean;
+  showSort: boolean;
   showFilter: boolean;
+  isListVisible: boolean;
   color: string | null;
 }
 
-const FilterSort: FC<FilterSortProps> = ({ showList, showFilter, color }) => {
+const FilterSort: FC<FilterSortProps> = ({
+  showSort,
+  showFilter,
+  color,
+  isListVisible,
+}) => {
+  const isSortFilterDisplayed = showSort && isListVisible;
+
   if (showFilter) {
-    return <StandardFilterSort displaySort={showList} color={color} />;
+    return (
+      <StandardFilterSort displaySort={isSortFilterDisplayed} color={color} />
+    );
   }
 
-  return <BasicFilterSort displaySort={showList} color={color} />;
+  return <BasicFilterSort displaySort={isSortFilterDisplayed} color={color} />;
 };
 
 const mapStateToProps = (state: State) => ({
-  showList: state.list.show,
+  isListVisible: state.list.show,
+  showSort: state.list.showSort,
   showFilter: state.list.showFilter,
   color: state.selectedBubble ? state.selectedBubble.color : null,
 });

vis/js/default-config.ts

@@ -161,6 +161,8 @@ var config: Config = {
 
   //display filter menu dropdown
   filter_menu_dropdown: false,
+  // display sort menu dropdown
+  sort_menu_dropdown: false,
   list_images: [],
   list_images_path: "images/",
   visual_distributions: false,

vis/js/reducers/list.ts

@@ -3,6 +3,7 @@ import { Config, Context } from "../types";
 const list = (
   state = {
     show: true,
+    showSort: false,
     searchValue: "",
     showFilter: false,
     filterField: null,
@@ -32,15 +33,18 @@ const list = (
 
   switch (action.type) {
     case "INITIALIZE":
+      const initialSortValue = getEffectiveInitialSortValue(config, context);
+
       return {
         ...state,
         show: !!config.show_list,
+        showSort: !!config.sort_menu_dropdown,
         showFilter: config.filter_menu_dropdown,
         filterField: config.filter_field,
         filterValue: config.filter_options ? config.filter_options[0] : null,
         filterOptions: config.filter_options,
-        sortValue: getSortValue(config, context),
-        defaultSort: getSortValue(config, context),
+        sortValue: initialSortValue,
+        defaultSort: initialSortValue,
         sortOptions: config.sort_options,
         showDocumentType: config.show_resulttype,
         showMetrics: config.metric_list,
@@ -128,3 +132,13 @@ const getSortValue = (config: Config, context: Context) => {
 
   return config.sort_options[0];
 };
+
+const getEffectiveInitialSortValue = (config: Config, context: Context) => {
+  const fallbackSortValue = getSortValue(config, context);
+
+  if (!config.sort_menu_dropdown && config.sort_options?.includes("title")) {
+    return "title";
+  }
+
+  return fallbackSortValue;
+};

vis/js/templates/filtersort/StandardFilterSort.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+
 import FilterDropdown from "../../components/filtersort/FilterDropdown";
 import SearchBox from "../../components/filtersort/SearchBox";
 import SortDropdown from "../../components/filtersort/SortDropdown";
@@ -16,11 +17,13 @@ const StandardFilterSort: FC<StandardFilterSortProps> = ({
     <div
       id="explorer_options"
       className="row"
-      style={{ borderBottom: color ? "5px solid " + color : "" }}
+      style={{ borderBottom: color ? `5px solid ${color}` : "" }}
     >
       <SearchBox />
-      <FilterDropdown />
-      {!!displaySort && <SortDropdown />}
+      <div>
+        <FilterDropdown />
+        {!!displaySort && <SortDropdown />}
+      </div>
     </div>
   );
 };

vis/js/types/configs/config.ts

@@ -96,6 +96,7 @@ export type Config = {
   highlight_query_fields: string[];
 
   filter_menu_dropdown: boolean;
+  sort_menu_dropdown: boolean;
   list_images: string[];
   list_images_path: string;
   visual_distributions: boolean;

vis/js/types/state/slices/list.ts

@@ -13,6 +13,7 @@ export interface List {
   noCitationDoctypes: string[];
   searchValue: string;
   show: boolean;
+  showSort: boolean;
   showDocumentType: boolean;
   showFilter: boolean;
   showKeywords: boolean;

vis/stylesheets/components/_buttons.scss

@@ -1,12 +1,12 @@
 /* Clear button in input form */
 #searchclear {
     position: absolute;
-    right: 15px;
+    right: 7px;
     top: 0;
-    bottom: 10px;
+    bottom: 16px;
     height: 14px;
     margin: auto;
-    font-size: 14px;
+    font-size: 20px;
     cursor: pointer;
     color: #ccc;
     z-index: 100;