From cdf35d9e3f3e262930ffc6f7dd21a80dd308827f Mon Sep 17 00:00:00 2001 From: Rutuja Chaudhari <36963955+rutujaac@users.noreply.github.com> Date: Wed, 21 Aug 2024 17:45:53 +0530 Subject: [PATCH] add confidence score at snippet level (#489) --- .../src/components/snippetDetails.js | 171 +++++++++--------- .../app/pebblo-ui/src/components/tooltip.js | 6 +- pebblo/app/pebblo-ui/static/index.css | 6 +- 3 files changed, 97 insertions(+), 86 deletions(-) diff --git a/pebblo/app/pebblo-ui/src/components/snippetDetails.js b/pebblo/app/pebblo-ui/src/components/snippetDetails.js index 2e9aac11..77150ad3 100644 --- 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", }) : `${item.string}` )} @@ -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*/ ` -
-
-
${ - KEYWORD_MAPPING[item?.labelName] || item?.labelName - }
-
Showing ${ - item?.snippetCount - } out of ${item?.findings}
-
- ${item?.snippets?.myMap( - (snipp) => ` -
- ${KeyValue({ key: "Snippets", value: snipp?.snippet })} - ${KeyValue({ - key: "Retrieved from", - value: snipp?.sourcePath, - })} - ${KeyValue({ - key: "Identity", - value: - snipp?.authorizedIdentities?.length > 0 - ? snipp?.authorizedIdentities.join(", ") - : "-", - })} -
-
- ` - )} -
- ` - ) - : /*html*/ `
No Data Found!!
`; - } - 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*/ ` +
+
+
${ + KEYWORD_MAPPING[item?.labelName] || item?.labelName + }
+
Showing ${ + item?.snippetCount + } out of ${item?.findings}
+
+ ${item?.snippetStrings?.myMap((snipp) => { + const snippetConfidenceScore = getSnippetConfidenceScore( + item, + snipp + ); + return ` +
+ ${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(", ") + : "-", + })} +
+
+ `; + })} +
+ ` + ) + : /*html*/ `
No Data Found!!
`; + } + return /*html*/ `
@@ -196,19 +201,19 @@ export function SnippetDetails(props) {
Showing ${ item?.snippets?.length } out of ${item?.snippetCount}
- ${ - item?.findingsType === "topics" && - `
Confidence: ${getConfidenceScoreForTopic( - item?.labelName, - item?.snippets - )}
` - } +
- ${item?.snippetStrings?.myMap( - (snipp) => ` + ${item?.snippetStrings?.myMap((snipp) => { + const snippetConfidenceScore = getSnippetConfidenceScore( + item, + snipp + ); + return `
${KeyValue({ - key: "Snippets", + key: `Snippets ${ + snippetConfidenceScore ? `| ${snippetConfidenceScore}` : "" + }`, value: DisplaySnippet({ formattedString: snipp?.string || [], }), @@ -226,8 +231,8 @@ export function SnippetDetails(props) { })}
- ` - )} + `; + })}
` ) diff --git a/pebblo/app/pebblo-ui/src/components/tooltip.js b/pebblo/app/pebblo-ui/src/components/tooltip.js index 8aec64ff..1deeda68 100644 --- 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*/ ` ${children} - ${title} + ${title} `; } diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css index 14ae314c..bc8655dc 100644 --- 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; +}