fix(insight): some ui fixes for insight panel (#4845)

This PR contains multiple _small_ fixes for the insight panel! ### [SVCC-4282](https://coveord.atlassian.net/browse/SVCC-4282) Insight Facets cannot be collapsed Missing `if (collapsed)` in the render method to not render the body if collapsed #### Before ![facet collapsed](https://github.com/user-attachments/assets/43c5b210-bd53-45c0-bc25-52a76cee0d98) #### After ![facet collapsed 2](https://github.com/user-attachments/assets/dd53fb87-be82-4f40-8940-e51e976ec16e) ----- ### [SVCC-4284](https://coveord.atlassian.net/browse/SVCC-4284) Display As Link in Insight Facets could select multiple values Change `toggleSelect` to `toggleSingleSelect` if the displayAs is set to `link` (like normal facets). #### Before ![afgfgfds](https://github.com/user-attachments/assets/84858e66-64b3-4a35-9b32-1aa2df5c283e) ----- ### [SFINT-5866](https://coveord.atlassian.net/browse/SFINT-5866) Spacing after searchbox if no tabs and filters The searchbox had zero `height`, so the padding was not applied correctly to the search section. When the facets or user actions button was added, the height was set correctly so I added the same `height: 2.6rem` to the searchbox. #### Before ![image](https://github.com/user-attachments/assets/573cc4b2-a5e7-472b-ae89-a6402174ce22) #### After ![image](https://github.com/user-attachments/assets/984ac8c7-13fb-4fc9-aa9e-6fe026d75848) ----- ### [SVCC-4348](https://coveord.atlassian.net/browse/SVCC-4348) Result padding should be controlled with a variable In the insight result CSS, changed `@apply p-6;` to use `--atomic-layout-spacing-x` so we can control the padding externally. ![image](https://github.com/user-attachments/assets/58b3d6b4-70e4-4d4f-b4fd-eff981a36c79) [SVCC-4282]: https://coveord.atlassian.net/browse/SVCC-4282?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [SVCC-4284]: https://coveord.atlassian.net/browse/SVCC-4284?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [SFINT-5866]: https://coveord.atlassian.net/browse/SFINT-5866?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [SVCC-4348]: https://coveord.atlassian.net/browse/SVCC-4348?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Louis Bompart <[email protected]>
coveo · Jan 14, 2025 · 03db330 · 03db330
1 parent d9c9856
commit 03db330
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/atomic/dev/examples/insights.html b/packages/atomic/dev/examples/insights.html
@@ -79,7 +79,7 @@
         </atomic-layout-section>
         <atomic-layout-section section="facets">
           <atomic-facet-manager>
-            <atomic-insight-facet field="source" label="Source" display-values-as="checkbox"></atomic-insight-facet>
+            <atomic-insight-facet field="source" label="Source" display-values-as="link"></atomic-insight-facet>
             <atomic-insight-facet field="filetype" label="Filetype" display-values-as="checkbox"></atomic-insight-facet>
             <atomic-insight-numeric-facet
               field="ytlikecount"

diff --git a/packages/atomic/src/components/insight/atomic-insight-facet/atomic-insight-facet.tsx b/packages/atomic/src/components/insight/atomic-insight-facet/atomic-insight-facet.tsx
@@ -204,8 +204,7 @@ export class AtomicInsightFacet
               onToggleCollapse={() => (this.isCollapsed = !this.isCollapsed)}
               headerRef={(el) => this.focusTargets.header.setTarget(el)}
             ></FacetHeader>
-
-            {[this.renderValues(), this.renderShowMoreLess()]}
+            {this.renderBody()}
           </FacetContainer>
         ) : (
           <FacetPlaceholder
@@ -217,6 +216,13 @@ export class AtomicInsightFacet
     );
   }
 
+  private renderBody() {
+    if (this.isCollapsed) {
+      return;
+    }
+    return [this.renderValues(), this.renderShowMoreLess()];
+  }
+
   private renderValuesContainer(children: VNode[], query?: string) {
     const classes = `mt-3 ${
       this.displayValuesAs === 'box' ? 'box-container' : ''
@@ -249,7 +255,11 @@ export class AtomicInsightFacet
             {...this.facetValueProps}
             facetCount={value.numberOfResults}
             onExclude={() => this.facet.toggleExclude(value)}
-            onSelect={() => this.facet.toggleSelect(value)}
+            onSelect={() =>
+              this.displayValuesAs === 'link'
+                ? this.facet.toggleSingleSelect(value)
+                : this.facet.toggleSelect(value)
+            }
             facetValue={value.value}
             facetState={value.state}
             setRef={(btn) => {

diff --git a/packages/atomic/src/components/insight/atomic-insight-layout/insight-layout.ts b/packages/atomic/src/components/insight/atomic-insight-layout/insight-layout.ts
@@ -58,6 +58,7 @@ export function buildInsightLayout(element: HTMLElement, widget: boolean) {
 
     ${sectionSelector('search')} ${searchBoxSelector} {
       flex-grow: 1;
+      height: 2.6rem;
     }
 
     ${toggleSelectors.map(

diff --git a/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss b/packages/atomic/src/components/insight/atomic-insight-result/atomic-insight-result.pcss
@@ -6,7 +6,10 @@
   @apply relative;
 
   .with-sections:not(.child-result) {
-    @apply p-6;
+    padding-top: var(--atomic-layout-spacing-y);
+    padding-bottom: var(--atomic-layout-spacing-y);
+    padding-right: var(--atomic-layout-spacing-x);
+    padding-left: var(--atomic-layout-spacing-x);
   }
 
   &(:hover) {