From 3fbe8fd7d44611370c5fc4e608957953dabb82c0 Mon Sep 17 00:00:00 2001 From: Ryan Dunlavy Date: Tue, 31 Oct 2023 05:00:42 +0000 Subject: [PATCH] feat: Allow for setting vis config in extensions --- packages/extension-sdk/src/connect/types.ts | 2 +- .../src/connect/visualization/types.ts | 35 ++++++++++++++++++- .../visualization/visualization_sdk.spec.ts | 9 +---- .../visualization/visualization_sdk.ts | 16 ++++++--- .../VisualizationTile/VisualizationTile.tsx | 15 ++++++-- .../VisualizationTile/util/liquid_fill.ts | 2 +- 6 files changed, 61 insertions(+), 18 deletions(-) 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 && (