Merge pull request #1058 from 10up/feature/improve-preview-highlighting

CSS updates to highlight terms in the previewer that are below the configured threshold

Author: dkotter

src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js

@@ -104,6 +104,21 @@ export function IBMWatsonNLUResults( { postId } ) {
 		keywords: responseData.keywords,
 	};
 
+	const hasAnyTags = Object.keys( renderData ).some(
+		( taxSlug ) => renderData[ taxSlug ].length > 0
+	);
+
+	const allBelowThreshold =
+		hasAnyTags &&
+		Object.keys( renderData ).every( ( taxSlug ) =>
+			renderData[ taxSlug ].every( ( tag ) => {
+				const threshold =
+					settings[ `${ taxMap[ taxSlug ] }_threshold` ];
+				const score = normalizeScore( tag.score || tag.relevance );
+				return score < threshold;
+			} )
+		);
+
 	const card = Object.keys( renderData ).map( ( taxSlug ) => {
 		const tags = renderData[ taxSlug ].map( ( tag, _index ) => {
 			const threshold = settings[ `${ taxMap[ taxSlug ] }_threshold` ];
@@ -112,7 +127,7 @@ export function IBMWatsonNLUResults( { postId } ) {
 			const scoreClass =
 				score >= threshold
 					? 'classifai__classification-previewer-result-tag--exceeds-threshold'
-					: '';
+					: 'classifai__classification-previewer-result-tag--below-threshold';
 
 			return (
 				<div
@@ -179,6 +194,18 @@ export function IBMWatsonNLUResults( { postId } ) {
 					'classifai'
 				) }
 			</Notice>
+			{ allBelowThreshold && (
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="classifai__classification-previewer-result-notice"
+				>
+					{ __(
+						'None of the terms are above the configured threshold.',
+						'classifai'
+					) }
+				</Notice>
+			) }
 			{ card }
 		</>
 	) : null;

src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js

@@ -85,6 +85,20 @@ export function AzureOpenAIEmbeddingsResults( { postId } ) {
 		} )();
 	}, [ postId ] );
 
+	const hasAnyTags = Object.keys( responseData ).some(
+		( taxSlug ) => responseData[ taxSlug ]?.data?.length > 0
+	);
+
+	const allBelowThreshold =
+		hasAnyTags &&
+		Object.keys( responseData ).every( ( taxSlug ) =>
+			( responseData[ taxSlug ]?.data || [] ).every( ( tag ) => {
+				const threshold = settings[ `${ taxSlug }_threshold` ];
+				const score = normalizeScore( tag.score );
+				return score < threshold;
+			} )
+		);
+
 	const card = Object.keys( responseData ).map( ( taxSlug ) => {
 		const tags = responseData[ taxSlug ]?.data.map( ( tag, _index ) => {
 			const threshold = settings[ `${ taxSlug }_threshold` ];
@@ -93,7 +107,7 @@ export function AzureOpenAIEmbeddingsResults( { postId } ) {
 			const scoreClass =
 				score >= threshold
 					? 'classifai__classification-previewer-result-tag--exceeds-threshold'
-					: '';
+					: 'classifai__classification-previewer-result-tag--below-threshold';
 
 			return (
 				<div
@@ -160,6 +174,18 @@ export function AzureOpenAIEmbeddingsResults( { postId } ) {
 					'classifai'
 				) }
 			</Notice>
+			{ allBelowThreshold && (
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="classifai__classification-previewer-result-notice"
+				>
+					{ __(
+						'None of the terms are above the configured threshold.',
+						'classifai'
+					) }
+				</Notice>
+			) }
 			{ card }
 		</>
 	) : null;

src/scss/settings.scss

@@ -623,6 +623,21 @@
 	}
 }
 
+.classifai__classification-previewer-result-tag--below-threshold {
+	border-color: #e74c3c;
+	font-weight: bold;
+
+	.classifai__classification-previewer-result-tag-score {
+		color: #f1f1f1;
+		background-color: #e74c3c;
+		border-right: 1px solid #e74c3c;
+	}
+
+	.classifai__classification-previewer-result-tag-label {
+		color: #e74c3c;
+	}
+}
+
 .components-button.classifai__classification-previewer-close-button.is-link {
 	position: relative;
 	margin: 0 auto;