Add update row limit in extension

Author: rdunlavy-google

packages/extension-sdk/src/connect/tile/tile_sdk.spec.ts

@@ -147,18 +147,6 @@ describe('TileSDK', () => {
     expect(api.send).toBeCalledWith('TILE_CLEAR_ERRORS', { group: 'abc' })
   })
 
-  it('sends trigger message ', () => {
-    const tileSdk = makeTileSdk()
-    const config = [{ hello: 'world' }]
-    const message = 'message1'
-    tileSdk.trigger(message, config, makeEvent(config))
-    expect(api.send).toBeCalledWith('TILE_TRIGGER', {
-      message,
-      config,
-      event: makeEvent(),
-    })
-  })
-
   it('sends open drill menu message ', () => {
     const tileSdk = makeTileSdk()
     const options = { hello: 'world' }
@@ -211,7 +199,6 @@ describe('TileSDK', () => {
     method
     ${'addErrors'}
     ${'clearErrors'}
-    ${'trigger'}
     ${'openDrillMenu'}
     ${'toggleCrossFilter'}
     ${'runDashboard'}

packages/extension-sdk/src/connect/tile/tile_sdk.ts

@@ -32,7 +32,6 @@ import type {
   TileSDK,
   TileError,
   DrillMenuOptions,
-  TriggerConfig,
   CrossFilterOptions,
   Filters,
   TileHostData,
@@ -77,18 +76,6 @@ export class TileSDKImpl implements TileSDK {
     }
   }
 
-  trigger(message: string, config: TriggerConfig[], event?: MouseEvent) {
-    if (this.hostApi.isDashboardMountSupported) {
-      this.hostApi.send(ExtensionRequestType.TILE_TRIGGER, {
-        message,
-        config,
-        event: this.sanitizeEvent(event),
-      })
-    } else {
-      throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
-    }
-  }
-
   openDrillMenu(options: DrillMenuOptions, event?: MouseEvent) {
     if (this.hostApi.isDashboardMountSupported) {
       this.hostApi.send(ExtensionRequestType.TILE_OPEN_DRILL_MENU, {

packages/extension-sdk/src/connect/tile/types.ts

@@ -198,10 +198,6 @@ export interface CrossFilterOptions {
   row: Row
 }
 
-// TODO build out type
-export type TriggerConfig = any
-
-// TODO build out type
 export type DrillMenuOptions = any
 
 export interface Filters {
@@ -216,11 +212,6 @@ export interface TileSDK {
   tileHostDataChanged: (hostData: Partial<TileHostData>) => void
   addErrors: (...errors: TileError[]) => void
   clearErrors: (group?: string) => void
-  trigger: (
-    message: string,
-    config: TriggerConfig[],
-    event?: MouseEvent
-  ) => void
   openDrillMenu: (options: DrillMenuOptions, event?: MouseEvent) => void
   toggleCrossFilter: (options: CrossFilterOptions, event?: MouseEvent) => void
   runDashboard: () => void

packages/extension-sdk/src/connect/types.ts

@@ -139,10 +139,6 @@ export enum ExtensionRequestType {
    * Tile clear error messages
    */
   TILE_CLEAR_ERRORS = 'TILE_CLEAR_ERRORS',
-  /**
-   * Tile trigger
-   */
-  TILE_TRIGGER = 'TILE_TRIGGER',
   /**
    * Tile open drill menu
    */
@@ -151,6 +147,10 @@ export enum ExtensionRequestType {
    * Tile toggle cross filter
    */
   TILE_TOGGLE_CROSS_FILTER = 'TILE_TOGGLE_CROSS_FILTER',
+  /**
+   * Tile update row limit
+   */
+  TILE_ROW_LIMIT_UPDATE = 'TILE_ROW_LIMIT_UPDATE',
   /**
    * Tile run dashboard. Indicates that the dashboard queries should be run.
    */

packages/extension-sdk/src/connect/visualization/types.ts

@@ -121,6 +121,7 @@ export interface VisualizationSDK {
   updateVisData: (rawVisData: RawVisualizationData) => void
   configureVisualization: (options: VisOptions) => void
   setVisConfig: (config: RawVisConfig) => void
+  updateRowLimit: (rowLimit: number) => void
 }
 
 export interface VisOptionValue {

packages/extension-sdk/src/connect/visualization/visualization_sdk.ts

@@ -165,6 +165,16 @@ export class VisualizationSDKImpl implements VisualizationSDK {
     return this._visConfig
   }
 
+  updateRowLimit(rowLimit: number) {
+    if (this.hostApi.isDashboardMountSupported) {
+      this.hostApi.send(ExtensionRequestType.TILE_ROW_LIMIT_UPDATE, {
+        rowLimit,
+      })
+    } else {
+      throw NOT_DASHBOARD_MOUNT_NOT_SUPPORTED_ERROR
+    }
+  }
+
   get queryResponse(): QueryResponse {
     if (!this._queryResponse) {
       this._queryResponse = new QueryResponseImpl(

packages/extension-tile-playground/src/components/Inspector/components/EventTester/EventTester.tsx

@@ -40,6 +40,7 @@ export const EventTester: React.FC = () => {
   const {
     extensionSDK,
     tileSDK,
+    visualizationSDK,
     tileHostData: { dashboardFilters },
   } = useContext(ExtensionContext40)
   const [runDashboard, setRunDashboard] = useState(false)
@@ -67,28 +68,6 @@ export const EventTester: React.FC = () => {
     tileSDK.clearErrors()
   }, [tileSDK])
 
-  const triggerClick = useCallback(
-    (event: MouseEvent) => {
-      // Taken from custom visualizations 2
-      const defaultColors = {
-        red: '#F36254',
-        green: '#4FBC89',
-        yellow: '#FCF758',
-        white: '#FFFFFF',
-      }
-      tileSDK.trigger(
-        'updateConfig',
-        [
-          { lowColor: defaultColors.red },
-          { midColor: defaultColors.white },
-          { highColor: defaultColors.green },
-        ],
-        event
-      )
-    },
-    [tileSDK]
-  )
-
   const toggleCrossFilterClick = useCallback(
     (event: MouseEvent) => {
       // TODO pivot and row data needs to be populated
@@ -135,6 +114,10 @@ export const EventTester: React.FC = () => {
     extensionSDK.updateTitle(`Update tile title ${new Date().getSeconds()}`)
   }, [extensionSDK])
 
+  const updateRowLimit = useCallback(() => {
+    visualizationSDK.updateRowLimit(100)
+  }, [visualizationSDK])
+
   return (
     <Card>
       <CardContent>
@@ -149,8 +132,8 @@ export const EventTester: React.FC = () => {
             <ButtonOutline onClick={clearAllErrorsClick} width="100%">
               Test clear all errors
             </ButtonOutline>
-            <ButtonOutline onClick={triggerClick} width="100%">
-              Test trigger
+            <ButtonOutline onClick={updateRowLimit} width="100%">
+              Test Update Row Limit
             </ButtonOutline>
             <ButtonOutline onClick={openDrillMenuClick} width="100%">
               Test open drill menu

packages/extension-tile-playground/src/components/Inspector/components/TileHostData/TileHostData.tsx

@@ -67,7 +67,7 @@ export const TileHostData: React.FC = () => {
       : 'Dashboard is NOT printing'
 
   const exploringMessage =
-    isExploring && 'Extension visualization is being configured in exlore'
+    isExploring && 'Extension visualization is being configured in an explore'
 
   const dashboardEditingMessage = isDashboardEditing
     ? 'Dashboard is editing'

packages/extension-tile-playground/src/components/VisualizationTile/VisualizationTile.tsx

@@ -23,7 +23,13 @@
  SOFTWARE.
 
  */
-import React, { useContext, useEffect, useCallback, useMemo } from 'react'
+import React, {
+  useContext,
+  useEffect,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react'
 import { SpaceVertical, Text, Button } from '@looker/components'
 import { More } from '@looker/icons'
 import { ExtensionContext40 } from '@looker/extension-sdk-react'
@@ -39,6 +45,8 @@ export const VisualizationTile: React.FC = () => {
   const { visualizationData, visualizationSDK, extensionSDK } =
     useContext(ExtensionContext40)
 
+  const [visConfigured, setVisConfigured] = useState<boolean>(true)
+
   const { value, valueFormat } = useMemo(() => {
     if (visualizationData) {
       return getValueAndFormat(visualizationSDK)
@@ -47,8 +55,9 @@ export const VisualizationTile: React.FC = () => {
   }, [visualizationData, visualizationSDK])
 
   useEffect(() => {
-    if (visualizationSDK) {
+    if (visualizationSDK && !visConfigured) {
       visualizationSDK.configureVisualization(liquidFillVisOptions)
+      setVisConfigured(true)
     }
   }, [visualizationSDK])