Merge pull request #57 from samply/feature/chip-info-button

Add info button to individual chips and display only that child's message in dialogue
samply · Feb 29, 2024 · caf7cf2 · caf7cf2
2 parents b979426 + eefd5b5
commit caf7cf2
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 13 deletions.
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -259,13 +259,51 @@ footer {
 /**
   Searchbars
 */
+
 lens-search-bar-multiple::part(lens-searchbar-chip) {
   background-color: var(--light-blue);
 }
 
-lens-search-bar-multiple::part(query-delete-button) {
+lens-search-bar-multiple::part(info-button),
+lens-search-bar::part(info-button){
   background-color: var(--light-blue);
   border-color: var(--light-blue);
+  position: relative;
+  padding: 0;
+  border: 0;
+  top: +2px;
+}
+
+lens-search-bar::part(info-button-icon),
+lens-search-bar-multiple::part(info-button-icon) {
+  height: calc(var(--font-size-s) + 8px);
+  width: calc(var(--font-size-s) + 8px);
+  filter: brightness(0) invert(1);
+  box-sizing: content-box;
+  border-radius: 50%;
+}
+
+lens-search-bar::part(info-button-icon):hover,
+lens-search-bar-multiple::part(info-button-icon):hover {
+  filter: invert(38%) sepia(78%) saturate(1321%) hue-rotate(352deg) brightness(92%) contrast(99%);
+  transform: scale(1.1);
+  cursor: pointer;
+}
+
+lens-search-bar::part(info-button-dialogue),
+lens-search-bar-multiple::part(info-button-dialogue) {
+  position: absolute;
+  border: none;
+  background-color: var(--white);
+  width: max-content;
+  max-width: 200px;
+  z-index: 100;
+  padding: var(--gap-s);
+  top: calc(var(--gap-m) + 4px);
+  right: -20px;
+  border: solid 1px var(--light-blue);
+  border-radius: var(--border-radius-small);
+  text-align: left;
 }
 
 lens-search-bar-multiple::part(query-delete-button-item) {
@@ -398,3 +436,23 @@ lens-catalogue::part(info-button-icon):hover {
   max-width: 300px;
   text-align: left;
 }
+
+lens-info-button::part(info-button-dialogue):hover {background-color: #b8bfb8}
+
+lens-info-button::part(info-button):hover {background-color: #b8bfb8}
+
+lens-info-button::part(info-button):active {
+  background-color: #585958;
+  transform: translateX(1px);
+}
+
+lens-info-button::part(info-button-dialogue):active {
+  background-color: #585958;
+  transform: translateX(1px);
+}
+
+.result-table-hint-text {
+  padding-top: 20px;
+  display: flex;
+  align-items: end;
+}
diff --git a/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte b/packages/lib/src/components/buttons/InfoButtonComponent.wc.svelte
@@ -3,18 +3,26 @@
         tag: "lens-info-button",
         props: {
             showQuery: { type: "Boolean" },
+            onlyChildInfo: { type: "Boolean" },
+            queryItem: { type: "Object" },
         },
     }}
 />
 
 <script lang="ts">
+    import { getHumanReadableQuery, buildHumanReadableRecursively } from "../../stores/negotiate";
+    import { returnNestedValues } from "../../helpers/ast-transformer";
+    import type { AstElement } from "../../types/ast";
+    import type { QueryItem } from "../../types/queryData";
     import { iconStore } from "../../stores/icons";
-    import { getHumanReadableQuery } from "../../stores/negotiate";
 
     export let message: string[] = [];
     export let noQueryMessage: string = "Search for all results";
     export let showQuery: boolean = false;
+    
     export let infoIconUrl: string | null = null;
+    export let onlyChildInfo: boolean = false;
+    export let queryItem: QueryItem | undefined = undefined;
 
     iconStore.update((store) => {
         if (infoIconUrl) {
@@ -33,28 +41,41 @@
         tooltipOpen = false;
     };
 
-    const displayQueryInfo = (): void => {
+    const displayQueryInfo = (queryItem?: QueryItem): void => {
         if (showQuery) {
-            message =
-                getHumanReadableQuery().length > 0
-                    ? [getHumanReadableQuery()]
-                    : [noQueryMessage];
+             if (onlyChildInfo && queryItem !== undefined) {
+                let childMessage =
+                    buildHumanReadableRecursively(
+                    returnNestedValues(queryItem) as AstElement, "");
+                message = childMessage.length > 0
+                    ? [childMessage] : [noQueryMessage];
+                
+             } else {
+                message =
+                    getHumanReadableQuery().length > 0
+                        ? [getHumanReadableQuery()]
+                        : [noQueryMessage];
+            }
         }
         tooltipOpen = !tooltipOpen;
     };
 </script>
 
-<button part="info-button" on:click={displayQueryInfo} on:focusout={onFocusOut}>
+<button part="info-button" on:click={
+                              onlyChildInfo
+                                  ? displayQueryInfo(queryItem)
+                                  : displayQueryInfo
+                                    } on:focusout={onFocusOut}>
     {#if iconUrl}
         <img part="info-button-icon" src={iconUrl} alt="info icon" />
     {:else}
         <span part="info-button-icon"> &#9432; </span>
     {/if}
     {#if tooltipOpen}
         <div part="info-button-dialogue">
-            {#each message as msg}
-                <div part="info-button-dialogue-message">{msg}</div>
-            {/each}
+          {#each message as msg}
+              <div part="info-button-dialogue-message">{msg}</div>
+          {/each}
         </div>
     {/if}
 </button>
diff --git a/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte b/packages/lib/src/components/search-bar/SearchBarComponent.wc.svelte
@@ -19,6 +19,7 @@
     import type { AutoCompleteItem, QueryItem } from "../../types/queryData";
     import { v4 as uuidv4 } from "uuid";
     import StoreDeleteButtonComponent from "../buttons/StoreDeleteButtonComponent.svelte";
+    import InfoButtonComponent from "../buttons/InfoButtonComponent.wc.svelte";
     import { addPercentageSignToCriteria } from "../../helpers/object-formaters";
     import { catalogue } from "../../stores/catalogue";
 
@@ -320,6 +321,17 @@
                     {#each queryItem.values as value (value.queryBindId)}
                         <span part="lens-searchbar-chip-item">
                             <span>{value.name}</span>
+                            <span part="lens-searchbar-chip-info-span">
+                                &nbsp;
+                                <InfoButtonComponent
+                                    showQuery={true}
+                                    onlyChildInfo={true}
+                                    queryItem={{ 
+                                        ...queryItem, 
+                                        values: [value],
+                                    }}
+                                />
+                            </span>
                             {#if queryItem.values.length > 1}
                                 <StoreDeleteButtonComponent
                                     itemToDelete={{

diff --git a/packages/lib/src/helpers/ast-transformer.ts b/packages/lib/src/helpers/ast-transformer.ts
@@ -26,7 +26,7 @@ export const buildAstFromQuery = (queryStore: QueryItem[][]): AstTopLayer => {
  * @param topLayerItem - the next higher layer of the query store. Used to get the key, type and system of the current item
  * @returns AstElement
  */
-const returnNestedValues = (
+export const returnNestedValues = (
     item: queryStoreItem | QueryItem[][],
     operand: "AND" | "OR" | null = null,
     topLayerItem: queryStoreItem | null = null,

diff --git a/packages/lib/src/stores/negotiate.ts b/packages/lib/src/stores/negotiate.ts
@@ -39,7 +39,7 @@ export const getHumanReadableQuery = (): string => {
  * @param humanReadableQuery string to append to
  * @returns a human readable query string
  */
-const buildHumanReadableRecursively = (
+export const buildHumanReadableRecursively = (
     queryLayer: AstElement,
     humanReadableQuery: string,
 ): string => {