feat: Allow for setting vis config in extensions (#1394)

Author: ryandunlavy

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',
   /**

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
 }

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)
   })
 })

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,24 +131,31 @@ 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)
       }
     }
   }
 
-  configureVisualization(options: RawVisConfig): void {
+  configureVisualization(options: VisOptions): void {
     if (this.hostApi.isDashboardMountSupported) {
       this.hostApi.send(ExtensionRequestType.VIS_DEFAULT_CONFIG, { options })
     } else {
       throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
     }
   }
 
+  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(

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 = () => {
         <Text p="xxxxxlarge" fontSize="xxxxxlarge">
           Visualization Tile
         </Text>
+        <Button onClick={toggleBackgroundColor}>Change background color</Button>
         {value && (
           <LiquidFillGaugeViz
             width={vizSize}

packages/extension-tile-playground/src/components/VisualizationTile/util/liquid_fill.ts

@@ -61,7 +61,7 @@ export const getValueAndFormat = (
   return { value, valueFormat }
 }
 
-export const liquidFillDefaultConfig = {
+export const liquidFillVisOptions = {
   showComparison: {
     label: 'Use field comparison',
     default: false,