searchkit / searchkit Goto Github PK

• disabled if no selected filters or query string
• disregard defaultQueries
• disregard sorting selection

we need to add utility to shallowCompare objects and ignore functions except from /component^/i

and provide annotation helpers, perhaps a React.Component subclass too

• shallowCompare utils
• annotation/decorator
• class based
• unit tests
• use where appropriate

• Selecting filters from as you type menu
• Quick jump view Hits

Functional Components overrides for components:

• RefinementListFilter #59
• MenuFilter #61
• Hits #58
• SelectedFilters #60

• Error states for Hits if error response
• timeout states

Searches usually let you select the number of hits per page. This doesn't need to be a specific SearchKit component as it can be done directly in the app, but an example would be nice.

Most of the time the results displayed only use a few of the source's fields. Specifying _source filter would allow to save bandwidth and could speed up the search.

Relevant ES page : https://www.elastic.co/guide/en/elasticsearch/reference/2.0/search-request-source-filtering.html

When PageSizeAccessor appears after the PaginationAccessor, the latter will pick up 20 as the page size (because it's 0 before PageSizeAccessor steps in) instead of what's specified in PageSizeAccessor.

In Chrome console, at stack trace:

PaginationAccessor.buildOwnQuery (PaginationAccessor.js:20)
(anonymous function) (Searcher.js:30)
arrayReduce (index.js:1450)
(anonymous function) (index.js:3445)
Searcher.buildQuery (Searcher.js:29)
(anonymous function) (SearcherCollection.js:40)
arrayEach (index.js:1289)
(anonymous function) (index.js:3345)
SearcherCollection.buildQuery (SearcherCollection.js:40)
SearchkitManager.buildQuery (SearchkitManager.js:55)
SearchkitManager._search (SearchkitManager.js:97)
SearchkitManager.performSearch (SearchkitManager.js:85)
Pagination.setPage (Pagination.js:48)
React.cloneElement.onMouseDown (FastClick.js:17)
ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:71)
executeDispatch (EventPluginUtils.js:79)
executeDispatchesInOrder (EventPluginUtils.js:102)
executeDispatchesAndRelease (EventPluginHub.js:43)
executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
forEachAccumulated (forEachAccumulated.js:23)
EventPluginHub.processEventQueue (EventPluginHub.js:259)
runEventQueueInBatch (ReactEventEmitterMixin.js:18)
ReactEventEmitterMixin.handleTopLevel (ReactEventEmitterMixin.js:34)
handleTopLevelWithoutPath (ReactEventListener.js:93)
handleTopLevelImpl (ReactEventListener.js:73)
Mixin.perform (Transaction.js:136)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:62)
batchedUpdates (ReactUpdates.js:94)
ReactEventListener.dispatchEvent (ReactEventListener.js:204)

> this.accessors
> [SearchAccessor, SortingAccessor, FacetAccessor, FacetAccessor, FacetAccessor, FacetAccessor, NumericOptionsAccessor, FacetAccessor, PaginationAccessor, PageSizeAccessor]

and also at that point

> _.reduce(this.accessors, function(query, accessor) { console.log('query page size', query.query.size);return accessor.buildOwnQuery(query);}, query)

gives:

(10 times) query page size 0

• An option within searchkitManager to not search immediately
• Will only render results from ES once the user is querying (via searchbox for example
• initial loading view is shown instead

• stop committing the lib folder
• add to .gitignore, remove from .npmignore

Maybe something like this would be enough?

this.cache = {}

if (this.cache[query] !== undefined)
  return this.cache[query]

this.cache[query] = response

• Being able to switch between different hits rendering (Grid, List etc)

• Hits functional component
• Unit tests
• Documentation

• MenuFilter functional component
• Unit tests
• Documentation of component

I haven't tried fooling around with date fields and the current filters, but date field support could make sense in :

• Menu (with the possibilité to set the format and filter on just year, or year/month, etc.)
• Hierarchical Menu (year, then month, etc.)
• Range Filter

Other possibilities include having a small calendar to pick a date, or 2 to pick a range.

• allow Searchbox to have configurable thottle time, with default of 200ms
• unit tests
• documentation

• RefinementListFilter functional component
• Unit tests
• Documentation of component
• Documentation of design pattern

Currently Hits component is responsible for initialView ( view shown when no response have been returned from ES yet )

Should be in its own component like NoHits component.

• InitialLoading Component
• Unit tests
• documentation

Hi there

First of all thnx for this awesome component!

I still have a few questions that i can't figure out :(
How can i build own custom queries in my React components? For ex. (minified query)

{
  "query": {
    "filtered": {
      "query": {
        "match": {
          "language": "nl-BE"
        }
      },
      "filter": {
        "and": [
          {
            "geo_distance": {
              "distance": "25km",
              ...
            }
          }
        ]
      }
    }
  },
  "sort": [
    {
      "_geo_distance": {
      }
    }
  ]
}

I'm currently looking at the "ImmutableQuery" object that i then assign the the "SearchkitManager" but without any results.

Thnx in advance!

A reusable FilterItem component to be used with RefineminementFilter, Hierarchical, Nested etc

• use typings for dependency ts definition files

Hi,

could pls. provide an example how to sort results by timestamp from a query in a SearchBox?

Thx.
Stefan

A component that wraps filter components and shows only when the conditional is satisfied:

 <ShowWhenSelected filterId="type" value="Documents">
   <RefinementFilter ... />
</ShowWhenSelected>

Is Solr support planned?

• InfiniteScroll Accessor for hits

The current FacetAccessor passes the same key to build a TermsBucket : TermsBucket(this.key, this.key, ...)
This doesn't allow to have multiple facets using the same field as they'll all share the same bucket key and collide.

An optional aggId option (please find a suitable name...) could be used to allow multiple facets on the same field.

Aggregators can also be sorted on _term rather than _count : https://www.elastic.co/guide/en/elasticsearch/guide/current/_intrinsic_sorts.html
API suggestion : <RefinementListFilter ... sort="count|term|key" sortOrder="asc|desc" />

The current code uses window.scrollTo(0,0), but the demo has a scrolling layout__results.
A "scrollResultsToTop" event should probably be triggered to let the corresponding component react to it.

Other facets disappear when they have no contents. NumericRefinementListFilter still displays the facet's title. Can be seen in the demo, the "Length" title is displayed while loading the results.

Requires adding a disabled css state link in RefinementListFilter

• Show pages as options to select from
• Unit tests
• Documentation

Sometimes you want the user to be able to put specific values easily, having inputs helps :

This could be a showInputs attribute on RangeFilter and/or NumericRefinementList, but it could also be a nice to have a standalone RangeInputFilter, I guess.

When moving around the slider in RangeFilter and releasing the slider at the same position it previously was, a new search request is launched.

It opens a Medium 404 page. Probably something to do with your security certificate.

A filter where there is searched on a range around a postal code. (10km, 50km, 100km, ...)
We have lat & long float's that can be searched with a Maps API.

https://developers.google.com/maps/documentation/distance-matrix/intro

• Being able to skin to various themes (material, minimal)
• Clean up component styles, only basic level layout
• Better basic default layout

Hi,

I really like how searchkit works, but right now i have some REST api of products that i would like to make a front with searchkit but ElasticSearch is not an option for me.

It can be decoupled from ElasticSearch? or at least "intercept" with some proxy the calls to ElasticSearch to another component that has the Data?

Thanks

• have a modifier "is-out-of-bounds" class

• SelectedFilters functional component
• Unit tests
• Documentation

Is it possible that propType gets added to e.g. https://github.com/searchkit/searchkit/blob/master/src/core/react/SearchkitProvider.tsx?

I am getting an error while using that component saying that render returns a non react component. And it turns out that I put more than one <div> under SearchkitProvider as children. This would've been caught easily by especifying that props.children is of instance of react Component.

• Allow interval to be passed as a prop
• pass interval as step
• Optional prop
• documentation

Similar to what airbnb has

The accessor is added to searchkit on componentWillMount but isn't removed on componentWillUnmount. This prevents from having "dynamic" filter lists with simple/advanced modes that disable/enable filters.

Similar to bootstrap's pager, if the pagination buttons were links, you could right-click the link to open the new page in another tab.

If range value min/max equals component min/max then remove filter if applied

When SearchBox's onChange method is called, the following code is used to generate a new search :

            throttle(()=> {
                this.searchQuery(this.accessor.getQueryString())
            }, 400)()

A new throttled searchQuery function is generated each time, so they just stack up without waiting for the 400ms delay. The throttle function should be created in the constructor or in componentWillMount and reused for every call.

Is it possible to create a UI similar to react-redux-test demo where filters can be added based on predefined keywords.

For example,
if the following 3 keywords are defined for searching,

1. Age
2. Location
3. Price

The user will be able to add a new filter below the main search box.

Also, it should support range input for fields like age, price (number field), (ability to show custom input types) when a new filter is added.