feat: add tooltips to spectra list cells

Author: hamed-musallam

src/component/panels/SpectraPanel/SpectraTable.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@blueprintjs/core';
 import type {
   ActiveSpectrum,
   JpathTableColumn,
@@ -328,7 +329,17 @@ export function SpectraTable(props: SpectraTableProps) {
 
         const cell: Column<Spectrum> = {
           Header: () => <ColumnHeader label={col.label} col={col} />,
-          accessor: (row) => getValueByPath(row, jpath, format),
+          Cell: ({ row }: CellProps<Spectrum>) => {
+            const val = getValueByPath(row.original, jpath, format);
+            return (
+              <Tooltip
+                content={val}
+                renderTarget={({ isOpen, ...targetProps }) => (
+                  <div {...targetProps}>{val}</div>
+                )}
+              />
+            );
+          },
           ...(cellRender && { Cell: cellRender }),
           id: `${index}`,
           style,

src/component/panels/SpectraPanel/base/RenderAsHTML.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@blueprintjs/core';
 import type { Spectrum } from '@zakodium/nmrium-core';
 import dlv from 'dlv';
 
@@ -6,6 +7,17 @@ interface RenderAsHTMLProps {
   jpath: string | string[];
 }
 
+interface HTMLContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  html: string;
+}
+
+function HTMLContent({ html }: HTMLContentProps) {
+  return (
+    // eslint-disable-next-line react/no-danger
+    <div dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
+
 export function RenderAsHTML(props: RenderAsHTMLProps) {
   const { data, jpath } = props;
 
@@ -15,11 +27,17 @@ export function RenderAsHTML(props: RenderAsHTMLProps) {
     return value;
   }
 
+  const formattedHTML = formatValueAsHTML(value);
+
   return (
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: formatValueAsHTML(value),
+    <Tooltip
+      content={<HTMLContent html={formattedHTML} />}
+      renderTarget={({ isOpen, ...targetProps }) => {
+        return (
+          <div {...targetProps}>
+            <HTMLContent html={formattedHTML} />
+          </div>
+        );
       }}
     />
   );

src/component/panels/SpectraPanel/base/SpectrumName.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@blueprintjs/core';
 import type { Spectrum } from '@zakodium/nmrium-core';
 import { SvgNmr2D, SvgNmrFid, SvgNmrFt } from 'cheminfo-font';
 import type { CSSProperties } from 'react';
@@ -24,13 +25,21 @@ const styles: Record<'info' | 'icon', CSSProperties> = {
 };
 
 export function SpectrumName(props: SpectrumNameProps) {
+  const name = props.data.info.name;
   return (
-    <div style={styles.info}>
-      <div style={styles.icon}>
-        <SpectraIcon {...props} />
-      </div>
-      <span>{props.data.info.name}</span>
-    </div>
+    <Tooltip
+      content={name}
+      renderTarget={({ isOpen, ...targetProps }) => {
+        return (
+          <div style={styles.info} {...targetProps}>
+            <div style={styles.icon}>
+              <SpectraIcon {...props} />
+            </div>
+            <span>{props.data.info.name}</span>
+          </div>
+        );
+      }}
+    />
   );
 }