From 28e70a8eb1cea381943b38eed9d7a2d56e37f183 Mon Sep 17 00:00:00 2001
From: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:49:51 +0100
Subject: [PATCH] refactor: display a message when no options in the filter
 (#3292)

* refactor: display a message when no options

* refactor: empty text component
---
 src/component/elements/EmptyText.tsx          | 32 +++++++++++++++
 src/component/hooks/useFilter.ts              |  2 +-
 .../OnLoadProcessingTabContent.tsx            |  2 +-
 .../panels/IntegralsPanel/IntegralTable.tsx   |  6 +--
 .../panels/PeaksPanel/PeaksTable.tsx          |  6 +--
 .../panels/RangesPanel/RangesTable.tsx        |  6 +--
 .../panels/ZonesPanel/ZonesTable.tsx          | 14 +++----
 .../panels/databasePanel/DatabasePanel.tsx    |  4 +-
 .../panels/extra/placeholder/NoDataForFid.tsx |  6 +--
 .../panels/extra/placeholder/NoTableData.tsx  | 26 ------------
 .../Filters/FiltersSectionsPanel.tsx          | 40 +++++--------------
 .../MultipleSpectraAnalysisTable.tsx          |  4 +-
 src/data/getFilterLabel.ts                    |  1 +
 13 files changed, 67 insertions(+), 82 deletions(-)
 create mode 100644 src/component/elements/EmptyText.tsx
 delete mode 100644 src/component/panels/extra/placeholder/NoTableData.tsx

diff --git a/src/component/elements/EmptyText.tsx b/src/component/elements/EmptyText.tsx
new file mode 100644
index 000000000..61036fda6
--- /dev/null
+++ b/src/component/elements/EmptyText.tsx
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+import type { CSSProperties } from 'react';
+import { FaRegEyeSlash } from 'react-icons/fa';
+
+const EmptyContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  color: #6a6a6a;
+  padding: 1.5rem 0;
+`;
+
+const Icon = styled(FaRegEyeSlash)`
+  margin: 0 10px;
+  font-size: 1.1rem;
+`;
+const Text = styled.span`
+  font-size: 0.8rem;
+`;
+interface EmptyTextProps {
+  text: string;
+  style?: { text?: CSSProperties; icon?: CSSProperties };
+}
+
+export function EmptyText(props: EmptyTextProps) {
+  const { text, style = { text: {}, icon: {} } } = props;
+  return (
+    <EmptyContainer>
+      <Icon style={style.icon} />
+      <Text style={style.text}>{text}</Text>
+    </EmptyContainer>
+  );
+}
diff --git a/src/component/hooks/useFilter.ts b/src/component/hooks/useFilter.ts
index 234cf1ffc..8234370d2 100644
--- a/src/component/hooks/useFilter.ts
+++ b/src/component/hooks/useFilter.ts
@@ -2,10 +2,10 @@ import type { Spectrum1D, Spectrum2D } from 'nmr-load-save';
 import type { Filter1DEntry, Filter2DEntry } from 'nmr-processing';
 import { useMemo } from 'react';
 
+import type { ExtractFilterEntry } from '../../data/types/common/ExtractFilterEntry.js';
 import type { FilterEntry } from '../../data/types/common/FilterEntry.js';
 
 import useSpectrum from './useSpectrum.js';
-import type { ExtractFilterEntry } from '../../data/types/common/ExtractFilterEntry.js';
 
 const emptyData = { filters: {} };
 type FilterReturnType<T> = T extends Filter1DEntry['name']
diff --git a/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx b/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
index 87f06c0e4..d375a6f7c 100644
--- a/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
+++ b/src/component/modal/setting/settings-tabs/OnLoadProcessingTabContent.tsx
@@ -5,12 +5,12 @@ import type {
 } from 'nmr-load-save';
 import { useFormContext } from 'react-hook-form';
 
+import { getFilterLabel } from '../../../../data/getFilterLabel.js';
 import IsotopesViewer from '../../../elements/IsotopesViewer.js';
 import Label from '../../../elements/Label.js';
 import ReactTable from '../../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../../elements/ReactTable/utility/addCustomColumn.js';
 import type { WorkspaceWithSource } from '../../../reducer/preferences/preferencesReducer.js';
-import { getFilterLabel } from '../../../../data/getFilterLabel.js';
 
 function OnLoadProcessingTabContent() {
   const { register, watch } = useFormContext<WorkspacePreferences>();
diff --git a/src/component/panels/IntegralsPanel/IntegralTable.tsx b/src/component/panels/IntegralsPanel/IntegralTable.tsx
index d0812b8a2..385603314 100644
--- a/src/component/panels/IntegralsPanel/IntegralTable.tsx
+++ b/src/component/panels/IntegralsPanel/IntegralTable.tsx
@@ -7,6 +7,7 @@ import { SIGNAL_KINDS } from '../../../data/constants/signalsKinds.js';
 import { checkIntegralKind } from '../../../data/data1d/Spectrum1D/index.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { EditableColumn } from '../../elements/EditableColumn.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
@@ -15,8 +16,7 @@ import addCustomColumn, {
 import Select from '../../elements/Select.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { formatNumber } from '../../utility/formatNumber.js';
-import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
+import { NoDataForFid } from '../extra/placeholder/NoDataForFid.js';
 
 import type { IntegralPanelInnerProps } from './IntegralPanel.js';
 
@@ -180,7 +180,7 @@ function IntegralTable({ activeTab, data, info }: IntegralTableProps) {
   }
 
   if (!data || data.length === 0) {
-    return <NoTableData />;
+    return <EmptyText text="No data" />;
   }
 
   return <ReactTable data={data} columns={tableColumns} />;
diff --git a/src/component/panels/PeaksPanel/PeaksTable.tsx b/src/component/panels/PeaksPanel/PeaksTable.tsx
index 4d0eb26e7..bad6fc5ad 100644
--- a/src/component/panels/PeaksPanel/PeaksTable.tsx
+++ b/src/component/panels/PeaksPanel/PeaksTable.tsx
@@ -5,6 +5,7 @@ import { FaEdit, FaRegTrashAlt } from 'react-icons/fa';
 
 import { useDispatch } from '../../context/DispatchContext.js';
 import { EditableColumn } from '../../elements/EditableColumn.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
 import type { ControlCustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn, {
@@ -13,8 +14,7 @@ import addCustomColumn, {
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { EditPeakShapeModal } from '../../modal/EditPeakShapeModal.js';
 import { formatNumber } from '../../utility/formatNumber.js';
-import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
+import { NoDataForFid } from '../extra/placeholder/NoDataForFid.js';
 
 import type { PeakRecord } from './PeaksPanel.js';
 
@@ -203,7 +203,7 @@ function PeaksTable({ activeTab, data, info }: PeaksTableProps) {
   }
 
   if (!data || data.length === 0) {
-    return <NoTableData />;
+    return <EmptyText text="No data" />;
   }
 
   return (
diff --git a/src/component/panels/RangesPanel/RangesTable.tsx b/src/component/panels/RangesPanel/RangesTable.tsx
index 319a3b96a..ca6ea95e6 100644
--- a/src/component/panels/RangesPanel/RangesTable.tsx
+++ b/src/component/panels/RangesPanel/RangesTable.tsx
@@ -5,11 +5,11 @@ import type { Info1D } from 'nmr-processing';
 import { FaLink } from 'react-icons/fa';
 
 import { withDialog } from '../../elements/DialogManager.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import type { TableContextMenuProps } from '../../elements/ReactTable/ReactTable.js';
 import useTableSortBy from '../../hooks/useTableSortBy.js';
 import { EditRangeModal } from '../../modal/editRange/EditRangeModal.js';
-import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
+import { NoDataForFid } from '../extra/placeholder/NoDataForFid.js';
 
 import RangesTableRow from './RangesTableRow.js';
 import useMapRanges from './hooks/useMapRanges.js';
@@ -86,7 +86,7 @@ function RangesTable({
   }
 
   if (!tableData || tableData.length === 0) {
-    return <NoTableData />;
+    return <EmptyText text="No data" />;
   }
 
   const showActions =
diff --git a/src/component/panels/ZonesPanel/ZonesTable.tsx b/src/component/panels/ZonesPanel/ZonesTable.tsx
index 9976f8c51..21f895837 100644
--- a/src/component/panels/ZonesPanel/ZonesTable.tsx
+++ b/src/component/panels/ZonesPanel/ZonesTable.tsx
@@ -1,22 +1,22 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
+import type {
+  Zones1DNucleusPreferences,
+  Zones2DNucleusPreferences,
+} from 'nmr-load-save';
 import type { Info2D } from 'nmr-processing';
 import type { ReactNode } from 'react';
 import { FaLink } from 'react-icons/fa';
 
 import { withDialog } from '../../elements/DialogManager.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import useTableSortBy from '../../hooks/useTableSortBy.js';
 import { EditZoneModal } from '../../modal/editZone/EditZoneModal.js';
-import NoDataForFid from '../extra/placeholder/NoDataForFid.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
+import { NoDataForFid } from '../extra/placeholder/NoDataForFid.js';
 
 import ZonesTableRow from './ZonesTableRow.js';
 import { useMapZones } from './hooks/useMapZones.js';
-import type {
-  Zones1DNucleusPreferences,
-  Zones2DNucleusPreferences,
-} from 'nmr-load-save';
 
 const tableStyle = css`
   border-spacing: 0;
@@ -121,7 +121,7 @@ function ZonesTable({ tableData, onUnlink, nucleus, info }: ZonesTableProps) {
   }
 
   if (!tableData || tableData.length === 0) {
-    return <NoTableData />;
+    return <EmptyText text="No data" />;
   }
 
   return (
diff --git a/src/component/panels/databasePanel/DatabasePanel.tsx b/src/component/panels/databasePanel/DatabasePanel.tsx
index 2097f9f5b..5c0f08b86 100644
--- a/src/component/panels/databasePanel/DatabasePanel.tsx
+++ b/src/component/panels/databasePanel/DatabasePanel.tsx
@@ -23,6 +23,7 @@ import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
 import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
 import { options } from '../../toolbar/ToolTypes.js';
@@ -31,7 +32,6 @@ import { exportAsJSON } from '../../utility/export.js';
 import nucleusToString from '../../utility/nucleusToString.js';
 import { PanelNoData } from '../PanelNoData.js';
 import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
 import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
 import PreferencesHeader from '../header/PreferencesHeader.js';
 
@@ -418,7 +418,7 @@ function DatabasePanelInner({
               onSave={saveHandler}
             />
           ) : (
-            <NoTableData
+            <EmptyText
               text={
                 databases && databases?.length > 0
                   ? 'Please select a database'
diff --git a/src/component/panels/extra/placeholder/NoDataForFid.tsx b/src/component/panels/extra/placeholder/NoDataForFid.tsx
index e441a6ad3..3d245f30f 100644
--- a/src/component/panels/extra/placeholder/NoDataForFid.tsx
+++ b/src/component/panels/extra/placeholder/NoDataForFid.tsx
@@ -1,5 +1,5 @@
-import NoTableData from './NoTableData.js';
+import { EmptyText } from '../../../elements/EmptyText.js';
 
-export default function NoDataForFid() {
-  return <NoTableData text="Not available for FID" />;
+export function NoDataForFid() {
+  return <EmptyText text="Not available for FID" />;
 }
diff --git a/src/component/panels/extra/placeholder/NoTableData.tsx b/src/component/panels/extra/placeholder/NoTableData.tsx
deleted file mode 100644
index 975a05300..000000000
--- a/src/component/panels/extra/placeholder/NoTableData.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { CSSProperties } from 'react';
-
-const styles: Record<'label' | 'container', CSSProperties> = {
-  container: {
-    height: '100%',
-    backgroundColor: 'white',
-  },
-  label: {
-    textAlign: 'center',
-    width: '100%',
-    fontSize: '11px',
-    padding: '5px',
-    color: 'gray',
-  },
-};
-
-// placeholder for empty tables if no data is available to show (e.g. peaks, integrals, ranges)
-function NoTableData({ text = 'No Data' }) {
-  return (
-    <div style={styles.container}>
-      <p style={styles.label}>{text}</p>
-    </div>
-  );
-}
-
-export default NoTableData;
diff --git a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
index fa40c6cd5..c245e2ed4 100644
--- a/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
+++ b/src/component/panels/filtersPanel/Filters/FiltersSectionsPanel.tsx
@@ -3,22 +3,23 @@ import styled from '@emotion/styled';
 import { v4 } from '@lukeed/uuid';
 import { Filters1D, Filters2D } from 'nmr-processing';
 import { memo, useEffect, useRef, useState } from 'react';
-import { FaRegEyeSlash, FaRegTrashAlt } from 'react-icons/fa';
+import { FaRegTrashAlt } from 'react-icons/fa';
 import { ObjectInspector } from 'react-inspector';
 import { Button } from 'react-science/ui';
 
+import { getFilterLabel } from '../../../../data/getFilterLabel.js';
 import type { FilterEntry as BaseFilterEntry } from '../../../../data/types/common/FilterEntry.js';
 import { useChartData } from '../../../context/ChartContext.js';
 import { useDispatch } from '../../../context/DispatchContext.js';
 import { useToaster } from '../../../context/ToasterContext.js';
 import type { AlertButton } from '../../../elements/Alert.js';
 import { useAlert } from '../../../elements/Alert.js';
+import { EmptyText } from '../../../elements/EmptyText.js';
 import { Sections } from '../../../elements/Sections.js';
 import useSpectraByActiveNucleus from '../../../hooks/useSpectraPerNucleus.js';
 import useSpectrum from '../../../hooks/useSpectrum.js';
 
 import { filterOptionPanels } from './index.js';
-import { getFilterLabel } from '../../../../data/getFilterLabel.js';
 
 const nonRemovableFilters = new Set<BaseFilterEntry['name']>([
   'digitalFilter',
@@ -248,7 +249,7 @@ function FiltersInner(props: FiltersInnerProps) {
   }
 
   if (filtersList?.length === 0) {
-    return <EmptyFilters />;
+    return <EmptyText text="No Filters" />;
   }
 
   function handleClose() {
@@ -296,7 +297,11 @@ function FiltersInner(props: FiltersInnerProps) {
               />
             ) : (
               <Sections.Body>
-                <ObjectInspector data={error || value} />
+                {value && Object.keys(value).length > 0 ? (
+                  <ObjectInspector data={value} />
+                ) : (
+                  <EmptyText text=" No options available" />
+                )}
               </Sections.Body>
             )}
           </Sections.Item>
@@ -321,30 +326,3 @@ export function FiltersSectionsPanel() {
 
   return <MemoizedFilters {...{ filters, spectraCounter, activeFilterID }} />;
 }
-
-const EmptyContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  color: #6a6a6a;
-  padding: 10px 0;
-`;
-
-export function EmptyFilters() {
-  return (
-    <EmptyContainer>
-      <FaRegEyeSlash
-        style={{
-          margin: '0px 10px',
-          fontSize: '16px',
-        }}
-      />
-      <span
-        style={{
-          fontSize: '11px',
-        }}
-      >
-        No Filters
-      </span>
-    </EmptyContainer>
-  );
-}
diff --git a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
index 207325e71..79cd2b1a3 100644
--- a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
+++ b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisTable.tsx
@@ -3,13 +3,13 @@ import { Fragment, useMemo } from 'react';
 import type { SpectraAnalysisData } from '../../../data/data1d/multipleSpectraAnalysis.js';
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { useSortSpectra } from '../../context/SortSpectraContext.js';
+import { EmptyText } from '../../elements/EmptyText.js';
 import ReactTable from '../../elements/ReactTable/ReactTable.js';
 import type { CustomColumn } from '../../elements/ReactTable/utility/addCustomColumn.js';
 import addCustomColumn from '../../elements/ReactTable/utility/addCustomColumn.js';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import evaluate from '../../utility/Evaluate.js';
-import NoTableData from '../extra/placeholder/NoTableData.js';
 
 import AnalysisCell from './base/AnalysisCell.js';
 import AnalysisColumnHeader from './base/AnalysisColumnHeader.js';
@@ -152,7 +152,7 @@ function MultipleSpectraAnalysisTable({
       />
     </Fragment>
   ) : (
-    <NoTableData />
+    <EmptyText text="No data" />
   );
 }
 
diff --git a/src/data/getFilterLabel.ts b/src/data/getFilterLabel.ts
index 28602492b..f2fed06c7 100644
--- a/src/data/getFilterLabel.ts
+++ b/src/data/getFilterLabel.ts
@@ -1,4 +1,5 @@
 import { Filters1D, Filters2D } from 'nmr-processing';
+
 import type { FilterEntry } from './types/common/FilterEntry.js';
 
 export function getFilterLabel(name: FilterEntry['name']): string {