fix: database search

refactor: select component close #1678
cheminfo · Aug 8, 2022 · c9af976 · c9af976
1 parent ecc091c
commit c9af976
Show file tree

Hide file tree

Showing 14 changed files with 48 additions and 67 deletions.
diff --git a/src/component/elements/Select.tsx b/src/component/elements/Select.tsx
@@ -30,48 +30,46 @@ const styles = {
   `,
 };
 
-export interface SelectEntry {
-  key?: string | number;
-  value: string | number;
-  label: string | number;
-}
-
 export interface SelectProps
   extends Omit<
     React.SelectHTMLAttributes<HTMLSelectElement>,
     'style' | 'onChange'
   > {
-  onChange?: (element: string) => void;
-  data: Array<SelectEntry>;
+  onChange?: (element: any) => void;
+  items: any[];
   defaultValue?: string | number | undefined;
   style?: CSSProperties;
   placeholder?: string;
+  itemValueField?: string;
+  itemTextField?: string;
+  returnValue?: boolean;
 }
 
 const Select = forwardRef(function Select(
   props: SelectProps,
   ref: ForwardedRef<HTMLSelectElement>,
 ) {
   const {
-    data,
+    items,
     style = { width: 100 },
     onChange = () => null,
-    defaultValue = '',
+    defaultValue,
     value,
     name = '',
     className = '',
     placeholder = '',
+    itemValueField = 'value',
+    itemTextField = 'label',
+    returnValue = true,
   } = props;
 
   const handleOnChanged = useCallback(
     (e) => {
-      let value = e.target.value;
-      if (!isNaN(value)) {
-        value = Number(value);
-      }
-      onChange(value);
+      const [option] = e.target.selectedOptions;
+      const selectedData = JSON.parse(option.dataset.value);
+      onChange(returnValue ? selectedData[itemValueField] : selectedData);
     },
-    [onChange],
+    [itemValueField, onChange, returnValue],
   );
 
   return (
@@ -92,9 +90,13 @@ const Select = forwardRef(function Select(
         </option>
       )}
 
-      {data.map((d) => (
-        <option key={`${d.key ? d.key : d.value}`} value={d.value}>
-          {d.label}
+      {items.map((option) => (
+        <option
+          key={JSON.stringify(option)}
+          value={option[itemValueField]}
+          data-value={JSON.stringify(option)}
+        >
+          {option[itemTextField]}
         </option>
       ))}
     </select>

diff --git a/src/component/header/BaseLineCorrectionPanel.tsx b/src/component/header/BaseLineCorrectionPanel.tsx
@@ -39,7 +39,6 @@ const labelStyle = {
 
 const getAlgorithmsList = () => {
   return ['airPLS', 'Polynomial'].map((val) => ({
-    key: val.toLowerCase(),
     label: val,
     value: val.toLowerCase(),
   }));
@@ -155,7 +154,7 @@ function BaseLineCorrectionInnerPanel(
     <HeaderContainer>
       <Label title="Algorithm: " style={labelStyle}>
         <Select
-          data={getAlgorithmsList()}
+          items={getAlgorithmsList()}
           value={algorithm}
           onChange={(val) => setAlgorithm(val)}
         />

diff --git a/src/component/header/ManualPhaseCorrectionPanel.tsx b/src/component/header/ManualPhaseCorrectionPanel.tsx
@@ -42,17 +42,14 @@ const phaseCorrectionTypes = {
 
 const algorithms = [
   {
-    key: phaseCorrectionTypes.manual,
     label: 'Manual',
     value: phaseCorrectionTypes.manual,
   },
   {
-    key: phaseCorrectionTypes.automatic,
     label: 'Automatic',
     value: phaseCorrectionTypes.automatic,
   },
   {
-    key: phaseCorrectionTypes.absolute,
     label: 'Absolute',
     value: phaseCorrectionTypes.absolute,
   },
@@ -175,7 +172,7 @@ export default function ManualPhaseCorrectionPanel() {
     <HeaderContainer>
       <Select
         onChange={onChangeHandler}
-        data={algorithms}
+        items={algorithms}
         defaultValue={phaseCorrectionTypes.manual}
         style={selectStyle}
       />

diff --git a/src/component/header/ZeroFillingOptionsPanel.tsx b/src/component/header/ZeroFillingOptionsPanel.tsx
@@ -85,7 +85,7 @@ function ZeroFillingOptionsPanel() {
     <HeaderContainer>
       <Label title="Size:  " style={{ label: { padding: '0 5px' } }}>
         <Select
-          data={Sizes}
+          items={Sizes}
           style={{ marginLeft: 10, marginRight: 10 }}
           value={size}
           onChange={(value) => setSize(Number(value))}

diff --git a/src/component/modal/AlignSpectraModal.tsx b/src/component/modal/AlignSpectraModal.tsx
@@ -31,7 +31,6 @@ function AlignSpectraModal({
     const list = REFERENCES[nucleus]
       ? Object.entries(REFERENCES[nucleus]).map(
           (item) => ({
-            key: item[0],
             value: item[0],
             label: item[0],
           }),
@@ -95,7 +94,7 @@ function AlignSpectraModal({
             <span className="custom-label">Options :</span>
 
             <Select
-              data={List}
+              items={List}
               style={{ width: 270, height: 30, marginBottom: '20px' }}
               onChange={optionChangeHandler}
             />

diff --git a/src/component/modal/MultipleSpectraFiltersModal/index.tsx b/src/component/modal/MultipleSpectraFiltersModal/index.tsx
@@ -86,7 +86,6 @@ function MultipleSpectraFiltersModal({
     const list = REFERENCES[nucleus]
       ? Object.entries(REFERENCES[nucleus]).map(
           (item) => ({
-            key: item[0],
             value: item[0],
             label: item[0],
           }),
@@ -168,7 +167,7 @@ function MultipleSpectraFiltersModal({
           <span className="custom-label">Filter :</span>
 
           <Select
-            data={List}
+            items={List}
             style={{ width: 275, height: 30, margin: 0 }}
             onChange={filterChangeHandler}
           />

diff --git a/src/component/panels/IntegralsPanel/IntegralTable.tsx b/src/component/panels/IntegralsPanel/IntegralTable.tsx
@@ -86,7 +86,7 @@ function IntegralTable({ activeTab, data }: IntegralTableProps) {
         Cell: ({ row }) => (
           <Select
             onChange={(value) => changeIntegralDataHandler(value, row)}
-            data={SignalKinds}
+            items={SignalKinds}
             style={selectStyle}
             defaultValue={row.original.kind}
           />

diff --git a/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx b/src/component/panels/RangesPanel/TableColumns/ActionsColumn.tsx
@@ -62,7 +62,7 @@ function ActionsColumn({
         <td {...onHoverSignal}>
           <Select
             onChange={changeRangeSignalKind}
-            data={SignalKinds}
+            items={SignalKinds}
             defaultValue={rowData.tableMetaInfo.signal.kind}
             style={selectBoxStyle}
           />

diff --git a/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx b/src/component/panels/SummaryPanel/CorrelationTable/editLink/MoveLink.tsx
@@ -73,7 +73,6 @@ function MoveLink({
           _correlation.atomType === link.atomType[dim]
         ) {
           arr.push({
-            key: _correlation.id,
             value: _correlation.id,
             label: `${_correlation.label.origin}: ${getCorrelationLabel(
               _correlation,
@@ -101,7 +100,7 @@ function MoveLink({
               setSelectedCorrelationIdDim2(selection);
             }
           }}
-          data={selectionData}
+          items={selectionData}
           defaultValue={correlation.id}
           style={{
             width: 110,

diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx
@@ -296,7 +296,6 @@ function SummaryPanel() {
 
     return columnTypes.map((columnType) => {
       return {
-        key: columnType,
         label: columnType,
         value: columnType,
       };
@@ -542,7 +541,7 @@ function SummaryPanel() {
                     setShowProtonsAsRows(false);
                   }
                 }}
-                data={additionalColumnTypes}
+                items={additionalColumnTypes}
                 defaultValue={selectedAdditionalColumnsAtomType}
                 style={{
                   fontSize: '12px',

diff --git a/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx b/src/component/panels/ZonesPanel/TableColumns/ActionsColumn.tsx
@@ -140,7 +140,7 @@ function ActionsColumn({ rowData, rowSpanTags }: ActionsColumnProps) {
           onChange={(value) => {
             changeSignalKindHandler(value);
           }}
-          data={SignalKinds}
+          items={SignalKinds}
           defaultValue={rowData.tableMetaInfo.signal.kind}
           style={selectBoxStyle}
         />

diff --git a/src/component/panels/databasePanel/DatabasePanel.tsx b/src/component/panels/databasePanel/DatabasePanel.tsx
@@ -19,7 +19,7 @@ import { useDispatch } from '../../context/DispatchContext';
 import { usePreferences } from '../../context/PreferencesContext';
 import Button from '../../elements/Button';
 import Input from '../../elements/Input';
-import Select, { SelectEntry } from '../../elements/Select';
+import Select from '../../elements/Select';
 import ToggleButton from '../../elements/ToggleButton';
 import { useAlert } from '../../elements/popup/Alert';
 import { positions, transitions, useModal } from '../../elements/popup/Modal';
@@ -68,12 +68,12 @@ export interface DatabaseInnerProps {
 
 interface ResultEntry {
   data: DatabaseNMREntry[];
-  databases: SelectEntry[];
-  solvents: SelectEntry[];
+  databases: { key: string; value: string }[];
+  solvents: { label: string; value: string }[];
 }
 
 const emptyKeywords = {
-  solvent: '',
+  solvent: '-1',
   searchKeywords: '',
 };
 
@@ -131,12 +131,12 @@ function DatabasePanelInner({
     setTimeout(async () => {
       if (databaseInstance.current) {
         const hideLoading = await alert.showLoading(`Preparing of the Result`);
-
-        if (!solvent && !searchKeywords) {
+        if (solvent === '-1' && !searchKeywords) {
           const data = databaseInstance.current.data;
           const solvents = mapSolventsToSelect(
             databaseInstance.current.getSolvents(),
           );
+
           setResult((prevResult) => ({ ...prevResult, data, solvents }));
         } else {
           const values = [...searchKeywords.split(' ')];
@@ -179,6 +179,7 @@ function DatabasePanelInner({
   const handleChangeDatabase = useCallback(
     (databaseKey) => {
       const database = databases.find((item) => item.key === databaseKey);
+
       setTimeout(async () => {
         if (database?.url) {
           const { url, label } = database;
@@ -210,7 +211,9 @@ function DatabasePanelInner({
           databaseDataRef.current,
           nucleus,
         );
+
         setKeywords({ ...emptyKeywords });
+
         hideLoading();
       }, 0);
     },
@@ -354,16 +357,19 @@ function DatabasePanelInner({
           </ToggleButton>
           <Select
             style={{ flex: 2 }}
-            data={mapDatabasesToSelect(databases)}
+            items={databases}
+            itemTextField="label"
+            itemValueField="key"
             onChange={handleChangeDatabase}
             placeholder="Select database"
             defaultValue={defaultDatabase}
           />
           <Select
             style={{ flex: 1 }}
-            data={result.solvents}
+            items={result.solvents}
             placeholder="Solvent"
             onChange={handleSearch}
+            value={keywords.solvent}
           />
           <Input
             value={keywords.searchKeywords}
@@ -452,19 +458,10 @@ export default function PeaksPanel() {
 function mapSolventsToSelect(solvents: string[]) {
   const result = solvents.map((key) => {
     return {
-      key,
       label: key,
       value: key,
     };
   }, []);
-  result.unshift({ key: '-1', label: 'All', value: '-1' });
+  result.unshift({ label: 'All', value: '-1' });
   return result;
 }
-
-function mapDatabasesToSelect(databases) {
-  return databases.map(({ label, key }) => ({
-    key,
-    value: key,
-    label,
-  }));
-}
diff --git a/src/data/constants/SignalsKinds.ts b/src/data/constants/SignalsKinds.ts
@@ -1,41 +1,33 @@
-export const SignalKinds: { key: string; label: string; value: string }[] = [
+export const SignalKinds: { label: string; value: string }[] = [
   {
-    key: 'signal',
     label: 'Signal',
     value: 'signal',
   },
   {
-    key: 'reference',
     label: 'Reference',
     value: 'reference',
   },
   {
-    key: 'solvent',
     label: 'Solvent',
     value: 'solvent',
   },
   {
-    key: 'impurity',
     label: 'Impurity',
     value: 'impurity',
   },
   {
-    key: 'standard',
     label: 'Standard',
     value: 'standard',
   },
   {
-    key: 'p1',
     label: 'P1',
     value: 'p1',
   },
   {
-    key: 'p2',
     label: 'P2',
     value: 'p2',
   },
   {
-    key: 'p3',
     label: 'P3',
     value: 'p3',
   },

diff --git a/src/data/utilities/generateNumbersPowerOfX.ts b/src/data/utilities/generateNumbersPowerOfX.ts
@@ -4,12 +4,10 @@ export default function generateNumbersPowerOfX(
   options?: { power?: number; format?: (input: number) => string | number },
 ) {
   const { power = 2, format = formatNumber } = options || {};
-  let values: Array<{ key: number; label: string | number; value: number }> =
-    [];
+  let values: Array<{ label: string | number; value: number }> = [];
   for (let i = start; i <= end; i++) {
     const result = power ** i;
     values.push({
-      key: result,
       label: format(result),
       value: result,
     });