chore(chat): Core updates

.github/CODEOWNERS

@@ -14,7 +14,10 @@
 # Other packages
 /packages/react/src/components/AnimatedHeader/   @carbon-design-system/animated-header-devs
 /packages/react/src/components/Processing/       @carbon-design-system/processing-devs
+<<<<<<< Updated upstream
 /packages/react/src/components/SplitPanel/       @carbon-design-system/split-panel-devs
+=======
+>>>>>>> Stashed changes
 /packages/react/src/components/TextHighlighter/  @carbon-design-system/text-highlighter-devs
 /packages/react/src/components/ThemeSettings/    @carbon-design-system/theme-settings-devs
 

.storybook/welcome/welcome.scss

@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/colors';
+@include type.type-style('productive-heading-07');
 
 .welcome__container {
   position: fixed;
@@ -13,8 +14,6 @@
 }
 
 .welcome__heading {
-  @include type.type-style('productive-heading-07');
-
   color: colors.$gray-80;
 }
 

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

package.json

@@ -72,5 +72,5 @@
     "stylelint-config-carbon": "1.17.0",
     "yargs": "^17.7.2"
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.9.2"
 }

packages/web-components/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@carbon/styles": "^1.70.0",
     "lit": "^3.2.1",
+    "rimraf": "^6.0.1",
     "tslib": "^2.8.1"
   },
   "devDependencies": {

packages/web-components/src/components/chat/components/chartElement/__stories__/chartElement.stories.ts → packages/web-components/src/components/chat/components/chartElement/_stories-dont-show_/chartElement.stories.ts

@@ -137,6 +137,17 @@ const controls = {
   },
 };
 
+export const DefaultTest = {
+  /**
+   * Renders the template for Showcase Storybook
+   * @returns {TemplateResult<1>}
+   */
+  render: () => html` <clabs-chat-chart
+    container-height="1600px"
+    content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/editor/data/weather.csv"},"transform":[{"calculate":"year(datum.date)","as":"year"},{"fold":["temp_max","temp_min"],"as":["type","temperature"]},{"calculate":"[\'Winter\',\'Winter\',\'Spring\',\'Spring\',\'Spring\',\'Summer\',\'Summer\',\'Summer\',\'Fall\',\'Fall\',\'Fall\',\'Winter\'][month(datum.date)]","as":"season"},{"filter":"datum.year >= 2012 && datum.year <= 2015"}],"facet":{"row":{"field":"year","type":"ordinal"}},"spec":{"vconcat":[{"hconcat":[{"mark":"rect","width":600,"height":200,"encoding":{"y":{"field":"date","timeUnit":"date","type":"ordinal","title":"Day","axis":{"labelAngle":0,"format":"%e"}},"x":{"field":"date","timeUnit":"month","type":"ordinal","title":"Month"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}},{"mark":"point","encoding":{"x":{"field":"wind","type":"quantitative"},"y":{"field":"precipitation","type":"quantitative"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}}]},{"repeat":{"column":["precipitation","wind","temperature"]},"spec":{"vconcat":[{"layer":[{"mark":"boxplot","encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal","title":"Month"},"y":{"field":{"repeat":"column"},"aggregate":"sum","type":"quantitative"},"y2":{"field":"temp_min"},"color":{"field":"season","type":"nominal"}}},{"mark":{"type":"point","color":"black","strokeWidth":2},"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"}}}]},{"layer":[{"mark":"bar","height":60,"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"},"color":{"field":"season","type":"nominal"}}},{"mark":{"type":"line","color":"black","strokeWidth":2},"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"}}}]}]}}],"resolve":{"scale":{"y":"independent"}}}}'}">
+  </clabs-chat-chart>`,
+};
+
 export const Default = {
   /**
    * Renders the template for Showcase Storybook
@@ -228,7 +239,6 @@ export const Showcase = {
     <h4>Faceted year-filtered h-concatenated repeating month-filtered chart</h4>
     <clabs-chat-chart
       theme="${chartTheme}"
-      container-height="2600px"
       content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"url":"https://vega.github.io/editor/data/weather.csv"},"transform":[{"calculate":"year(datum.date)","as":"year"},{"fold":["temp_max","temp_min"],"as":["type","temperature"]},{"calculate":"[\'Winter\',\'Winter\',\'Spring\',\'Spring\',\'Spring\',\'Summer\',\'Summer\',\'Summer\',\'Fall\',\'Fall\',\'Fall\',\'Winter\'][month(datum.date)]","as":"season"},{"filter":"datum.year >= 2012 && datum.year <= 2015"}],"facet":{"row":{"field":"year","type":"ordinal"}},"spec":{"vconcat":[{"hconcat":[{"mark":"rect","width":600,"height":200,"encoding":{"y":{"field":"date","timeUnit":"date","type":"ordinal","title":"Day","axis":{"labelAngle":0,"format":"%e"}},"x":{"field":"date","timeUnit":"month","type":"ordinal","title":"Month"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}},{"mark":"point","encoding":{"x":{"field":"wind","type":"quantitative"},"y":{"field":"precipitation","type":"quantitative"},"color":{"field":"temp_max","aggregate":"max","type":"quantitative","legend":{"title":null}}}}]},{"repeat":{"column":["precipitation","wind","temperature"]},"spec":{"vconcat":[{"layer":[{"mark":"boxplot","encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal","title":"Month"},"y":{"field":{"repeat":"column"},"aggregate":"sum","type":"quantitative"},"y2":{"field":"temp_min"},"color":{"field":"season","type":"nominal"}}},{"mark":{"type":"point","color":"black","strokeWidth":2},"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"}}}]},{"layer":[{"mark":"bar","height":60,"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"},"color":{"field":"season","type":"nominal"}}},{"mark":{"type":"line","color":"black","strokeWidth":2},"encoding":{"x":{"timeUnit":"month","field":"date","type":"temporal"},"y":{"aggregate":"mean","field":{"repeat":"column"},"type":"quantitative"}}}]}]}}],"resolve":{"scale":{"y":"independent"}}}}'}">
     </clabs-chat-chart>
     <br />
@@ -248,6 +258,15 @@ export const Showcase = {
       container-height="400px">
     </clabs-chat-chart>
     <br />
+    <h4>Candle stick chart</h4>
+    <br />
+    <clabs-chat-chart
+      theme="${chartTheme}"
+      content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":400,"description":"A candlestick chart","data":{"url":"https://vega.github.io/vega-lite/examples/data/ohlc.json"},"encoding":{"x":{"field":"date","type":"temporal","title":"Date in 2009","axis":{"format":"%m/%d","labelAngle":-45,"title":"Date in 2009"}},"y":{"type":"quantitative","scale":{"zero":false},"axis":{"title":"Price"}},"color":{"condition":{"test":"datum.open < datum.close","value":"#24a148"},"value":"#fa4d56"}},"layer":[{"mark":"rule","encoding":{"y":{"field":"low"},"y2":{"field":"high"}}},{"mark":"bar","encoding":{"y":{"field":"open"},"y2":{"field":"close"}}}]}'}"
+      container-height="350px">
+    </clabs-chat-chart>
+    <br />
+    <br />
     <h4>Line Chart</h4>
     <br />
     <clabs-chat-chart
@@ -323,11 +342,12 @@ export const Showcase = {
       container-height="500px">
     </clabs-chat-chart>
     <br />
-    <h4>Orthographic world map</h4>
+    <br />
+    <h4>Radar Plot</h4>
     <br />
     <clabs-chat-chart
       theme="${chartTheme}"
-      content="${'{"$schema": "https://vega.github.io/schema/vega-lite/v5.json","width": 500,"height": 300,"params": [{"name": "projection","value": "orthographic"}],"data": {"url": "https://vega.github.io/vega-lite/examples/data/world-110m.json","format": {"type": "topojson", "feature": "countries"}},"projection": {"type": {"expr": "projection"}},"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "gray"}}'}"
+      content="${'{"$schema":"https://vega.github.io/schema/vega/v5.json","description":"A radar chart example, showing multiple dimensions in a radial layout.","width":400,"height":400,"padding":40,"autosize":{"type":"none","contains":"padding"},"signals":[{"name":"radius","update":"width / 2"}],"data":[{"name":"table","values":[{"key":"key-0","value":19,"category":0},{"key":"key-1","value":22,"category":0},{"key":"key-2","value":14,"category":0},{"key":"key-3","value":38,"category":0},{"key":"key-4","value":23,"category":0},{"key":"key-5","value":5,"category":0},{"key":"key-6","value":27,"category":0},{"key":"key-0","value":13,"category":1},{"key":"key-1","value":12,"category":1},{"key":"key-2","value":42,"category":1},{"key":"key-3","value":13,"category":1},{"key":"key-4","value":6,"category":1},{"key":"key-5","value":15,"category":1},{"key":"key-6","value":8,"category":1}]},{"name":"keys","source":"table","transform":[{"type":"aggregate","groupby":["key"]}]}],"scales":[{"name":"angular","type":"point","range":{"signal":"[-PI, PI]"},"padding":0.5,"domain":{"data":"table","field":"key"}},{"name":"radial","type":"linear","range":{"signal":"[0, radius]"},"zero":true,"nice":false,"domain":{"data":"table","field":"value"},"domainMin":0},{"name":"color","type":"ordinal","domain":{"data":"table","field":"category"},"range":{"scheme":"category10"}}],"encode":{"enter":{"x":{"signal":"radius"},"y":{"signal":"radius"}}},"marks":[{"type":"group","name":"categories","zindex":1,"from":{"facet":{"data":"table","name":"facet","groupby":["category"]}},"marks":[{"type":"line","name":"category-line","from":{"data":"facet"},"encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"signal":"scale(\'radial\', datum.value) * cos(scale(\'angular\', datum.key))"},"y":{"signal":"scale(\'radial\', datum.value) * sin(scale(\'angular\', datum.key))"},"stroke":{"scale":"color","field":"category"},"strokeWidth":{"value":1},"fill":{"scale":"color","field":"category"},"fillOpacity":{"value":0.1}}}},{"type":"text","name":"value-text","from":{"data":"category-line"},"encode":{"enter":{"x":{"signal":"datum.x"},"y":{"signal":"datum.y"},"text":{"signal":"datum.datum.value"},"align":{"value":"center"},"baseline":{"value":"middle"},"fill":{"value":"black"}}}}]},{"type":"rule","name":"radial-grid","from":{"data":"keys"},"zindex":0,"encode":{"enter":{"x":{"value":0},"y":{"value":0},"x2":{"signal":"radius * cos(scale(\'angular\', datum.key))"},"y2":{"signal":"radius * sin(scale(\'angular\', datum.key))"},"stroke":{"value":"lightgray"},"strokeWidth":{"value":1}}}},{"type":"text","name":"key-label","from":{"data":"keys"},"zindex":1,"encode":{"enter":{"x":{"signal":"(radius + 5) * cos(scale(\'angular\', datum.key))"},"y":{"signal":"(radius + 5) * sin(scale(\'angular\', datum.key))"},"text":{"field":"key"},"align":[{"test":"abs(scale(\'angular\', datum.key)) > PI / 2","value":"right"},{"value":"left"}],"baseline":[{"test":"scale(\'angular\', datum.key) > 0","value":"top"},{"test":"scale(\'angular\', datum.key) == 0","value":"middle"},{"value":"bottom"}],"fill":{"value":"black"},"fontWeight":{"value":"bold"}}}},{"type":"line","name":"outer-line","from":{"data":"radial-grid"},"encode":{"enter":{"interpolate":{"value":"linear-closed"},"x":{"field":"x2"},"y":{"field":"y2"},"stroke":{"value":"lightgray"},"strokeWidth":{"value":1}}}}]}'}"
       container-height="450px">
     </clabs-chat-chart>
     <br />
@@ -342,6 +362,7 @@ export const Showcase = {
       container-height="650px">
     </clabs-chat-chart>
     <br />
+
     <h4>Multi histogram</h4>
     <br />
     <clabs-chat-chart
@@ -358,7 +379,8 @@ export const Showcase = {
     <clabs-chat-chart
       theme="${chartTheme}"
       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="450px">
+      container-height="450px"
+      container-width="450px">
     </clabs-chat-chart>
     <br />
     <h4>Parallel Coordinates</h4>
@@ -377,12 +399,13 @@ export const Showcase = {
       container-height="350px">
     </clabs-chat-chart>
     <br />
-    <h4>Candle stick chart</h4>
+    <br />
+    <h4>Orthographic world map</h4>
     <br />
     <clabs-chat-chart
       theme="${chartTheme}"
-      content="${'{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","width":400,"description":"A candlestick chart","data":{"url":"https://vega.github.io/vega-lite/examples/data/ohlc.json"},"encoding":{"x":{"field":"date","type":"temporal","title":"Date in 2009","axis":{"format":"%m/%d","labelAngle":-45,"title":"Date in 2009"}},"y":{"type":"quantitative","scale":{"zero":false},"axis":{"title":"Price"}},"color":{"condition":{"test":"datum.open < datum.close","value":"#24a148"},"value":"#fa4d56"}},"layer":[{"mark":"rule","encoding":{"y":{"field":"low"},"y2":{"field":"high"}}},{"mark":"bar","encoding":{"y":{"field":"open"},"y2":{"field":"close"}}}]}'}"
-      container-height="350px">
+      content="${'{"$schema": "https://vega.github.io/schema/vega-lite/v5.json","width": 500,"height": 300,"params": [{"name": "projection","value": "orthographic"}],"data": {"url": "https://vega.github.io/vega-lite/examples/data/world-110m.json","format": {"type": "topojson", "feature": "countries"}},"projection": {"type": {"expr": "projection"}},"mark": {"type": "geoshape", "fill": "lightgray", "stroke": "gray"}}'}"
+      container-height="450px">
     </clabs-chat-chart>
     <br />`,
 };

packages/web-components/src/components/chat/components/chartElement/__stories__/docs.mdx → packages/web-components/src/components/chat/components/chartElement/_stories-dont-show_/docs.mdx

@@ -1,4 +1,4 @@
-import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypes, Markdown, Meta, Canvas } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../../../../globals/internal/storybook-cdn';
 import * as ChartElementStories from './chartElement.stories';
 import packageJson from '../../../package.json';
@@ -101,9 +101,9 @@ Here's a quick example to get you started.
       </td>
     </tr>
     <tr>
-      <td>`debug`</td>
+      <td>`debug-mode`</td>
       <td>boolean</td>
-      <td>false</td>
+      <td>true</td>
       <td>
         shows specification editor button and displays all errors in component
         when in error mode, otherwise show: Chart failed to render, see console
@@ -221,6 +221,54 @@ Here's a quick example to get you started.
         and this will false. If streaming: raw data is incrementally displayed
         until complete and rendered
       </td>
+    </tr>
+         <tr>
+      <td>`selected`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       add selection border to chart container
+      </td>
+    </tr>
+     <tr>
+      <td>`selectable`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose if chart container is hoverable and selectable, append border on click
+      </td>
+    </tr>
+     <tr>
+      <td>`use-vega-carbon-theme`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose to override carbonification process and opt for simple Carbon themes (based on auto-detected carbon theme). Warning: these are sinplified and may not cover most edge cases.
+      </td>
+    </tr>
+     <tr>
+      <td>`enable-context`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       show button that triggers chart selection event, meant to update chat context
+      </td>
+    </tr>
+     <tr>
+      <td>`streaming`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       enable streaming animation capabilities for incomplete content
+      </td>
+    </tr>
+     <tr>
+      <td>`thumbnail-width`</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+       choose maximum width of thumbnail object
+      </td>
     </tr>
   </tbody>
 </table>
@@ -427,3 +475,7 @@ charts. Touch/mobile features have not been tested and attributes are still
 subject to change. Features such as legend interactions to filter out data,
 viewing the source data as a table, locale support, and are not currently
 implemented as well. (subject to change)
+
+
+## Showcase
+<Canvas of={ChartElementStories.Showcase} />