Sorting Selector + Improvements to ComboBox (#784)

* WIP for sorting * eslint * add sortBy filtering to resolvers * prettier update * WIP * update next example with sorting selector * fix eslint errors * do not fix node version * do not run lib tests * add sortBy tests on searchkit/client * exclude transpiled tests * update SortingSelector component * fix ComboBox component * fix issue with HitsResolver page on ES 6.x * update packages * update readme for searchkit/client * SortingOption defaultOption to be optional * build before testing * adding documentation for sorting * rename stage to reflect activity * update documentation * feature (#784): Sorting * update yarn lock Co-authored-by: Joseph McElroy <joe@josephs-air.lan>
searchkit · Dec 1, 2020 · 7f32920 · 7f32920 · github-actions · Dec 1, 2020
1 parent cfb8ce2
commit 7f32920
Show file tree

Hide file tree

Showing 51 changed files with 1,227 additions and 225 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -42,6 +42,7 @@
     ],
     "dot-notation":"error",
     "import/namespace": "off",
+    "import/no-cycle": "off",
     "import/order": [
       "error",
       {

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -7,5 +7,7 @@ jobs:
     - uses: actions/checkout@v2
     - name: Install modules
       run: yarn
+    - name: Build Packages
+      run: yarn build
     - name: Run tests
       run: yarn test
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -14,7 +14,6 @@
                  "--runInBand", "--forceExit", "--detectOpenHandles", "--watch"
             ],
             "cwd": "${workspaceRoot}/packages/searchkit-apollo-resolvers",
-            "runtimeVersion": "12.8.0",
             "preLaunchTask": null,
             "runtimeExecutable": null,
             "env": {
@@ -34,7 +33,6 @@
                  "--runInBand", "--forceExit", "--detectOpenHandles", "--watch"
             ],
             "cwd": "${workspaceRoot}/packages/searchkit-elastic-ui",
-            "runtimeVersion": "12.8.0",
             "preLaunchTask": null,
             "runtimeExecutable": null,
             "env": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-canary.14](https://github.com/searchkit/searchkit/compare/v3.0.0-canary.12...v3.0.0-canary.14) (2020-12-01)
+
+
+### Bug Fixes
+
+* link ([#783](https://github.com/searchkit/searchkit/issues/783)) ([55f6f6f](https://github.com/searchkit/searchkit/commit/55f6f6f541f274f4c9249da63f98088be3f6ba4e))
+
+
+
+
+
 # [3.0.0-canary.13](https://github.com/searchkit/searchkit/compare/v3.0.0-canary.12...v3.0.0-canary.13) (2020-11-18)
 
 **Note:** Version bump only for package searchkit

diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
diff --git a/docs/docs/searchkit-apollo-resolvers.md b/docs/docs/searchkit-apollo-resolvers.md
@@ -46,6 +46,76 @@ Query will be applied to results & facets
 | :------------- | :----------- |
 | fields          | fields to be queried. See elasticsearch documentation for more information on options  |
 
+## Sorting
+```javascript
+const searchkitConfig = {
+  sortOptions: [
+    { id: 'relevance', label: 'Relevance', field: '_score' },
+    { id: 'released', label: 'Recent Releases', field: { released: 'desc' } },
+    { id: 'multiple_sort', label: 'Multiple sort', field: [
+      { "post_date" : {"order" : "asc"}},
+      "user",
+      { "name" : "desc" },
+      { "age" : "desc" },
+      "_score"
+    ]},
+  ]
+}
+```
+
+Within SearchkitConfig, declare all the available sorting options that you want your search to support, each with a unique id. Above is an example of how sorting option fields can be declared. Field is provided to elasticsearch so supports all the options that elasticsearch supports. See [Elasticsearch sorting options](https://www.elastic.co/guide/en/elasticsearch/reference/7.x/sort-search-results.html) for available options.
+
+#### GraphQL Query Example
+Once configured, you are able to:
+1. query available sort options via `sortOptions` within the summary node
+2. sortedBy will tell you the current sort option for hits 
+
+```gql
+query {
+  results(query: "") {
+    summary {
+      total
+      sortOptions {
+        id
+        label
+      }
+    }
+    hits(sortBy: "relevance") {
+      sortedBy  <--- the current sortId
+    }
+  }
+}
+
+
+```
+
+then you will be able to specify how you want hits to be sorted by within the hits node using the id
+
+```gql
+{
+  results(query: "bla") {
+    hits(sortBy: "relevance") {
+      sortedBy
+      items {
+        id
+        fields {
+          writers
+          actors
+        }
+      }
+    }
+  }
+}
+```
+
+#### Options
+| Option        | Description      |
+| :------------- | :----------- |
+| id          | Unique id. Used to specify what to sort by  |
+| label          | label to be displayed in frontend  |
+
+
+
 ## Facets
 Facets are configured together on the Searchkit Config within the facets array. Each facet can support a range of experiences from a simple list to date filtering
 

diff --git a/docs/docs/searchkit-client.md b/docs/docs/searchkit-client.md
@@ -80,6 +80,9 @@ Adds filter to applied filters
 #### toggleFilter(filter: Filter): void
 If the filter already exists in applied filters then it will remove the filter. If doesn't exist, will add the filter
 
+#### setSortBy(id: string): void
+Set sorting id. Sort field is returned in the query variables
+
 ## withSeachkit HOC
 Wraps component with Searchkit Provider with an instantiated SearchkitClient. Useful for NextJS Pages. 
 
@@ -102,7 +105,7 @@ Provides to child components access to the shared SearchkitClient instance
 ### Usage
 
 ```javascript
-  import { SearchkitClient, SearchkitProvider } from '@searchkit/client
+  import { SearchkitClient, SearchkitProvider } from '@searchkit/client'
 
   const client = new SearchkitClient()
 
@@ -152,7 +155,7 @@ Query contains all data requirements needed to power the search.
 import { useSearchkitQuery } from '@searchkit/client'
 
 const query = gql`
-  query resultSet($query: String, $filters: [FiltersSet], $page: PageInput) {
+  query resultSet($query: String, $filters: [FiltersSet], $page: PageInput, $sortBy: String) {
     results(query: $query, filters: $filters) {
       hits(page: $page) {
         items {
@@ -175,4 +178,4 @@ const Index = () => {
 ### Options
 | Option        | Description      |
 | :------------- | :----------- |
-| query          | GQL query that has query, filters and page variables |
+| query          | GQL query that has query, filters, sorting & page variables |
diff --git a/docs/docs/searchkit-elastic-ui.md b/docs/docs/searchkit-elastic-ui.md
@@ -163,6 +163,47 @@ import {
 | :------------- | :----------- |
 | data          | Boolean. Loading value from GQL query   |
 
+### Sorting Selector
+Pagination.mov
+
+#### Usage
+Requires sorting configuration within the resolvers. See [sorting documentation](/docs/reference/apollo-resolvers#sorting).
+
+```javascipt
+import {
+  SortingSelector
+} from '@searchkit/elastic-ui'
+```
+
+```javascript
+  <SortingSelector data={data?.results} loading={loading} />
+```
+
+### GraphQL Query
+Relies on GraphQL query
+
+```
+  results(query: "") {
+    summary {
+      total
+      sortOptions {  <--- Required: sortOptions
+        id
+        label
+      }
+    }
+    hits(sortBy: "relevance") {
+      sortedBy  <--- Required: the current sortId
+    }
+  }
+
+```
+
+#### Options
+| Option        | Description      |
+| :------------- | :----------- |
+| data          | data response from graphql request   |
+| loading          | Boolean.   |
+
 ## Facets
 
 ### FacetsList

diff --git a/examples/next/components/index.jsx b/examples/next/components/index.jsx
@@ -1,16 +1,16 @@
 import { useSearchkitQuery } from '@searchkit/client'
 import { gql } from '@apollo/client'
+import { useState } from 'react'
 import { HitsList, HitsGrid } from './searchkit/Hits'
 import {
   FacetsList,
   SearchBar,
   Pagination,
   ResetSearchButton,
-  SelectedFilters
+  SelectedFilters,
+  SortingSelector
 } from '@searchkit/elastic-ui'
 
-import React, { useState } from 'react'
-
 import {
   EuiPage,
   EuiPageBody,
@@ -24,11 +24,12 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   EuiButtonGroup,
-  EuiFlexGroup
+  EuiFlexGroup,
+  EuiFlexItem
 } from '@elastic/eui'
 
 const query = gql`
-  query resultSet($query: String, $filters: [FiltersSet], $page: PageInput) {
+  query resultSet($query: String, $filters: [FiltersSet], $page: PageInput, $sortBy: String) {
     results(query: $query, filters: $filters) {
       summary {
         total
@@ -37,16 +38,21 @@ const query = gql`
           label
           value
         }
+        sortOptions {
+          id
+          label
+        }
         query
       }
-      hits(page: $page) {
+      hits(page: $page, sortBy: $sortBy) {
         page {
           total
           totalPages
           pageNumber
           from
           size
         }
+        sortedBy
         items {
           id
           fields {
@@ -103,20 +109,28 @@ const Page = () => {
               </EuiTitle>
             </EuiPageContentHeaderSection>
             <EuiPageContentHeaderSection>
-              <EuiButtonGroup
-                options={[
-                  {
-                    id: `grid`,
-                    label: 'Grid'
-                  },
-                  {
-                    id: `list`,
-                    label: 'List'
-                  }
-                ]}
-                idSelected={viewType}
-                onChange={(id) => setViewType(id)}
-              />
+              <EuiFlexGroup>
+                <EuiFlexItem grow={1}>
+                  <SortingSelector data={data?.results} loading={loading} />
+                </EuiFlexItem>
+                <EuiFlexItem grow={2}>
+                <EuiButtonGroup
+                  legend=""
+                  options={[
+                    {
+                      id: `grid`,
+                      label: 'Grid'
+                    },
+                    {
+                      id: `list`,
+                      label: 'List'
+                    }
+                  ]}
+                  idSelected={viewType}
+                  onChange={(id) => setViewType(id)}
+                />
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiPageContentHeaderSection>
           </EuiPageContentHeader>
           <EuiPageContentBody>

diff --git a/examples/next/pages/api/graphql.js b/examples/next/pages/api/graphql.js
@@ -16,6 +16,10 @@ const searchkitConfig = {
   hits: {
     fields: ['title', 'actors', 'writers', 'plot', 'poster']
   },
+  sortOptions: [
+    { id: 'relevance', label: "Relevance", field: [{"_score": "desc"}], defaultOption: true},
+    { id: 'released', label: "Released", field: [{"released": "desc"}]},    
+  ],
   query: new MultiMatchQuery({ fields: ['actors', 'writers', 'title^4', 'plot'] }),
   facets: [
     new RefinementSelectFacet({ field: 'type.raw', id: 'type', label: 'Type' }),

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "3.0.0-canary.13",
+  "version": "3.0.0-canary.14",
   "includeMergedTags": true,
   "command": {
     "publish": {