chore(chat): Code functionailty fixes, Chart updates, Formula render fix

packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts

@@ -184,6 +184,18 @@ export const Thumbnails = {
         container-height="156px"
         container-width="156px">
       </clabs-chat-chart>
+      <clabs-chat-chart
+        thumbnail
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":700,"height":500,"view":{"stroke":"transparent"},"layer":[{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonBoroughs.json","format":{"type":"topojson","feature":"boroughs"}},"mark":{"type":"geoshape","stroke":"white","strokeWidth":2},"encoding":{"color":{"value":"#eee"}}},{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonCentroids.json","format":{"type":"json"}},"transform":[{"calculate":"indexof (datum.name, \' \') > 0  ? substring(datum.name,0,indexof(datum.name, \' \')) : datum.name","as":"bLabel"}],"mark":"text","encoding":{"longitude":{"field":"cx","type":"quantitative"},"latitude":{"field":"cy","type":"quantitative"},"text":{"field":"bLabel","type":"nominal"},"size":{"value":8},"opacity":{"value":0.6}}},{"data":{"url":"https://vega.github.io/vega-lite/examples/data/londonTubeLines.json","format":{"type":"topojson","feature":"line"}},"mark":{"type":"geoshape","filled":false,"strokeWidth":2},"encoding":{"color":{"field":"id","type":"nominal","legend":{"title":null,"orient":"bottom-right","offset":0},"scale":{"domain":["Bakerloo","Central","Circle","District","DLR","Hammersmith & City","Jubilee","Metropolitan","Northern","Piccadilly","Victoria","Waterloo & City"],"range":["rgb(137,78,36)","rgb(220,36,30)","rgb(255,206,0)","rgb(1,114,41)","rgb(0,175,173)","rgb(215,153,175)","rgb(106,114,120)","rgb(114,17,84)","rgb(0,0,0)","rgb(0,24,168)","rgb(0,160,226)","rgb(106,187,170)"]}}}}]}'}"
+        container-height="156px"
+        container-width="156px">
+      </clabs-chat-chart>
+      <clabs-chat-chart
+        thumbnail
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":{"row":["Horsepower","Acceleration","Miles_per_Gallon"],"column":["Miles_per_Gallon","Acceleration","Horsepower"]},"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"point","params":[{"name":"brush","select":{"type":"interval","resolve":"union","on":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","translate":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![event.shiftKey]"}},{"name":"grid","select":{"type":"interval","resolve":"global","translate":"[pointerdown[!event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![!event.shiftKey]"},"bind":"scales"}],"encoding":{"x":{"field":{"repeat":"column"},"type":"quantitative"},"y":{"field":{"repeat":"row"},"type":"quantitative","axis":{"minExtent":30}},"color":{"condition":{"param":"brush","field":"Origin","type":"nominal"},"value":"grey"}}}}'}"
+        container-height="156px"
+        container-width="156px">
+      </clabs-chat-chart>
     </div>
   `,
 };
@@ -404,6 +416,38 @@ export const FacetingTest = {
               content="${JSON.stringify(item.spec)}">
             </clabs-chat-chart>`
       )}
+      <h4>Interactive multi-scatter plot</h4>
+      <br />
+      <clabs-chat-chart
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":{"row":["Horsepower","Acceleration","Miles_per_Gallon"],"column":["Miles_per_Gallon","Acceleration","Horsepower"]},"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"point","params":[{"name":"brush","select":{"type":"interval","resolve":"union","on":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","translate":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![event.shiftKey]"}},{"name":"grid","select":{"type":"interval","resolve":"global","translate":"[pointerdown[!event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![!event.shiftKey]"},"bind":"scales"}],"encoding":{"x":{"field":{"repeat":"column"},"type":"quantitative"},"y":{"field":{"repeat":"row"},"type":"quantitative","axis":{"minExtent":30}},"color":{"condition":{"param":"brush","field":"Origin","type":"nominal"},"value":"grey"}}}}'}"
+        container-height="450px"
+        container-width="600px">
+      </clabs-chat-chart>
+      <br />
+      <clabs-chat-chart
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":{"row":["Horsepower","Acceleration","Miles_per_Gallon"],"column":["Miles_per_Gallon","Acceleration","Horsepower"]},"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"point","params":[{"name":"brush","select":{"type":"interval","resolve":"union","on":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","translate":"[pointerdown[event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![event.shiftKey]"}},{"name":"grid","select":{"type":"interval","resolve":"global","translate":"[pointerdown[!event.shiftKey], window:pointerup] > window:pointermove!","zoom":"wheel![!event.shiftKey]"},"bind":"scales"}],"encoding":{"x":{"field":{"repeat":"column"},"type":"quantitative"},"y":{"field":{"repeat":"row"},"type":"quantitative","axis":{"minExtent":30}},"color":{"condition":{"param":"brush","field":"Origin","type":"nominal"},"value":"grey"}}}}'}"
+        container-height="950px">
+      </clabs-chat-chart>
+      <br />
+      <h4>Multi histogram</h4>
+      <br />
+      <clabs-chat-chart
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":["Horsepower","Miles_per_Gallon","Acceleration","Displacement"],"columns":2,"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"bar","encoding":{"x":{"field":{"repeat":"repeat"},"bin":true},"y":{"aggregate":"count"},"color":{"field":"Origin"}}}}'}"
+        container-height="450px"
+        container-width="800px">
+      </clabs-chat-chart>
+      <br />
+      <clabs-chat-chart
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":["Horsepower","Miles_per_Gallon","Acceleration","Displacement"],"columns":2,"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"bar","encoding":{"x":{"field":{"repeat":"repeat"},"bin":true},"y":{"aggregate":"count"},"color":{"field":"Origin"}}}}'}"
+        container-height="600px"
+        container-width="400px">
+      </clabs-chat-chart>
+      <br />
+      <clabs-chat-chart
+        content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","repeat":["Horsepower","Miles_per_Gallon","Acceleration","Displacement"],"columns":2,"spec":{"data":{"url":"https://vega.github.io/vega-lite/examples/data/cars.json"},"mark":"bar","encoding":{"x":{"field":{"repeat":"repeat"},"bin":true},"y":{"aggregate":"count"},"color":{"field":"Origin"}}}}'}"
+        container-height="1000px">
+      </clabs-chat-chart>
+      <br />
     `,
 };
 

packages/web-components/src/components/chat/components/chartElement/__stories__/examples2.json

@@ -806,7 +806,7 @@
     "result": {
       "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
       "data": {
-        "url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"
+        "url": "https://vega.github.io/editor/data/weather.csv"
       },
       "title": "Daily Max Temperatures (C) in Cleveland, OH",
       "config": {

packages/web-components/src/components/chat/components/chartElement/__stories__/examples3.json

@@ -1,4 +1,36 @@
 [   
+    {"name": "concat",
+    "spec":{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
+  "data": {"url": "https://vega.github.io/editor/data/weather.csv"},
+  "transform": [{"filter": "datum.location === 'Seattle'"}],
+  "columns": 2,
+  "concat": [
+    {
+      "mark": "bar",
+      "encoding": {
+        "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
+        "y": {"aggregate": "mean", "field": "precipitation"}
+      }
+    },
+    {
+      "mark": "bar",
+      "encoding": {
+        "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
+        "y": {"aggregate": "median", "field": "precipitation"}
+      }
+    },
+    {
+      "mark": "point",
+      "encoding": {
+        "x": {"field": "temp_min", "bin": true},
+        "y": {"field": "temp_max", "bin": true},
+        "size": {"aggregate": "count"}
+      }
+    }
+  ]
+}},
     {
         "name": "trellis",
         "spec": {
@@ -439,7 +471,7 @@
             "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
             "description": "A population pyramid for the US in 2000.",
             "data": {
-                "url": "https://vega.github.io/vega-lite/data/population.json"
+                "url": "https://vega.github.io/editor/data/population.json"
             },
             "transform": [
                 {
@@ -655,36 +687,5 @@
     }
   }
 }
-},{"name": "concat",
-    "spec":{
-  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
-  "data": {"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
-  "transform": [{"filter": "datum.location === 'Seattle'"}],
-  "columns": 2,
-  "concat": [
-    {
-      "mark": "bar",
-      "encoding": {
-        "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
-        "y": {"aggregate": "mean", "field": "precipitation"}
-      }
-    },
-    {
-      "mark": "bar",
-      "encoding": {
-        "x": {"timeUnit": "month", "field": "date", "type": "ordinal"},
-        "y": {"aggregate": "median", "field": "precipitation"}
-      }
-    },
-    {
-      "mark": "point",
-      "encoding": {
-        "x": {"field": "temp_min", "bin": true},
-        "y": {"field": "temp_max", "bin": true},
-        "size": {"aggregate": "count"}
-      }
-    }
-  ]
-}}
+}
 ]

packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss

@@ -15,9 +15,9 @@
   overflow: hidden;
   box-sizing: border-box;
   padding: 0;
-  border: 1px solid $border-subtle-00;
+  border: 1px solid var(--chat-chart-border-color, $border-subtle-00);
   border-radius: 8px;
-  background: $background;
+  background: $text-inverse;
   block-size: var(--chat-chart-element-height, '320px');
   font-family: 'IBM Plex Sans Condensed', sans-serif;
   inline-size: var(--chat-chart-element-width, '100%');
@@ -32,6 +32,10 @@
     inline-size: 100%;
   }
 
+  .#{$clabs-prefix}--chat-chart-container-selected {
+    border: 2px solid $highlight;
+  }
+
   .#{$clabs-prefix}--chat-chart-options {
     position: absolute;
     display: flex;
@@ -66,8 +70,8 @@
 
   .#{$clabs-prefix}--chat-chart-thumbnail-container img {
     position: absolute;
-    block-size: calc(100%);
-    inline-size: calc(100%);
+    block-size: 100%;
+    inline-size: 100%;
     inset-block-start: 0;
     inset-inline-start: 0;
   }

packages/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts

@@ -72,6 +72,7 @@ export function chartElementTemplate(customElementClass) {
     _chartClicked: chartClicked,
     exportedImageURL,
     _handleFullScreenScroll: handleFullScreenScroll,
+    selected,
   } = customElementClass;
 
   return html`
@@ -207,7 +208,9 @@ export function chartElementTemplate(customElementClass) {
           ${_visualizationSpec && !errorMessage && !streaming
             ? html` <div
                 @click="${chartClicked}"
-                class="${clabsPrefix}--chat-chart-container"
+                class="${clabsPrefix}--chat-chart-container${selected
+                  ? ' ' + clabsPrefix + '--chat-chart-container-selected'
+                  : ''}"
                 id="${clabsPrefix}--chat-chart-embed-vis-${uniqueID}"></div>`
             : html` <div class="${clabsPrefix}--chat-chart-container">
                 <div class="${clabsPrefix}--chat-chart-loading-container">

packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts

@@ -32,6 +32,18 @@ export default class chartElement extends LitElement {
   @property({ type: Boolean, attribute: 'debug-mode' })
   debugMode = true;
 
+  /**
+   * selected- highlight if attr is chosen
+   */
+  @property({ type: Boolean, attribute: 'selected' })
+  selected;
+
+  /**
+   * selectable- enable highlight if clicked
+   */
+  @property({ type: Boolean, attribute: 'selectable' })
+  selectable = true;
+
   /**
    * Event listener to check if parent visibility changed
    */
@@ -270,6 +282,18 @@ export default class chartElement extends LitElement {
   @state()
   isHovered = false;
 
+  /**
+   * cellHeight - for multi charts, record max cell size
+   */
+  @state()
+  cellHeight;
+
+  /**
+   * cellWidth - for multi charts, record max cell size
+   */
+  @state()
+  cellWidth;
+
   /**
    * _latestError -  Vega erro message to display
    */
@@ -282,6 +306,12 @@ export default class chartElement extends LitElement {
   @state()
   _specType;
 
+  /**
+   * selected - show highlight when chart clicked if selectable enabled
+   */
+  @state()
+  _isSelected = false;
+
   /** detect when component is rendered to process visualization specification object
    */
   firstUpdated() {
@@ -560,9 +590,10 @@ export default class chartElement extends LitElement {
       if (this._specType === 'plain' || this._specType === 'layered') {
         chosenSpec.height = 'container';
         chosenSpec.width = 'container';
+      } else {
+        chosenSpec.autosize = { resize: false };
       }
 
-      chosenSpec.autosize = { resize: false };
       if (this.thumbNail) {
         chosenSpec.width = 400;
         chosenSpec.height = 300;
@@ -1295,6 +1326,8 @@ export default class chartElement extends LitElement {
     let plainSpec;
     let subChartWidth;
     let subChartHeight;
+    this.cellWidth = null;
+    this.cellHeight = null;
 
     if ('layer' in spec) {
       this._specType = 'layered';
@@ -1354,9 +1387,9 @@ export default class chartElement extends LitElement {
       if (currentContainerWidth) {
         let rowCount;
         let columnCount;
-        const legendHeight = 16 * 3;
+        const legendHeight = 16 + 16 * Math.floor(currentContainerWidth / 130);
         const paddingOffset = { vertical: 0, horizontal: 0 };
-        const gapSize = 17;
+        const gapSize = 22;
 
         if (spec.repeat) {
           if (Array.isArray(repeatedSpec['repeat'])) {
@@ -1414,6 +1447,9 @@ export default class chartElement extends LitElement {
             (rowCount + 1) * gapSize) /
             rowCount -
           42;
+
+        this.cellWidth = subChartWidth;
+        this.cellHeight = subChartHeight;
       }
 
       if (spec.repeat) {
@@ -1432,6 +1468,8 @@ export default class chartElement extends LitElement {
         if (subChartHeight) {
           repeatedSpec['spec']['height'] = subChartHeight;
         }
+        this.cellWidth = subChartWidth;
+        this.cellHeight = subChartHeight;
       } else if (spec.vconcat || spec.hconcat || spec.concat) {
         for (let l = 0; l < repeatedSpec[this._specType].length; l++) {
           repeatedSpec[this._specType][l] = this._prepareSpecification(
@@ -1440,7 +1478,9 @@ export default class chartElement extends LitElement {
             true,
             0
           );
-          if (subChartWidth) {
+          if (repeatedSpec[this._specType][l].mark?.type === 'text') {
+            repeatedSpec[this._specType][l]['width'] = 40;
+          } else if (subChartWidth) {
             repeatedSpec[this._specType][l]['width'] = subChartWidth;
 
             //repeatedSpec[this._specType][l].config.legend.columns =calcColumn;
@@ -1453,6 +1493,8 @@ export default class chartElement extends LitElement {
         repeatedSpec['width'] = subChartWidth;
         repeatedSpec['height'] = subChartHeight;
       }
+      this.cellWidth = subChartWidth;
+      this.cellHeight = subChartHeight;
     } else {
       this._specType = 'plain';
       if (!spec['data']) {
@@ -2005,8 +2047,8 @@ export default class chartElement extends LitElement {
             title: null,
             symbolType: 'square',
             symbolLimit: 30,
-            labelLimit: 60,
-            columns: { signal: 'floor(width / 70)' },
+            labelLimit: 120,
+            columns: { signal: 'floor(width / 130)' },
             orient: 'bottom',
             symbolOpacity: 1,
             direction: 'horizontal',
@@ -2027,7 +2069,12 @@ export default class chartElement extends LitElement {
           },
         };
 
-        spec['config'].axis.titleLimit = 100; //Math.min(spec.height,spec.width)
+        if (this.cellHeight && this.cellWidth) {
+          spec['config'].axis.titleLimit = Math.min(
+            this.cellHeight,
+            this.cellWidth
+          );
+        }
       }
 
       this._authorizeSingleSelection = false;
@@ -2268,8 +2315,13 @@ export default class chartElement extends LitElement {
     }
 
     if (this._authorizeMultiSelection) {
-      const brushInteraction: { name: string; select: object } = {
+      const brushInteraction: {
+        name: string;
+        resolve: string;
+        select: object;
+      } = {
         name: 'brush',
+        resolve: 'union',
         select: { type: 'interval' },
       };
       params.push(brushInteraction);

packages/web-components/src/components/chat/components/chat/src/chat.template.ts

@@ -33,6 +33,7 @@ export function chatTemplate(customElementClass) {
     agentName,
     loading,
     closed,
+    forceAutoUpdate,
     maxCharacterCount,
     disableHeaderMenu,
     disableHeaderButtons,
@@ -151,6 +152,7 @@ export function chatTemplate(customElementClass) {
                 .messages="${messages}"
                 user-name="${userName}"
                 agent-name="${agentName}"
+                ?force-scroll-down="${forceAutoUpdate}"
                 ?docking-enabled="${enableDocking}"
                 ?loading="${queryInProgress}"
                 ?stream-responses="${streamResponses}"

packages/web-components/src/components/chat/components/chat/src/chat.ts

@@ -57,6 +57,12 @@ export default class CLABSChat extends LitElement {
   @property({ type: Boolean, attribute: 'auto-update', reflect: true })
   autoUpdate;
 
+  /**
+   * force-auto-update - force scroll down no matter what
+   */
+  @property({ type: Boolean, attribute: 'force-auto-update' })
+  forceAutoUpdate;
+
   /**
    * show launcher when closed
    */