From 7fb3285a3a9b430611b7317ca93617767a9a9298 Mon Sep 17 00:00:00 2001
From: Cader <pmhcader.nus@gmail.com>
Date: Sun, 20 Apr 2025 15:41:07 +0800
Subject: [PATCH] title of invention tooltip

---
 ui/src/assets/tooltip-48.png             | Bin 0 -> 383 bytes
 ui/src/components/Search/Search.tsx      |   9 ++++++++-
 ui/src/components/elements/FormField.tsx |  20 +++++++++++++++++---
 ui/src/declarations.d.ts                 |   4 ++++
 4 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/assets/tooltip-48.png
 create mode 100644 ui/src/declarations.d.ts

diff --git a/ui/src/assets/tooltip-48.png b/ui/src/assets/tooltip-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..94fe82af204ad46487e3574245c6a3a6bf6bd7f6
GIT binary patch
literal 383
zcmV-_0f7FAP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkPF-b&0RCt{2nZatqFbsyjQy!xog|YWoy0WqdD%)vK(Y5b3+NS9P
ztUU)b3_6HF4|P_1Ci=kOizWS%?O+8Q$8r8U55N{^few&6k4}AUfa%cS7r-S!&~jy*
zf%%Zk=L}wqh)Ilqtue9#o`H({Qvo%wH~zn347J8U2tGBn@!!N4um?6p=KEB=gMBl0
zALc@a#4vgRZ@@{<(z3(~v}XM=(uTMI;w!M!DunF6mRNzmKwJPLuE3M-{{!$?qJR&x
z{=Gy2pJsiSCyzl~0A2y{ErcIp{1(Em(UE@0R%U&e7bjo_eCr7F<S|I;51Ov@#?~=&
zYjJM;hd0H|Y>a`u8cfyPed#rK*D;2s+S-=P<0rPgj%NLwIry4^Otgee!e2~{`i#!J
d<2VjU_yxuasltAgZ8rb_002ovPDHLkV1ifEsUQFV

literal 0
HcmV?d00001

diff --git a/ui/src/components/Search/Search.tsx b/ui/src/components/Search/Search.tsx
index 538f046..4c921ee 100644
--- a/ui/src/components/Search/Search.tsx
+++ b/ui/src/components/Search/Search.tsx
@@ -35,7 +35,13 @@ const fields: FormFieldProps[] = [
       { value: "Withdrawn", label: "Withdrawn" },
     ],
   },
-  { name: "titleOfInvention", label: "Title Of Invention", type: "text" },
+  {
+    name: "titleOfInvention",
+    label: "Title Of Invention",
+    type: "text",
+    tooltipText:
+      "Enabling the smart search will retrieve results that not only match the title of invention keyword, but are also semantically similar in meaning.",
+  },
   {
     name: "filingDate",
     label: "Filing Date Range",
@@ -194,6 +200,7 @@ export default function SearchComponent() {
       placeholder={field.label}
       // error={errors[field.name]}
       options={field.options}
+      tooltipText={field.tooltipText}
     />
   );
   return (
diff --git a/ui/src/components/elements/FormField.tsx b/ui/src/components/elements/FormField.tsx
index a16690a..675ff53 100644
--- a/ui/src/components/elements/FormField.tsx
+++ b/ui/src/components/elements/FormField.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import tooltipIcon from "../../assets/tooltip-48.png";
 const FormField: React.FC<FormFieldProps> = ({
   label,
   name,
@@ -11,15 +12,27 @@ const FormField: React.FC<FormFieldProps> = ({
   options = [],
   valueEnd,
   onChangeEnd,
+  tooltipText,
 }) => {
   const inputClass = `form-control ${error ? "is-invalid" : ""}`;
 
   return (
     <div className="mb-3 text-start">
       <label htmlFor={name} className="form-label fw-semibold">
-        {label}
+        {label + " "}
+        {tooltipText && (
+          <OverlayTrigger
+            placement="top"
+            overlay={<Tooltip id={`tooltip-${name}`}>{tooltipText}</Tooltip>}
+          >
+            <img
+              src={tooltipIcon}
+              alt="info"
+              style={{ width: "16px", height: "16px", cursor: "pointer" }}
+            />
+          </OverlayTrigger>
+        )}
       </label>
-
       {type === "select" ? (
         <select
           id={name}
@@ -101,4 +114,5 @@ export interface FormFieldProps {
   options?: Option[]; // For select
   valueEnd?: string; // For date-range end value
   onChangeEnd?: (e: React.ChangeEvent<HTMLInputElement>) => void; // For date-range end
+  tooltipText?: string;
 }
diff --git a/ui/src/declarations.d.ts b/ui/src/declarations.d.ts
new file mode 100644
index 0000000..66b2456
--- /dev/null
+++ b/ui/src/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}