diff --git a/packages/extension-sdk/src/connect/types.ts b/packages/extension-sdk/src/connect/types.ts
index b658a71ca..33a5a8a33 100644
--- a/packages/extension-sdk/src/connect/types.ts
+++ b/packages/extension-sdk/src/connect/types.ts
@@ -124,7 +124,7 @@ export enum ExtensionRequestType {
*/
RENDERED = 'RENDERED',
/**
- * Visualization configuration data
+ * Set up the visConfig options that should be present in an explore
*/
VIS_DEFAULT_CONFIG = 'VIS_DEFAULT_CONFIG',
/**
diff --git a/packages/extension-sdk/src/connect/visualization/types.ts b/packages/extension-sdk/src/connect/visualization/types.ts
index f09f69282..6dc4595ee 100644
--- a/packages/extension-sdk/src/connect/visualization/types.ts
+++ b/packages/extension-sdk/src/connect/visualization/types.ts
@@ -119,5 +119,38 @@ export interface VisualizationSDK {
visConfig: VisualizationConfig
queryResponse: QueryResponse
updateVisData: (rawVisData: RawVisualizationData) => void
- configureVisualization: (options: RawVisConfig) => void
+ configureVisualization: (options: VisOptions) => void
+ setVisConfig: (config: RawVisConfig) => void
+}
+
+export interface VisOptionValue {
+ [label: string]: string
+}
+
+export interface VisOption {
+ type: string
+ values?: VisOptionValue[]
+ display?: string
+ default?: any
+ label?: string
+ section?: string
+ placeholder?: string
+ display_size?: 'half' | 'third' | 'normal'
+ order?: number
+ hidden?: (setOptions: RawVisConfig) => boolean
+ disabledReason?: (
+ setOptions: RawVisConfig,
+ queryResponse: QueryResponse
+ ) => string | null
+ min?: number
+ max?: number
+ required?: boolean
+ words?: VisOptionValue[]
+ supports?: string[]
+ color_application?: string
+ sublabel?: string
+}
+
+export interface VisOptions {
+ [optionName: string]: VisOption
}
diff --git a/packages/extension-sdk/src/connect/visualization/visualization_sdk.spec.ts b/packages/extension-sdk/src/connect/visualization/visualization_sdk.spec.ts
index c113634bd..085871753 100644
--- a/packages/extension-sdk/src/connect/visualization/visualization_sdk.spec.ts
+++ b/packages/extension-sdk/src/connect/visualization/visualization_sdk.spec.ts
@@ -153,7 +153,7 @@ describe('VisualizationSDK', () => {
expect(sdk.visualizationData).toBeUndefined()
})
- it('updates visConfig remotely and queryResponse locally when provided', () => {
+ it('updates visConfig and queryResponse locally when provided', () => {
const sdk = new VisualizationSDKImpl(api)
expect(sdk.visualizationData).toBeUndefined()
const visConfig: RawVisConfig = {
@@ -183,9 +183,6 @@ describe('VisualizationSDK', () => {
sdk.updateVisData(visualizationData)
expect(sdk.visualizationData).toEqual(visualizationData)
expect(sdk.visConfig.visConfig).toEqual(visConfig)
- expect(api.send).toHaveBeenCalledWith('VIS_CONFIG_UPDATE', {
- updatedConfig: visConfig,
- })
const updatedVisConfig = {
...visConfig,
@@ -199,9 +196,5 @@ describe('VisualizationSDK', () => {
sdk.updateVisData(updatedVisualizationData)
expect(sdk.visualizationData).toEqual(updatedVisualizationData)
expect(sdk.visConfig.visConfig).toEqual(updatedVisConfig)
- expect(api.send).toHaveBeenCalledWith('VIS_CONFIG_UPDATE', {
- updatedConfig: updatedVisConfig,
- })
- expect(sdk.visualizationData).toEqual(updatedVisualizationData)
})
})
diff --git a/packages/extension-sdk/src/connect/visualization/visualization_sdk.ts b/packages/extension-sdk/src/connect/visualization/visualization_sdk.ts
index 64a761667..71620771a 100644
--- a/packages/extension-sdk/src/connect/visualization/visualization_sdk.ts
+++ b/packages/extension-sdk/src/connect/visualization/visualization_sdk.ts
@@ -39,6 +39,7 @@ import type {
TableCalculation,
PivotConfig,
RawVisQueryResponse,
+ VisOptions,
} from './types'
class QueryResponseImpl implements QueryResponse {
@@ -130,9 +131,6 @@ export class VisualizationSDKImpl implements VisualizationSDK {
this.visualizationData = visualizationData
if (this.visConfig && this._visConfig) {
this._visConfig.update(this.visualizationData.visConfig)
- this.hostApi.send(ExtensionRequestType.VIS_CONFIG_UPDATE, {
- updatedConfig: this.visualizationData.visConfig,
- })
}
if (this.queryResponse && this._queryResponse) {
this._queryResponse.update(this.visualizationData.queryResponse)
@@ -140,7 +138,7 @@ export class VisualizationSDKImpl implements VisualizationSDK {
}
}
- configureVisualization(options: RawVisConfig): void {
+ configureVisualization(options: VisOptions): void {
if (this.hostApi.isDashboardMountSupported) {
this.hostApi.send(ExtensionRequestType.VIS_DEFAULT_CONFIG, { options })
} else {
@@ -148,6 +146,16 @@ export class VisualizationSDKImpl implements VisualizationSDK {
}
}
+ setVisConfig(config: RawVisConfig) {
+ if (this.hostApi.isDashboardMountSupported) {
+ this.hostApi.send(ExtensionRequestType.VIS_CONFIG_UPDATE, {
+ updatedConfig: config,
+ })
+ } else {
+ throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
+ }
+ }
+
get visConfig(): VisualizationConfig {
if (!this._visConfig) {
this._visConfig = new VisualizationConfigImpl(
diff --git a/packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx b/packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx
index bdcfe7d51..24dd69ad2 100644
--- a/packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx
+++ b/packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx
@@ -24,14 +24,14 @@
*/
import React, { useContext, useEffect, useCallback, useMemo } from 'react'
-import { SpaceVertical, Text } from '@looker/components'
+import { SpaceVertical, Text, Button } from '@looker/components'
import { More } from '@looker/icons'
import { ExtensionContext40 } from '@looker/extension-sdk-react'
import { useWindowSize } from '../../hooks/use_window_size'
import { LiquidFillGaugeViz } from '../LiquidFillGaugeViz'
import { Layout } from '../Layout'
import { NavigateButton } from '../NavigateButton'
-import { liquidFillDefaultConfig, getValueAndFormat } from './util/liquid_fill'
+import { liquidFillVisOptions, getValueAndFormat } from './util/liquid_fill'
export const VisualizationTile: React.FC = () => {
const { height, width } = useWindowSize()
@@ -48,10 +48,18 @@ export const VisualizationTile: React.FC = () => {
useEffect(() => {
if (visualizationSDK) {
- visualizationSDK.configureVisualization(liquidFillDefaultConfig)
+ visualizationSDK.configureVisualization(liquidFillVisOptions)
}
}, [visualizationSDK])
+ const toggleBackgroundColor = () => {
+ if (visualizationData?.visConfig?.circleColor === 'red') {
+ visualizationSDK.setVisConfig({ circleColor: 'blue' })
+ } else {
+ visualizationSDK.setVisConfig({ circleColor: 'red' })
+ }
+ }
+
const renderComplete = useCallback(() => {
if (visualizationData) {
extensionSDK.rendered()
@@ -64,6 +72,7 @@ export const VisualizationTile: React.FC = () => {
Visualization Tile
+
{value && (