From 231bd89619fb55860a9d29e48bf35b9704b924b5 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 28 Nov 2024 09:04:25 +0100
Subject: [PATCH] Added density tooltip

---
 l10n/bundle.l10n.json                         |  1 +
 src/components/common/Tooltip.tsx             | 26 +++++++++++++++++++
 src/localization/localization.enum.ts         |  6 ++++-
 .../components/SeoKeywordInfo.tsx             | 23 +++++++++-------
 .../components/VSCode/VSCodeTable.tsx         |  2 +-
 5 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/components/common/Tooltip.tsx

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index a2810c19..929dc82e 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -501,6 +501,7 @@
   "panel.seoKeywords.density": "Keyword density",
   "panel.seoKeywordInfo.validInfo.label": "Heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
+  "panel.seoKeywordInfo.density.tooltip": "Recommended frequency: 0.75% - 1.5%",
 
   "panel.seoKeywords.title": "Keywords",
   "panel.seoKeywords.header.keyword": "Keyword",
diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
new file mode 100644
index 00000000..3ec82030
--- /dev/null
+++ b/src/components/common/Tooltip.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Tooltip as TT } from 'react-tooltip'
+
+export interface ITooltipProps {
+  id: string;
+  render?: () => React.ReactNode;
+}
+
+export const Tooltip: React.FunctionComponent<ITooltipProps> = ({
+  id,
+  render
+}: React.PropsWithChildren<ITooltipProps>) => {
+
+  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
+  
+  return (
+    <TT 
+      id={id}
+      className={tooltipClasses} 
+      style={{
+        fontSize: '12px',
+        lineHeight: '19px'
+      }}
+      render={render} />
+  );
+};
\ No newline at end of file
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index 4173d25b..6ed2d24a 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -616,7 +616,7 @@ export enum LocalizationKey {
    */
   dashboardHeaderPaginationPrevious = 'dashboard.header.pagination.previous',
   /**
-   * next
+   * Next
    */
   dashboardHeaderPaginationNext = 'dashboard.header.pagination.next',
   /**
@@ -1620,6 +1620,10 @@ export enum LocalizationKey {
    * Content
    */
   panelSeoKeywordInfoValidInfoContent = 'panel.seoKeywordInfo.validInfo.content',
+  /**
+   * Recommended frequency: 0.75% - 1.5%
+   */
+  panelSeoKeywordInfoDensityTooltip = 'panel.seoKeywordInfo.density.tooltip',
   /**
    * Keywords
    */
diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx
index e4d5c877..9434ab55 100644
--- a/src/panelWebView/components/SeoKeywordInfo.tsx
+++ b/src/panelWebView/components/SeoKeywordInfo.tsx
@@ -5,7 +5,7 @@ import { Tag } from './Tag';
 import { LocalizationKey, localize } from '../../localization';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { CommandToCode } from '../CommandToCode';
-import { Tooltip } from 'react-tooltip'
+import { Tooltip } from '../../components/common/Tooltip';
 
 export interface ISeoKeywordInfoProps {
   keywords: string[];
@@ -29,8 +29,6 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   headings
 }: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
 
-  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
-
   const density = () => {
     if (!wordCount) {
       return null;
@@ -41,7 +39,14 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
     const density = (count / wordCount) * 100;
     const densityTitle = `${density.toFixed(2)}* %`;
     const color = (density >= 0.75 && density < 1.5) ? "--vscode-charts-green" : "--vscode-charts-yellow";
-    return <span className={`text-[12px] text-[var(${color})]`} title="Recommended frequency: 0.75% - 1.5%">{densityTitle}</span>;
+    return (
+      <span 
+        className={`text-[12px] text-[var(${color})] cursor-default`} 
+        data-tooltip-id={`tooltip-density-${keyword}`}
+        data-tooltip-content={localize(LocalizationKey.panelSeoKeywordInfoDensityTooltip)}>
+        {densityTitle}
+      </span>
+    );
   };
 
   const validateKeywords = (heading: string, keyword: string) => {
@@ -110,7 +115,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
     return (
       <div 
-        className={`inline-flex py-0.5 px-2 my-1 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid 
+        className={`inline-flex py-0.5 px-2 my-1 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid cursor-default 
           ${isValid 
             ? "text-[var(--vscode-charts-green)] border-[var(--vscode-charts-green)] bg-[var(--frontmatter-success-background)]" 
             : "text-[var(--vscode-charts-yellow)] border-[var(--vscode-charts-yellow)] bg-[var(--frontmatter-warning-background)]"}`}
@@ -147,15 +152,13 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
         <Tooltip 
           id={`tooltip-checks-${keyword}`}
-          className={tooltipClasses} 
-          style={{
-            fontSize: '12px',
-            lineHeight: '19px'
-          }}
           render={() => tooltipContent} />
       </VSCodeTableCell>
       <VSCodeTableCell className={`text-center`}>
         {density()}
+
+        <Tooltip 
+          id={`tooltip-density-${keyword}`} />
       </VSCodeTableCell>
     </VSCodeTableRow>
   );
diff --git a/src/panelWebView/components/VSCode/VSCodeTable.tsx b/src/panelWebView/components/VSCode/VSCodeTable.tsx
index 7a287c5b..779e65fa 100644
--- a/src/panelWebView/components/VSCode/VSCodeTable.tsx
+++ b/src/panelWebView/components/VSCode/VSCodeTable.tsx
@@ -72,7 +72,7 @@ const VSCodeTableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-6 px-2 py-2 text-left align-middle font-bold",
+      "h-6 px-2 py-2 text-left align-middle font-bold cursor-default",
       className
     )}
     {...props}