Develop #68 from eea/develop

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.4.23](https://github.com/eea/volto-searchlib/compare/0.4.22...0.4.23) - 13 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Code cleanup [Tiberiu Ichim - [`bf3811c`](https://github.com/eea/volto-searchlib/commit/bf3811c4809c69c815a293ba0f2824929f9bbc59)]
+- Updated ui for doc & docx file formats [Zoltan Szabo - [`a24f11c`](https://github.com/eea/volto-searchlib/commit/a24f11cdd4c030b0283c5099dc10c508c3e15b9e)]
+- WIP [Tiberiu Ichim - [`5a1699f`](https://github.com/eea/volto-searchlib/commit/5a1699f655fe32bfd80b6f6545215c5c8dd5a970)]
+- also show cluster activation [Tiberiu Ichim - [`1013676`](https://github.com/eea/volto-searchlib/commit/1013676c6da7e57773e90194ca20556e565e45e2)]
+- Show filters [Tiberiu Ichim - [`78bab2c`](https://github.com/eea/volto-searchlib/commit/78bab2c0a278fbb4fbb8aad8d16dadf9c077fa94)]
+- WIP [Tiberiu Ichim - [`b955e23`](https://github.com/eea/volto-searchlib/commit/b955e23d0974dc6f241b415768258b1947e17cd2)]
 ### [0.4.22](https://github.com/eea/volto-searchlib/compare/0.4.21...0.4.22) - 10 February 2023
 
 #### :hammer_and_wrench: Others

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-searchlib",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "@eeacms/volto-searchlib: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

searchlib/components/Facets/Facet.jsx

@@ -22,6 +22,9 @@ const FacetContainer = (props) => {
     label,
     view,
     isFilterable = false,
+    onSelect,
+    onChange,
+    onRemove,
     ...rest
   } = props;
   const searchContext = useSearchContext();
@@ -66,12 +69,15 @@ const FacetContainer = (props) => {
       label={label}
       onRemove={(value) => {
         removeFilter(field, value, filterType);
+        onRemove && onRemove(field, value, filterType);
       }}
       onChange={(value) => {
         setFilter(field, value, filterType);
+        onChange && onChange(field, value, filterType);
       }}
       onSelect={(value) => {
         addFilter(field, value, filterType);
+        onSelect && onSelect(field, value, filterType);
       }}
       options={facetValues}
       values={selectedValues}

searchlib/components/Result/ContentClusters.jsx

@@ -13,6 +13,20 @@ const ContentClusters = ({ clusters, item }) => {
   const format = Array.isArray(item.format?.raw)
     ? item.format?.raw
     : [item.format?.raw];
+  const formats_to_show = [];
+  if (format.includes('application/msword')) {
+    formats_to_show.push('DOC');
+  }
+  if (
+    format.includes(
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+  ) {
+    formats_to_show.push('DOCX');
+  }
+  if (format.includes('application/pdf')) {
+    formats_to_show.push('PDF');
+  }
   return Object.entries(displayClusters).map(
     ([clusterName, cluster], index) => {
       // protect against async cluster information not filled in yet
@@ -32,11 +46,9 @@ const ContentClusters = ({ clusters, item }) => {
               </>
             )}
             {index < Object.keys(displayClusters).length - 1 ? ', ' : ''}
-            {format.includes('application/pdf') ? (
-              <span className="pdf-icon">PDF</span>
-            ) : (
-              ''
-            )}
+            {formats_to_show.map((format_to_show) => {
+              return <span className="fileformat-icon">{format_to_show}</span>;
+            })}
           </div>
         </div>
       ) : null;

searchlib/components/Result/HorizontalCardItem.jsx

@@ -61,6 +61,7 @@ const HorizontalCardItem = (props) => {
   const UniversalCard = registry.resolve['UniversalCard'].component;
 
   const item = {
+    '@id': result.href,
     title: (
       <>
         <ExternalLink href={result.href} title={result.title}>

searchlib/components/SearchApp/BasicSearchApp.jsx

@@ -89,6 +89,7 @@ export default function BasicSearchApp(props) {
     paramOnAutocomplete,
     initialState,
     uniqueId,
+    mode,
   });
   // console.log('driver', driverInstance);
 

searchlib/components/SearchApp/FacetApp.jsx

@@ -1,12 +1,15 @@
 /**
  * A Search app that wraps and provides access to a single facet
+ *
+ * Note, unlike BasicSearchApp, this is not a standalone search app,
+ * it needs to be executed in the context of a search app
  */
 import React from 'react';
-import { isEqual } from 'lodash';
-import useDeepCompareEffect from 'use-deep-compare-effect';
+// import { isEqual } from 'lodash';
+// import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { Facet as SUIFacet } from '@eeacms/search/components';
-import { useSearchContext } from '@eeacms/search/lib/hocs'; // , useSearchDriver
+import { useSearchContext, useSearchDriver } from '@eeacms/search/lib/hocs'; // , useSearchDriver
 
 // const sorter = (fa, fb) =>
 //   fa.field === fb.field ? 0 : fa.field < fb.field ? -1 : 0;
@@ -15,7 +18,7 @@ export default function FacetApp(props) {
   const searchContext = useSearchContext();
   const { appConfig, registry, field, onChange, value } = props;
   // const { field, onChange, value } = props;
-  // const driver = useSearchDriver();
+  const driver = useSearchDriver();
   // console.log({ searchContext, props, driver });
   const { filters, removeFilter, addFilter } = searchContext; // driver.state
 
@@ -54,7 +57,7 @@ export default function FacetApp(props) {
   //   }
   // }, [value, filters, field, setFilter, driver]); // searchContext
 
-  const activeValue = filters.find((f) => f.field === field);
+  // const activeValue = filters.find((f) => f.field === field);
 
   // const dirty = !isEqual(activeValue, value);
   // console.log('redraw facet', { value, activeValue, dirty });
@@ -63,15 +66,15 @@ export default function FacetApp(props) {
 
   // const sortedFilters = [...filters].sort(sorter);
 
-  useDeepCompareEffect(() => {
-    timerRef.current && clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      if (!isEqual(activeValue, value)) {
-        // console.log('onchange', { activeValue, value });
-        onChange(activeValue);
-      }
-    }, 200);
-  }, [removeFilter, field, activeValue, value, onChange]);
+  // useDeepCompareEffect(() => {
+  //   timerRef.current && clearTimeout(timerRef.current);
+  //   timerRef.current = setTimeout(() => {
+  //     if (!isEqual(activeValue, value)) {
+  //       console.log('onchange', { activeValue, value });
+  //       onChange(activeValue);
+  //     }
+  //   }, 200);
+  // }, [removeFilter, field, activeValue, value, onChange]);
 
   React.useEffect(
     () => () => {
@@ -125,6 +128,21 @@ export default function FacetApp(props) {
       view={FacetComponent}
       filterType={localFilterType}
       onChangeFilterType={onChangeFilterType}
+      onRemove={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        // console.log('onRemove', JSON.stringify(driver.state.filters));
+      }}
+      onChange={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        // console.log('onChange', JSON.stringify(driver.state.filters));
+      }}
+      onSelect={() => {
+        const filter = driver.state.filters.find((f) => f.field === field);
+        onChange(filter);
+        // console.log('onSelect', JSON.stringify(driver.state.filters));
+      }}
     />
   );
 }

searchlib/components/SearchApp/useSearchApp.js

@@ -46,11 +46,11 @@ export default function useSearchApp(props) {
     paramOnSearch,
     paramOnAutocomplete,
     initialState,
+    mode = 'view',
   } = props;
   // useWhyDidYouUpdate('sss', props);
 
   const appConfig = React.useMemo(() => {
-    // console.log('redo appConfig');
     return {
       ...applyConfigurationSchema(rebind(registry.searchui[appName])),
       appName,
@@ -101,9 +101,21 @@ export default function useSearchApp(props) {
       // we don't want to track the URL if our search app is configured as
       // a simple separate app (for ex. search input or landing page that
       // trampolines to another instance)
-      trackUrlState: appConfig.url ? false : appConfig.trackUrlState,
+      trackUrlState:
+        mode === 'edit'
+          ? false
+          : appConfig.url
+          ? false
+          : appConfig.trackUrlState,
     }),
-    [appConfig, onAutocomplete, onSearch, locationSearchTerm, initialState],
+    [
+      appConfig,
+      onAutocomplete,
+      onSearch,
+      locationSearchTerm,
+      initialState,
+      mode,
+    ],
   );
 
   const { facetOptions } = React.useState(useFacetsWithAllOptions(appConfig));

searchlib/components/SearchView/FilterAsideContentView.jsx

@@ -70,33 +70,37 @@ export const FilterAsideContentView = (props) => {
   const loadingAtom = loadingFamily(appConfig.appName);
   const isLoading = useAtomValue(loadingAtom);
 
+  const { showFilters, showFacets, showClusters, showSorting } = appConfig;
+
   return (
     <>
       {appConfig.mode === 'edit' && (
         <div>Active filters are always shown in edit mode</div>
       )}
-      {(appConfig.showFilters || appConfig.mode === 'edit') && (
-        <ActiveFilterList />
-      )}
-      {appConfig.showFilters && <SectionTabs />}
+      {(showFilters || appConfig.mode === 'edit') && <ActiveFilterList />}
+      {showClusters && <SectionTabs />}
       <div className={`results-layout ${layoutMode}`}>
-        {appConfig.showFilters && (
+        {(showFacets || showSorting) && (
           <div className="above-results">
             <div className="above-left">
-              <DropdownFacetsList />
+              {showFacets && <DropdownFacetsList />}
             </div>
             <div className="above-right">
-              <Component factoryName="SecondaryFacetsList" {...props} />
-              <Sorting
-                label={''}
-                sortOptions={sortOptions}
-                view={SortingDropdownWithLabel}
-              />
-              {/* <ViewSelectorWithLabel */}
-              {/*   views={availableResultViews} */}
-              {/*   active={activeViewId} */}
-              {/*   onSetView={setActiveViewId} */}
-              {/* /> */}
+              {showSorting && (
+                <>
+                  <Component factoryName="SecondaryFacetsList" {...props} />
+                  <Sorting
+                    label={''}
+                    sortOptions={sortOptions}
+                    view={SortingDropdownWithLabel}
+                  />
+                  {/* <ViewSelectorWithLabel */}
+                  {/*   views={availableResultViews} */}
+                  {/*   active={activeViewId} */}
+                  {/*   onSetView={setActiveViewId} */}
+                  {/* /> */}
+                </>
+              )}
             </div>
           </div>
         )}

searchlib/lib/utils.js

@@ -63,6 +63,7 @@ export function applyConfigurationSchema(config) {
       config.disjunctiveFacets.push(facet.field);
     }
   });
+
   return config;
 }
 

searchlib/registry.js

@@ -275,7 +275,12 @@ const config = {
       defaultPromptQueries: [], // offered as possible queries, in a prompt below text input. One per line
       promptQueryInterval: 20000,
       alwaysSearchOnInitialLoad: false, // used in elastic search driver
+
       showFilters: true, // enables the filters interface, to allow falling back to just a simple results list
+      showClusters: true, // enables the tab clusters
+      showSorting: true, // show the sorting controls
+      showFacets: true, // show the facets dropdowns and sidebar facets
+
       getActiveFilters: 'defaultGetActiveFilters',
 
       // highlight: {

src/SearchBlock/SearchBlockView.jsx

@@ -24,7 +24,19 @@ function SearchBlockView(props) {
     path,
   } = props;
   const { appName = 'default' } = data;
-  const blacklist = ['slotFills', 'defaultFilters', 'defaultSort'];
+
+  const schemaFields = [
+    'availableFacets',
+    'defaultFacets',
+    'defaultFilters',
+    'showClusters',
+    'defaultSort',
+    'showFacets',
+    'showFilters',
+    'showSorting',
+  ]; // mutating data in these fields makes the search engine to lose facets
+
+  const blacklist = ['slotFills', ...(mode === 'edit' ? schemaFields : [])];
 
   const stableData = useDebouncedStableData(
     Object.assign(

src/SearchBlock/hocs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isEqual } from 'lodash';
 
-export const useDebouncedStableData = (data, timeout = 100) => {
+export const useDebouncedStableData = (data, timeout = 1000) => {
   const [stableData, setStableData] = React.useState(data);
   const timer = React.useRef();
 

src/SearchBlock/less/searchresult.less

@@ -86,7 +86,7 @@
       margin: 0;
     }
 
-    .pdf-icon {
+    .fileformat-icon {
       display: inline-block;
       padding: 0 3px;
       border: 1px solid @sf-medium-gray;