feat: add render callback to tile extensions

Also removes animation from tile visualization when rendering.

react/javascript/tile-sdk/src/components/Inspector/Inspector.js

@@ -23,13 +23,20 @@
  SOFTWARE.
 
  */
-import React from 'react'
+import React, { useCallback, useEffect, useContext } from 'react'
 import { SpaceVertical, Box } from '@looker/components'
+import { ExtensionContext40 } from '@looker/extension-sdk-react'
 import { EventTester } from './components/EventTester/EventTester'
 import { TileHostData } from './components/TileHostData/TileHostData'
 import { VisualizationData } from './components/VisualizationData/VisualizationData'
 
 export const Inspector = () => {
+  const { extensionSDK } = useContext(ExtensionContext40)
+
+  useEffect(() => {
+    extensionSDK.rendered()
+  }, [extensionSDK])
+
   return (
     <SpaceVertical gap="small">
       <Box width="100%">

react/javascript/tile-visualization/src/TileExtension.js

@@ -23,36 +23,51 @@
  SOFTWARE.
 
  */
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import styled from 'styled-components'
 import { ComponentsProvider } from '@looker/components'
 import { ExtensionContext40 } from '@looker/extension-sdk-react'
 import { MountPoint } from '@looker/extension-sdk'
 import { VisualizationTile } from './components/VisualizationTile/VisualizationTile'
 import { DashboardTile } from './components/DashboardTile/DashboardTile'
 
-const getDefaultRouteComponent = (mountPoint) => {
+const getDefaultRouteComponent = (mountPoint, isRendering) => {
+  const config = isRendering
+    ? {
+        valueCountUp: false,
+        waveAnimateTime: 0,
+        waveRiseTime: 0,
+        waveAnimate: false,
+        waveRise: false,
+      }
+    : {}
+
   if (mountPoint === MountPoint.dashboardVisualization) {
-    return <VisualizationTile />
+    return <VisualizationTile config={config} />
   }
+
   if (mountPoint === MountPoint.dashboardTile) {
-    return <DashboardTile />
+    return <DashboardTile config={config} />
   }
   // Standalone extensions do not get the additional CSS
   // that ensures the html and body tags occupy 100% of the
   // IFRAME content window. In standalone mode Dashboard tile
   // uses vh to calculate its height.
-  return <DashboardTile standalone={true} />
+  return <DashboardTile standalone={true} config={config} />
 }
 
 export const TileExtension = () => {
   const { lookerHostData } = useContext(ExtensionContext40)
+  const mountPoint = lookerHostData?.mountPoint
+  const isRendering = lookerHostData?.isRendering
+  const component = useMemo(
+    () => getDefaultRouteComponent(mountPoint, isRendering),
+    [mountPoint, isRendering]
+  )
 
   return (
     <ComponentsProviderWrapper>
-      <ComponentsProvider>
-        {getDefaultRouteComponent(lookerHostData?.mountPoint)}
-      </ComponentsProvider>
+      <ComponentsProvider>{component}</ComponentsProvider>
     </ComponentsProviderWrapper>
   )
 }

react/javascript/tile-visualization/src/components/DashboardTile/DashboardTile.js

@@ -42,7 +42,7 @@ import { LiquidFillGaugeViz } from '../LiquidFillGaugeViz/LiquidFillGaugeViz'
  * then the user has clicked the dashboard run button (or the dashboard
  * has been setup to auto refresh).
  */
-export const DashboardTile = ({ standalone }) => {
+export const DashboardTile = ({ standalone, config }) => {
   const { extensionSDK, coreSDK, tileHostData } = useContext(ExtensionContext40)
   const { lastRunStartTime, dashboardRunState } = tileHostData || -1
   const [saveLastRunStartTime, setSaveLastRunStartTime] = useState()
@@ -117,6 +117,7 @@ export const DashboardTile = ({ standalone }) => {
           value={value}
           renderComplete={renderComplete}
           valueFormat={null}
+          config={config}
         />
       )}
     </SpaceVertical>

react/javascript/tile-visualization/src/components/VisualizationTile/VisualizationTile.js

@@ -32,7 +32,7 @@ import {
   getValueAndFormat,
 } from '../LiquidFillGaugeViz/liquid_fill'
 
-export const VisualizationTile = () => {
+export const VisualizationTile = ({ config }) => {
   const { visualizationData, visualizationSDK, extensionSDK } =
     useContext(ExtensionContext40)
 
@@ -69,6 +69,7 @@ export const VisualizationTile = () => {
           value={value}
           renderComplete={renderComplete}
           valueFormat={valueFormat}
+          config={config}
         />
       )}
       {!value && (