Use different value input depending on property type

2 files changed, 138 insertions, 81 deletions

diff --git a/client/js/app/src/app/pages/querybuilder/context/parameters.jsx b/client/js/app/src/app/pages/querybuilder/context/parameters.jsx
index 749dcaade6d..377d60bfcd7 100644
--- a/client/js/app/src/app/pages/querybuilder/context/parameters.jsx
+++ b/client/js/app/src/app/pages/querybuilder/context/parameters.jsx
@@ -12,18 +12,18 @@ export default param('root', [
   param('yql', 'String'),
 
   // Native Execution Parameters
-  param('hits', 'Integer'),
-  param('offset', 'Integer'),
-  param('queryProfile', 'String'),
-  param('groupingSessionCache', 'Boolean'),
-  param('searchChain', 'String'),
-  param('timeout', 'Double'),
-  param('noCache', 'Boolean'),
+  param('hits', 'Integer', { min: 0, default: 10 }),
+  param('offset', 'Integer', { min: 0, default: 0 }),
+  param('queryProfile', 'String', { default: 'default' }),
+  param('groupingSessionCache', 'Boolean', { default: true }),
+  param('searchChain', 'String', { default: 'default' }),
+  param('timeout', 'Float', { min: 0, default: 0.5 }),
+  param('noCache', 'Boolean', { default: false }),
 
   // Query Model
   param('model', [
-    param('defaultIndex', 'String'),
-    param('encoding', 'String'),
+    param('defaultIndex', 'String', { default: 'default' }),
+    param('encoding', 'String', { default: 'utf-8' }),
     param('filter', 'String'),
     param('locale', 'String'),
     param('language', 'String'),
@@ -38,79 +38,82 @@ export default param('root', [
   param('ranking', [
     param('location', 'String'),
     param('features', 'Parent', { children: 'String' }),
-    param('listFeatures', 'Boolean'),
-    param('profile', 'String'),
+    param('listFeatures', 'Boolean', { default: false }),
+    param('profile', 'String', { default: 'default' }),
     param('properties', 'String', { children: 'String' }),
     param('softtimeout', [
-      param('enable', 'Boolean'),
-      param('factor', 'Float'),
+      param('enable', 'Boolean', { default: true }),
+      param('factor', 'Float', { min: 0, max: 1, default: 0.7 }),
     ]),
     param('sorting', 'String'),
     param('freshness', 'String'),
-    param('queryCache', 'Boolean'),
-    param('rerankCount', 'Integer'),
+    param('queryCache', 'Boolean', { default: false }),
+    param('rerankCount', 'Integer', { min: 0 }),
     param('matching', [
-      param('numThreadsPerSearch', 'Integer'),
-      param('minHitsPerThread', 'Integer'),
-      param('numSearchPartitions', 'Integer'),
-      param('termwiseLimit', 'Float'),
-      param('postFilterThreshold', 'Float'),
-      param('approximateThreshold', 'Float'),
+      param('numThreadsPerSearch', 'Integer', { min: 0 }),
+      param('minHitsPerThread', 'Integer', { min: 0 }),
+      param('numSearchPartitions', 'Integer', { min: 0 }),
+      param('termwiseLimit', 'Float', { min: 0, max: 1 }),
+      param('postFilterThreshold', 'Float', { min: 0, max: 1 }),
+      param('approximateThreshold', 'Float', { min: 0, max: 1 }),
     ]),
     param('matchPhase', [
       param('attribute', 'String'),
-      param('maxHits', 'Integer'),
+      param('maxHits', 'Integer', { min: 0 }),
       param('ascending', 'Boolean'),
       param('diversity', [
         param('attribute', 'String'),
-        param('minGroups', 'Integer'),
+        param('minGroups', 'Integer', { min: 0 }),
       ]),
     ]),
   ]),
 
   // Grouping
-  param('collapsesize', 'Integer'),
+  param('collapsesize', 'Integer', { min: 1, default: 1 }),
   param('collapsefield', 'String'),
   param('collapse', [param('summary', 'String')]),
   param('grouping', [
-    param('defaultMaxGroups', 'Integer'),
-    param('defaultMaxHits', 'Integer'),
-    param('globalMaxGroups', 'Integer'),
-    param('defaultPrecisionFactor', 'Float'),
+    param('defaultMaxGroups', 'Integer', { min: -1, default: 10 }),
+    param('defaultMaxHits', 'Integer', { min: -1, default: 10 }),
+    param('globalMaxGroups', 'Integer', { min: -1, default: 10000 }),
+    param('defaultPrecisionFactor', 'Float', { min: 0, default: 2.0 }),
   ]),
 
   // Presentation
   param('presentation', [
-    param('bolding', 'Boolean'),
-    param('format', [param('tensors', 'String')]),
+    param('bolding', 'Boolean', { default: true }),
+    param('format', 'String', { default: 'default' }),
     param('template', 'String'),
     param('summary', 'String'),
-    param('timing', 'Boolean'),
+    param('timing', 'Boolean', { default: false }),
   ]),
 
   // Tracing
   param('trace', [
-    param('level', 'Integer'),
-    param('explainLevel', 'Integer'),
-    param('profileDepth', 'Integer'),
-    param('timestamps', 'Boolean'),
-    param('query', 'Boolean'),
+    param('level', 'Integer', { min: 1 }),
+    param('explainLevel', 'Integer', { min: 1 }),
+    param('profileDepth', 'Integer', { min: 1 }),
+    param('timestamps', 'Boolean', { default: false }),
+    param('query', 'Boolean', { default: true }),
   ]),
 
   // Semantic Rules
-  param('rules', [param('off', 'Boolean'), param('rulebase', 'String')]),
-  param('tracelevel', [param('rules', 'Integer')]),
+  param('rules', [
+    param('off', 'Boolean', { default: true }),
+    param('rulebase', 'String'),
+  ]),
+  param('tracelevel', [param('rules', 'Integer', { min: 0 })]),
 
   // Dispatch
-  param('dispatch', [param('topKProbability', 'Float')]),
+  param('dispatch', [param('topKProbability', 'Float', { min: 0, max: 1 })]),
 
   // Other
   param('recall', 'String'),
   param('user', 'String'),
-  param('hitcountestimate', 'Boolean'),
-  param('metrics', [param('ignore', 'Boolean')]),
-  param('weakAnd', [param('replace', 'Boolean')]),
-  param('wand', [param('hits', 'Integer')]),
+  param('hitcountestimate', 'Boolean', { default: false }),
+  param('metrics', [param('ignore', 'Boolean', { default: false })]),
+  param('weakAnd', [param('replace', 'Boolean', { default: false })]),
+  param('wand', [param('hits', 'Integer', { default: 100 })]),
 
   param('streaming', [
     param('userid', 'Integer'),
diff --git a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
index 668164b54ee..45ebb3bab70 100644
--- a/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-filters/query-filters.jsx
@@ -6,6 +6,7 @@ import {
   Button,
   Box,
   Stack,
+  Switch,
   Badge,
   Group,
 } from '@mantine/core';
@@ -25,47 +26,100 @@ function AddProperty(props) {
   );
 }
 
+function Property({ id, type, types }) {
+  if (types)
+    return (
+      <Select
+        sx={{ flex: 1 }}
+        data={Object.values({ [type.name]: type, ...types }).map(
+          ({ name }) => name
+        )}
+        onChange={(type) => dispatch(ACTION.INPUT_UPDATE, { id, type })}
+        value={type.name}
+        searchable
+      />
+    );
+
+  return (
+    <TextInput
+      sx={{ flex: 1 }}
+      onChange={(event) =>
+        dispatch(ACTION.INPUT_UPDATE, {
+          id,
+          type: event.currentTarget.value,
+        })
+      }
+      placeholder="String"
+      value={type.name}
+    />
+  );
+}
+
+function Value({ id, type, value }) {
+  if (type.children) return null;
+
+  if (type.type === 'Boolean')
+    return (
+      <Switch
+        sx={{ flex: 1 }}
+        onLabel="true"
+        offLabel="false"
+        size="xl"
+        checked={value === 'true'}
+        onChange={(event) =>
+          dispatch(ACTION.INPUT_UPDATE, {
+            id,
+            value: event.currentTarget.checked.toString(),
+          })
+        }
+      />
+    );
+
+  const props = { value, placeholder: type.type };
+  if (type.type === 'Integer' || type.type === 'Float') {
+    props.type = 'number';
+    let range;
+    if (type.min != null) {
+      props.min = type.min;
+      range = `[${props.min}, `;
+    } else range = '(-∞, ';
+    if (type.max != null) {
+      props.max = type.max;
+      range += props.max + ']';
+    } else range += '∞)';
+    props.placeholder += ` in ${range}`;
+
+    if (type.type === 'Float' && type.min != null && type.max != null)
+      props.step = (type.max - type.min) / 100;
+
+    if (parseFloat(value) < type.min || parseFloat(value) > type.max)
+      props.error = `Must be within ${range}`;
+  }
+
+  return (
+    <TextInput
+      sx={{ flex: 1 }}
+      onChange={(event) =>
+        dispatch(ACTION.INPUT_UPDATE, {
+          id,
+          value: event.currentTarget.value,
+        })
+      }
+      {...props}
+    />
+  );
+}
+
 function Input({ id, value, types, type }) {
   return (
     <>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-        {types ? (
-          <Select
-            sx={{ flex: 1 }}
-            data={Object.values({ [type.name]: type, ...types }).map(
-              ({ name }) => name
-            )}
-            onChange={(type) => dispatch(ACTION.INPUT_UPDATE, { id, type })}
-            value={type.name}
-            searchable
-          />
-        ) : (
-          <TextInput
-            sx={{ flex: 1 }}
-            onChange={(event) =>
-              dispatch(ACTION.INPUT_UPDATE, {
-                id,
-                type: event.currentTarget.value,
-              })
-            }
-            placeholder="String"
-            value={type.name}
-          />
-        )}
-        {!type.children && (
-          <TextInput
-            sx={{ flex: 1 }}
-            onChange={(event) =>
-              dispatch(ACTION.INPUT_UPDATE, {
-                id,
-                value: event.currentTarget.value,
-              })
-            }
-            placeholder={type.type}
-            value={value}
-          />
-        )}
-        <ActionIcon onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}>
+      <Box sx={{ display: 'flex', gap: '5px' }}>
+        <Property {...{ id, type, types }} />
+        <Value {...{ id, type, value }} />
+        <ActionIcon
+          sx={{ marginTop: 5 }}
+          onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}
+        >
           <Icon name="circle-minus" />
         </ActionIcon>
       </Box>