add confidence score at snippet level (#489)

daxa-ai · Aug 21, 2024 · cdf35d9 · cdf35d9
1 parent 400f638
commit cdf35d9
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 86 deletions.
diff --git a/pebblo/app/pebblo-ui/src/components/snippetDetails.js b/pebblo/app/pebblo-ui/src/components/snippetDetails.js
@@ -16,6 +16,7 @@ function DisplaySnippet(props) {
               title: `Confidence: ${item?.score}`,
               variant: "top",
               inline: true,
+              width: "width-max-content",
             })
           : `<span >${item.string}</span>`
       )}
@@ -30,62 +31,6 @@ export function SnippetDetails(props) {
     if (inputEl) inputEl?.addEventListener(KEYUP, onChange);
   });
 
-  function onChange(evt) {
-    let filteredData;
-    if (evt.target.value) {
-      filteredData = data?.snippets?.filter((item) =>
-        eval(
-          searchField
-            ?.map((sch) =>
-              item[sch]
-                ?.toLocaleLowerCase()
-                ?.includes(evt.target.value.toLocaleLowerCase())
-            )
-            .join(" || ")
-        )
-      );
-    } else {
-      filteredData = data?.snippets;
-    }
-    const snippet_body = document.getElementById("snippet_body");
-    snippet_body.innerHTML = "";
-    snippet_body.innerHTML = filteredData?.length
-      ? filteredData?.myMap(
-          (item) => /*html*/ `        
-       <div class="flex flex-col gap-1">
-         <div class="snippet-header bg-main flex gap-2 pt-3 pb-3 pl-3 pr-3 inter items-center">
-           <div class="surface-10-opacity-65 font-14 medium">${
-             KEYWORD_MAPPING[item?.labelName] || item?.labelName
-           }</div>
-           <div class="surface-10-opacity-50 font-12">Showing ${
-             item?.snippetCount
-           } out of ${item?.findings}</div>
-         </div>
-         ${item?.snippets?.myMap(
-           (snipp) => `
-              <div class="snippet-body flex flex-col gap-3 pr-3 pl-3 pt-3 pb-3">
-               ${KeyValue({ key: "Snippets", value: snipp?.snippet })}
-               ${KeyValue({
-                 key: "Retrieved from",
-                 value: snipp?.sourcePath,
-               })}
-               ${KeyValue({
-                 key: "Identity",
-                 value:
-                   snipp?.authorizedIdentities?.length > 0
-                     ? snipp?.authorizedIdentities.join(", ")
-                     : "-",
-               })}
-              <div class="divider-horizontal"></div>
-             </div>
-           `
-         )}
-     </div>
-   `
-        )
-      : /*html*/ `<div class="text-center pt-3 pb-3 pl-3 pr-3 inter surface-10 font-13 medium">No Data Found!!</div>`;
-  }
-
   let snippetList = [];
 
   const splitStringByPivots = (longString, pivots, groups, scores) => {
@@ -147,24 +92,84 @@ export function SnippetDetails(props) {
     });
   }
 
-  const getConfidenceScoreForTopic = (label, snippets) => {
-    let confidenceScore = "";
-    if (snippets?.length) {
-      const score = snippets.find((snippet) => {
-        if (snippet?.topicDetails) {
-          const labelScore = snippet?.topicDetails[label];
-          if (labelScore?.length > 0) {
-            confidenceScore = labelScore[0]?.confidence_score;
-            return confidenceScore;
-          }
-          return false;
-        }
-      });
-      return confidenceScore;
+  const getSnippetConfidenceScore = (item, snipp) => {
+    const topic = item?.labelName;
+    if (item && topic && snipp?.topicDetails && snipp?.topicDetails[topic]) {
+      const topicDetails = snipp?.topicDetails[topic];
+      if (topicDetails?.length > 0) {
+        return `Confidence: ${topicDetails[0]?.confidence_score}`;
+      }
     }
-    return confidenceScore;
+    return "";
   };
 
+  function onChange(evt) {
+    let filteredData;
+    if (evt.target.value) {
+      filteredData = snippetList?.filter((item) =>
+        eval(
+          searchField
+            ?.map((sch) =>
+              item[sch]
+                ?.toLocaleLowerCase()
+                ?.includes(evt.target.value.toLocaleLowerCase())
+            )
+            .join(" || ")
+        )
+      );
+    } else {
+      filteredData = snippetList;
+    }
+    const snippet_body = document.getElementById("snippet_body");
+    snippet_body.innerHTML = "";
+    snippet_body.innerHTML = filteredData?.length
+      ? filteredData?.myMap(
+          (item) => /*html*/ `        
+       <div class="flex flex-col gap-1">
+         <div class="snippet-header bg-main flex gap-2 pt-3 pb-3 pl-3 pr-3 inter items-center">
+           <div class="surface-10-opacity-65 font-14 medium">${
+             KEYWORD_MAPPING[item?.labelName] || item?.labelName
+           }</div>
+           <div class="surface-10-opacity-50 font-12">Showing ${
+             item?.snippetCount
+           } out of ${item?.findings}</div>
+         </div>
+         ${item?.snippetStrings?.myMap((snipp) => {
+           const snippetConfidenceScore = getSnippetConfidenceScore(
+             item,
+             snipp
+           );
+           return `
+              <div class="snippet-body flex flex-col gap-3 pr-3 pl-3 pt-3 pb-3">
+               ${KeyValue({
+                 key: `Snippets ${
+                   snippetConfidenceScore ? `| ${snippetConfidenceScore}` : ""
+                 }`,
+                 value: DisplaySnippet({
+                   formattedString: snipp?.string || [],
+                 }),
+               })}
+               ${KeyValue({
+                 key: "Retrieved from",
+                 value: snipp?.sourcePath,
+               })}
+               ${KeyValue({
+                 key: "Identity",
+                 value:
+                   snipp?.authorizedIdentities?.length > 0
+                     ? snipp?.authorizedIdentities.join(", ")
+                     : "-",
+               })}
+              <div class="divider-horizontal"></div>
+             </div>
+           `;
+         })}
+     </div>
+   `
+        )
+      : /*html*/ `<div class="text-center pt-3 pb-3 pl-3 pr-3 inter surface-10 font-13 medium">No Data Found!!</div>`;
+  }
+
   return /*html*/ `
       <div class="tab_panel snippet-details-container flex flex-col gap-4">
       <div class="flex justify-between">
@@ -196,19 +201,19 @@ export function SnippetDetails(props) {
              <div class="surface-10-opacity-50 font-12">Showing ${
                item?.snippets?.length
              } out of ${item?.snippetCount}</div>
-            ${
-              item?.findingsType === "topics" &&
-              `<div class="surface-10-opacity-65 font-14 medium ml-auto">Confidence: ${getConfidenceScoreForTopic(
-                item?.labelName,
-                item?.snippets
-              )}</div>`
-            }
+            
            </div>
-           ${item?.snippetStrings?.myMap(
-             (snipp) => `
+           ${item?.snippetStrings?.myMap((snipp) => {
+             const snippetConfidenceScore = getSnippetConfidenceScore(
+               item,
+               snipp
+             );
+             return `
                 <div class="snippet-body flex flex-col gap-3 pr-3 pl-3 pt-3 pb-3">
                  ${KeyValue({
-                   key: "Snippets",
+                   key: `Snippets ${
+                     snippetConfidenceScore ? `| ${snippetConfidenceScore}` : ""
+                   }`,
                    value: DisplaySnippet({
                      formattedString: snipp?.string || [],
                    }),
@@ -226,8 +231,8 @@ export function SnippetDetails(props) {
                 })}
                 <div class="divider-horizontal"></div>
                </div>
-             `
-           )}
+             `;
+           })}
        </div>
         `
             )

diff --git a/pebblo/app/pebblo-ui/src/components/tooltip.js b/pebblo/app/pebblo-ui/src/components/tooltip.js
@@ -5,10 +5,12 @@
 // }
 
 export function Tooltip(props) {
-  const { children, title, variant = "top", inline } = props;
+  const { children, title, variant = "top", inline, width } = props;
   return /*html*/ `
   <span class="tooltip ${inline ? "tooltip-inline" : ""}">
   <span class="tooltip-content">${children}</span>
-  <span class="tooltip-wrapper tooltip-wrapper-${variant}"><span class="tooltip-title-${variant}">${title}</span></span></span>
+  <span class="tooltip-wrapper tooltip-wrapper-${variant} ${
+    width || ""
+  }"><span class="tooltip-title-${variant}">${title}</span></span></span>
    `;
 }
diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css
@@ -1176,7 +1176,7 @@ dialog::backdrop {
   content: "";
   position: absolute;
   top: -10px;
-  left: 50%;
+  left: 10%;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
@@ -1415,3 +1415,7 @@ dialog::backdrop {
   background-color: var(--surface-70);
   font-weight: bold;
 }
+
+.width-max-content {
+  width: 200px;
+}