Skip to content

Commit

Permalink
chore(chat): chart spec handling, code examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@ocornec
ocornec committed Nov 27, 2024
1 parent 75a3819 commit 599e57d
Show file tree
Hide file tree
Showing 8 changed files with 252 additions and 36 deletions.
24 changes: 17 additions & 7 deletions packages/web-components/src/components/chat/components/chartElement/src/chartElement.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,10 @@

.#{$clabs-prefix}--chat-chart-thumbnail-container img {
position: absolute;
block-size: calc(100% - 16px);
inline-size: calc(100% - 16px);
inset-block-start: 8px;
inset-inline-start: 8px;
object-fit: cover;
block-size: calc(100%);
inline-size: calc(100%);
inset-block-start: 0;
inset-inline-start: 0;
}

.#{$clabs-prefix}--chat-chart-options-prefade {
Expand Down Expand Up @@ -147,6 +146,7 @@
display: flex;
overflow: hidden;
box-sizing: border-box;
flex: 1;
flex-direction: column;
block-size: 100%;
inline-size: 80%;
Expand All @@ -160,10 +160,11 @@
.#{$clabs-prefix}--chat-editor-modal-section-chart {
overflow: hidden;
box-sizing: border-box;
flex: 2;
border: 1px solid $border-subtle-00;
border-radius: 8px;
block-size: 100%;
inline-size: 100%;
inline-size: 50%;
}

.#{$clabs-prefix}--chat-chart-options svg {
Expand Down Expand Up @@ -265,7 +266,7 @@
.#{$clabs-prefix}--chat-chart-fullscreen-container {
position: fixed;
z-index: 999;
display: var(--chat-chart-fullscreen-visibility, none);
display: none;
box-sizing: border-box;
padding: 64px;
background: $background;
Expand All @@ -274,13 +275,22 @@
inline-size: 100vw;
inset: 0;
}

.#{$clabs-prefix}--chat-chart-fullscreen-container-close {
position: fixed;
z-index: 9999;
inset-block-start: 20px;
inset-inline-end: 20px;
}

.#{$clabs-prefix}--chat-chart-modal-visible {
display: block;
}

.#{$clabs-prefix}--chat-chart-edit-modal-visible {
display: flex;
}

@keyframes loading-animation {
from {
background-position: 200% 0;
Expand Down
12 changes: 10 additions & 2 deletions ...s/web-components/src/components/chat/components/chartElement/src/chartElement.template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,15 +92,23 @@ export function chartElementTemplate(customElementClass) {
: html``}
${content
? html`
<div class="${clabsPrefix}--chat-chart-fullscreen-container" @wheel=
<div class="${clabsPrefix}--chat-chart-fullscreen-container ${
modalMode === 'fullscreen'
? clabsPrefix + '--chat-chart-modal-visible'
: ''
}" @wheel=
"${handleFullScreenScroll}">
<div
class="${clabsPrefix}--chat-chart-modal-container" id="${clabsPrefix}--chat-chart-fullscreen-embed-vis-${uniqueID}">
</div>
</div>
<div class="${clabsPrefix}--chat-chart-fullscreen-container">
<div class="${clabsPrefix}--chat-chart-fullscreen-container ${clabsPrefix}--chat-chart-fullscreen-container-editor ${
modalMode === 'edit'
? clabsPrefix + '--chat-chart-edit-modal-visible'
: ''
}">
${
chartLoading || errorMessage
? html`
Expand Down
91 changes: 74 additions & 17 deletions packages/web-components/src/components/chat/components/chartElement/src/chartElement.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default class chartElement extends LitElement {
* Enable user-brush selection to fetch groups of elements to make targeted query
*/
@property({ type: Boolean, attribute: 'enable-multi-selections' })
enableMultiSelections = true;
enableMultiSelections;

/**
* internal brush selection value
Expand Down Expand Up @@ -1054,6 +1054,7 @@ export default class chartElement extends LitElement {
* @param {event} event - custom codelement live change event
*/
_handleLiveCarbonEditorChange(event) {
console.log(event);
if (event?.detail?.newLineText) {
const previousData = this._visualizationSpec.data;

Expand All @@ -1068,12 +1069,12 @@ export default class chartElement extends LitElement {
//this.content = JSON.stringify(newSpec);
//this._prepareVisualization(newSpec)
this._prepareSpecification(newSpec, false, true, 0);
//this._prepareVisualization(newSpec);
this._prepareVisualization(newSpec);
this._editedSpec = newSpec;

window.setTimeout(async () => {
/*window.setTimeout(async () => {
await this._displayVisualization();
}, 200);
}, 200);*/
} catch (error) {
console.error(error);
this.chartLoading = true;
Expand Down Expand Up @@ -1309,20 +1310,11 @@ export default class chartElement extends LitElement {
if ('layer' in spec) {
this._specType = 'layered';
layeredSpec = this._prepareSpecification(spec, false, true, 0);
/*for (const [index, subSpec] of spec['layer'].entries()) {
const tempSubSpec = this._prepareSpecification(JSON.parse(JSON.stringify(subSpec)), true, false, index+1);
delete tempSubSpec['background'];
delete tempSubSpec['padding'];
layeredSpec['layer'][index] = tempSubSpec;
}*/
} else if (spec['hconcat']) {
plainSpec = this._configUpdate(spec);
} else if (spec.encoding?.facet) {
plainSpec = this._configUpdate(spec);
} else if (spec['vconcat']) {
} else if (spec.encoding?.facet || spec['hconcat'] || spec['vconcat']) {
plainSpec = this._configUpdate(spec);
} else if (spec['repeat']) {
this._specType = 'repeated';

const currentContainerWidth = this.clientWidth;
const currentContainerHeight = this.clientHeight;
repeatedSpec = this._prepareSpecification(
Expand Down Expand Up @@ -1402,7 +1394,7 @@ export default class chartElement extends LitElement {
}
}

let finalSpec;
let finalSpec = spec; // =

if (spec['layer']) {
finalSpec = layeredSpec;
Expand All @@ -1417,9 +1409,74 @@ export default class chartElement extends LitElement {
return '';
}

/** _adjustSubElements
* @param {object} spec - vega sp3cification JSON
* @param {integer} width - chart width
* @param {integer} height - chart height
*/
_adjustSubElements(spec, width, height) {
const gapSize = 8;
const legendHeight = 30;
const titleHeight = 40;
//const facetHeight = 30;
const hasTitle = !!spec.title;
const hasLegend = true;
/*spec.encoding &&
Object.values(spec.encoding).some(
(subEncoding) => subEncoding.legend !== null
);*/
if (spec.repeat) {
const itemCount = spec.repeat.row
? spec.repeat.row.length
: spec.repeat.column.length;
const subWidth = (width - gapSize * (itemCount - 1)) / itemCount;
const subHeight = height;
this._adjustSubElements(spec.spec, subWidth, subHeight);
} else if (spec.vconcat) {
const subHeight =
(height - gapSize * (spec.vconcat.length - 1)) / spec.vconcat.length;
spec.vconcat.forEach((subSpec) => {
this._adjustSubElements(subSpec, width, subHeight);
});
} else if (spec.concat) {
const rows = Math.ceil(Math.sqrt(spec.concat.length));
const columns = Math.ceil(spec.concat.length / rows);
const subWidth = (width - gapSize * (columns - 1)) / columns;
const subHeight = (height - gapSize * (rows - 1)) / rows;
spec.concat.forEach((subSpec) => {
this._adjustSubElements(subSpec, subWidth, subHeight);
});
} else if (spec.facet) {
/*const rows = Math.ceil(Math.sqrt(spec.concat.length));
const columns = Math.ceil(spec.concat.length/rows);*/
} else {
let newHeight = height;
if (hasTitle) {
newHeight -= titleHeight;
}
if (hasLegend) {
newHeight -= legendHeight;
}
spec.height = newHeight;
spec.width = width;
}
}

/**
* _adjustChart - apply changes for carbonization
* @param {object} spec - vega sp3cification JSON
*/
_adjustChart(spec) {
const globalPadding = 16;
const chartWidth = this.clientWidth - 2 * globalPadding;
const chartHeight = this.clientHeight - 2 * globalPadding;
this._adjustSubElements(spec, chartWidth, chartHeight);
return spec;
}

/**
* _configUpdate - apply changes for carbonization
* @param {object} spec - vega sepcification JSON
* @param {object} spec - vega sp3cification JSON
*/
_configUpdate(spec) {
const specCopy = this._prepareSpecification(spec, true, true, 0);
Expand Down
123 changes: 123 additions & 0 deletions packages/web-components/src/components/chat/components/chat/__stories__/chat.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1015,6 +1015,7 @@ const objectPlaygroundControls = {
'Flowers',
'Visualization',
'Cloud',
'Diagrams',
],
},
conversationJSON: {
Expand Down Expand Up @@ -1623,6 +1624,128 @@ const conversationExamples = {
index: 1,
},
],
Diagrams: [
{
text: 'Give me 3 server diagram examples for a VPC',
origin: 'user',
time: '16:56',
index: 0,
},
{
text: '',
origin: 'bot',
hasError: false,
time: '10:34',
index: 1,
elements: [
{
content: 'Here are a few example architectures available to you:\n\n',
type: 'text',
},
{
content: '<b>1. VPC landing zone - Standard variation</b>',
type: 'text',
},
{
content:
'The Standard variation of the VPC landing zone deployable architecture uses two Virtual Private Clouds (VPC), a Management VPC, and a Workload VPC to manage the environment and the deployed workload. Each VPC is a multi-zoned, multi-subnet implementation that keeps your workloads secure. A transit gateway connects the VPCs to each other and Virtual Private Endpoints are used connect to IBM Cloud services.',
type: 'text',
},
{
content:
'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/vpc.drawio.svg',
type: 'img',
},
{
content:
'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-vpc-9fc0fa64-27af-4fed-9dce-47b3640ba739-global',
type: 'link-list',
},
{
content:
'<b>2. Red Hat OpenShift Container Platform on VPC landing zone - QuickStart variation</b>',
type: 'text',
},
{
content:
'The QuickStart variation of the Red Hat OpenShift Container Platform on VPC landing zone deployable architecture creates a fully customizable Virtual Private Cloud (VPC) environment in a single region. The solution provides a single Red Hat OpenShift cluster in a secure VPC for your workloads. The QuickStart variation is designed to deploy quickly for demonstration and development.\n',
type: 'text',
},
{
content:
'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/roks-quickstart.drawio.svg',
type: 'img',
},
{
content:
'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-ocp-95fccffc-ae3b-42df-b6d9-80be5914d852-global',
type: 'link-list',
},
{
content:
'<b>3. Red Hat OpenShift Container Platform on VPC landing zone</b>',
type: 'text',
},
{
content:
'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/roks.drawio.svg',
type: 'img',
},
{
content:
'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-ocp-95fccffc-ae3b-42df-b6d9-80be5914d852-global',
type: 'link-list',
},
{
content:
'Select an option to start from and begin editing your server architecture.',
type: 'text',
},
],
},
{
text: 'Give me a VSi variant',
origin: 'user',
time: '16:59',
index: 0,
},
{
text: '',
origin: 'bot',
hasError: false,
time: '10:34',
index: 1,
elements: [
{
content: 'Here is a template suited to you needs:\n',
type: 'text',
},
{
content: '<b>VSI on VPC landing zone - Standard variation</b>',
type: 'text',
},
{
content:
'The Standard variation of the VSI on VPC landing zone deployable architecture is based on the IBM Cloud for Financial Services reference architecture. The architecture creates a customizable and secure infrastructure, with virtual servers, to run your workloads with a Virtual Private Cloud (VPC) in multizone regions.',
type: 'text',
},
{
content:
'https://github.com/terraform-ibm-modules/terraform-ibm-landing-zone/raw/main/reference-architectures/vsi-vsi.drawio.svg',
type: 'img',
},
{
content:
'https://cloud.ibm.com/catalog/architecture/deploy-arch-ibm-slz-vsi-ef663980-4c71-4fac-af4f-4a510a9bcf68-global',
type: 'link-list',
},
{
content: 'Would you like to customize this configuration?',
type: 'text',
},
],
},
],
Agents: [
{
text: 'Find me a dataset about the weather in Ohio circa 2015',
Expand Down
Loading

0 comments on commit 599e57d

Please sign in to comment.