[GS-7591] Add new Step Slider component

.changeset/early-lies-share.md

@@ -0,0 +1,7 @@
+---
+'contexture-elasticsearch': minor
+'contexture-client': minor
+'contexture-react': minor
+---
+
+New type Step Slider type added

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["eslint:recommended", "plugin:import/recommended"],
-  "ignorePatterns": ["dist", "node_modules", "*.ts"],
+  "ignorePatterns": ["dist", "node_modules"],
   "parserOptions": {
     "ecmaVersion": "2022",
     "sourceType": "module"
@@ -16,7 +16,7 @@
   "settings": {
     "import/resolver": {
       "typescript": {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".ts", ".tsx", ".js", ".jsx"]
       }
     }
   }

packages/client/src/exampleTypes.js

@@ -187,6 +187,20 @@ export default F.stampKey('type', {
       max: null,
     },
   },
+  step: {
+    label: 'Number Slider',
+    reactors: {
+      range: 'all',
+    },
+    defaults: {
+      field: null,
+      range: [0, 1000],
+      steps: [0, 1000, 5000, 10000, 25000, 50000, 1000000],
+      context: {
+        recordsCount: 0,
+      },
+    },
+  },
   bool: {
     validate: validateValueExistence,
     reactors: {

packages/provider-elasticsearch/src/example-types/filters/step.js

@@ -0,0 +1,53 @@
+import _ from 'lodash/fp.js'
+import { pickSafeNumbers } from '../../utils/futil.js'
+
+const getMinAndMax = (range) => {
+  const min = range[0]
+  const max = range[range.length - 1]
+  return { min, max }
+}
+
+const isValueMaxOnSteps = (value, steps) => {
+  const max = steps[steps.length - 1]
+  return value === max
+}
+
+let filter = ({ field, range, steps }) => {
+  const { min, max } = getMinAndMax(range)
+
+  /** In the last step, we do not filter by the upper bound */
+  if (isValueMaxOnSteps(max, steps)) {
+    return {
+      range: { [field]: pickSafeNumbers({ gte: min }) },
+    }
+  }
+
+  return {
+    range: { [field]: pickSafeNumbers({ gte: min, lte: max }) },
+  }
+}
+
+let buildQuery = (field, range, steps) => {
+  return {
+    aggs: {
+      rangeFilter: {
+        filter: filter({ field, range, steps }),
+      },
+    },
+  }
+}
+
+let result = async (node, search) => {
+  let { field, range, steps } = node
+  const result = await search(buildQuery(field, range, steps))
+  const recordsCount = result.aggregations.rangeFilter.doc_count
+  return { recordsCount }
+}
+
+export default {
+  hasValue: ({ range }) => !_.isEmpty(range),
+  filter,
+  validContext: ({ range }) => !_.isEmpty(range),
+  result,
+  buildQuery,
+}

packages/provider-elasticsearch/src/example-types/filters/step.test.js

@@ -0,0 +1,44 @@
+import step from './step.js'
+
+const { hasValue, filter, buildQuery } = step
+
+describe('step', () => {
+  const input = {
+    type: 'step',
+    field: 'test',
+    range: [0, 500],
+    steps: [0, 500, 1000],
+  }
+
+  it('checks if range is present and not empty', () => {
+    let inputWithoutRange = { type: 'step', field: 'test' }
+    expect(!!hasValue(input)).toBe(true)
+    expect(!!hasValue(inputWithoutRange)).toBe(false)
+  })
+
+  it('returns proper elastic query', () => {
+    let expectedValue = { range: { test: { gte: 0, lte: 500 } } }
+    expect(filter(input)).toEqual(expectedValue)
+  })
+
+  it('removes upper bound when range is last step', () => {
+    const inputWithNewRange = {
+      ...input,
+      range: [0, 1000],
+    }
+    let expectedValue = { range: { test: { gte: 0 } } }
+    expect(filter(inputWithNewRange)).toEqual(expectedValue)
+  })
+
+  it('returns proper elastic DSL', async () => {
+    let expectedDSL = {
+      aggs: {
+        rangeFilter: {
+          filter: { range: { test: { gte: 0, lte: 500 } } },
+        },
+      },
+    }
+    let output = buildQuery(input.field, input.range, input.steps)
+    expect(output).toEqual(expectedDSL)
+  })
+})

packages/provider-elasticsearch/src/example-types/index.js

@@ -11,6 +11,7 @@ import tagsQuery from './filters/tagsQuery.js'
 // Combo Filter + Results
 import facet from './filters/facet.js'
 import number from './filters/number.js'
+import step from './filters/step.js'
 import dateRangeFacet from './filters/dateRangeFacet.js'
 
 // Single Metrics
@@ -48,6 +49,7 @@ export {
   tagsQuery,
   facet,
   number,
+  step,
   dateRangeFacet,
   results,
   stats,

packages/provider-elasticsearch/src/types.test.js

@@ -30,6 +30,7 @@ describe('All Example Types', () => {
       'smartIntervalHistogram',
       'statistical',
       'stats',
+      'step',
       'tagsQuery',
       'tagsQueryGroupStats',
       'tagsText',

packages/react/.storybook/main.js

@@ -50,6 +50,13 @@ export default {
       titlePrefix: 'Live Demos/Index Explorer',
     },
   ],
+  features: { emotionAlias: false },
+  refs: {
+    // https://github.com/storybookjs/storybook/discussions/18821
+    '@chakra-ui/react': {
+      disable: true, // 👈 chakra stories disabled here
+    },
+  },
 }
 
 function getAbsolutePath(value) {

packages/react/.storybook/preview.jsx

@@ -4,6 +4,7 @@ import { base, greyVest } from '../src/themes/index.js'
 import Fonts from '../src/greyVest/Fonts.js'
 import Style from '../src/greyVest/Style.js'
 import { ThemeProvider } from '../src/utils/theme.js'
+import { ChakraProvider } from '@chakra-ui/react'
 
 configure({ enforceActions: 'never', useProxies: 'never' })
 
@@ -19,9 +20,11 @@ export const parameters = {
 export const decorators = [
   (Story) => (
     <ThemeProvider theme={{ ...base, ...greyVest }}>
-      <Fonts />
-      <Style />
-      <Story />
+      <ChakraProvider>
+        <Fonts />
+        <Style />
+        <Story />
+      </ChakraProvider>
     </ThemeProvider>
   ),
 ]

packages/react/babel.config.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  sourceType: 'unambiguous',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          chrome: 100,
+          safari: 15,
+          firefox: 91,
+        },
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [],
+}