ssome adjustments to the components and correction when consuming the…

… pipelines api

frontend/components/NNeighbors.js

@@ -2,27 +2,17 @@ import React, { useState, useEffect } from 'react'
 import TextField from '@mui/material/TextField'
 import PropTypes from 'prop-types'
 
-const NNeighbors = ({ nNeighbors, onChange, reset }) => {
-  const formatNNeighbors = value => {
-    if (/^\d*\.?\d*$/.test(value)) {
-      return value
-    } else {
-      return value.replace(/[^\d.]/g, '')
-    }
-  }
-
-  const [localNNeighbors, setLocalNNeighbors] = useState(
-    formatNNeighbors(nNeighbors)
-  )
+const NNeighbors = ({ nNeighbors, onChange }) => {
+  const [localNNeighbors, setLocalNNeighbors] = useState(nNeighbors)
 
   useEffect(() => {
-    setLocalNNeighbors(formatNNeighbors(nNeighbors))
-  }, [reset, nNeighbors])
+    setLocalNNeighbors(nNeighbors)
+  }, [nNeighbors])
 
   const handleNeighborsChange = event => {
-    const inputValue = formatNNeighbors(event.target.value)
-    const newValue = Math.min(parseFloat(inputValue) || 0, 90)
-    setLocalNNeighbors(inputValue)
+    const inputValue = event.target.value.replace(/[^\d]/g, '')
+    const newValue = parseInt(inputValue, 10) || 1
+    setLocalNNeighbors(newValue)
     onChange(newValue)
   }
 
@@ -32,15 +22,15 @@ const NNeighbors = ({ nNeighbors, onChange, reset }) => {
       variant="outlined"
       value={localNNeighbors}
       onChange={handleNeighborsChange}
-      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*\\.?[0-9]*' }}
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', min: 1, step: 1 }}
     />
   )
 }
 
 NNeighbors.propTypes = {
-  nNeighbors: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func.isRequired,
-  reset: PropTypes.bool
+  nNeighbors: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    .isRequired,
+  onChange: PropTypes.func.isRequired
 }
 
 export default NNeighbors

frontend/components/SearchRadius.js

@@ -1,46 +1,27 @@
-import React, { useState, useEffect } from 'react'
-import TextField from '@mui/material/TextField'
+import React from 'react'
 import PropTypes from 'prop-types'
+import TextField from '@mui/material/TextField'
 
-const SearchRadius = ({ searchRadius, onChange, reset }) => {
-  const formatSearchRadius = value => {
-    if (/^\d*\.?\d*$/.test(value)) {
-      return value
-    } else {
-      return value.replace(/[^\d.]/g, '')
-    }
-  }
-
-  const [localSearchRadius, setLocalSearchRadius] = useState(
-    formatSearchRadius(searchRadius)
-  )
-
-  useEffect(() => {
-    setLocalSearchRadius(formatSearchRadius(searchRadius))
-  }, [reset, searchRadius])
+function SearchRadius({ searchRadius, onChange }) {
+  const formattedRadius = searchRadius.toFixed(1)
 
   const handleRadiusChange = event => {
-    const inputValue = formatSearchRadius(event.target.value)
-    const newValue = Math.min(parseFloat(inputValue) || 0, 90)
-    setLocalSearchRadius(inputValue)
-    onChange(newValue)
+    onChange(parseFloat(event.target.value))
   }
 
   return (
     <TextField
-      id="searchRadius"
-      variant="outlined"
-      value={localSearchRadius}
+      type="number"
+      value={formattedRadius}
       onChange={handleRadiusChange}
-      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*\\.?[0-9]*' }}
+      inputProps={{ min: 0, max: 90, step: 0.1 }}
     />
   )
 }
 
 SearchRadius.propTypes = {
-  searchRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onChange: PropTypes.func.isRequired,
-  reset: PropTypes.bool
+  searchRadius: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired
 }
 
 export default SearchRadius

frontend/components/TsmData.js

@@ -1,41 +1,17 @@
-import { Alert, Box } from '@mui/material'
+import Alert from '@mui/material/Alert'
+import Radio from '@mui/material/Radio'
+import Box from '@mui/material/Box'
 import { DataGrid } from '@mui/x-data-grid'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { useQuery } from 'react-query'
 import moment from 'moment'
 import { getProducts } from '../services/product'
 
-const columns = [
-  {
-    field: 'display_name',
-    headerName: 'Name',
-    sortable: true,
-    flex: 1
-  },
-  {
-    field: 'uploaded_by',
-    headerName: 'Uploaded By',
-    flex: 1,
-    sortable: false
-  },
-  {
-    field: 'created_at',
-    headerName: 'Created at',
-    sortable: true,
-    width: 200,
-    valueFormatter: params => {
-      if (!params.value) {
-        return ''
-      }
-      return moment(params.value).format('YYYY-MM-DD')
-    }
-  }
-]
-
-export default function DataTableWrapper({ filters, query }) {
+const DataTableWrapper = ({ filters, query }) => {
   const [page, setPage] = React.useState(0)
   const [pageSize, setPageSize] = React.useState(10)
+  const [selectedRowId, setSelectedRowId] = React.useState(null)
 
   const { data, error, isLoading } = useQuery(
     ['productData', { filters, query, page, pageSize }],
@@ -63,6 +39,44 @@ export default function DataTableWrapper({ filters, query }) {
       product => product.product_type_name === 'Spec-z Catalog'
     ) || []
 
+  const columns = [
+    {
+      field: 'select',
+      headerName: '',
+      renderCell: params => (
+        <Radio
+          checked={selectedRowId === params.row.id}
+          onChange={() => setSelectedRowId(params.row.id)}
+        />
+      ),
+      width: 50
+    },
+    {
+      field: 'display_name',
+      headerName: 'Name',
+      sortable: true,
+      flex: 1
+    },
+    {
+      field: 'uploaded_by',
+      headerName: 'Uploaded By',
+      flex: 1,
+      sortable: false
+    },
+    {
+      field: 'created_at',
+      headerName: 'Created at',
+      sortable: true,
+      width: 200,
+      valueFormatter: params => {
+        if (!params.value) {
+          return ''
+        }
+        return moment(params.value).format('YYYY-MM-DD')
+      }
+    }
+  ]
+
   return (
     <>
       <Box sx={{ height: 400, width: '100%' }}>
@@ -82,6 +96,7 @@ export default function DataTableWrapper({ filters, query }) {
           localeText={{
             noRowsLabel: isLoading ? 'Loading...' : 'No products found'
           }}
+          onRowClick={params => setSelectedRowId(params.row.id)}
         />
       </Box>
       <Box
@@ -107,3 +122,5 @@ DataTableWrapper.defaultProps = {
   filters: {},
   query: ''
 }
+
+export default DataTableWrapper