From 8255d2b4175fe20dd80ee5c6d8774467c8a74de2 Mon Sep 17 00:00:00 2001
From: Bryn Ryans <bnryans@google.com>
Date: Mon, 23 Oct 2023 15:42:03 +0000
Subject: [PATCH] feat: add render callback to tile extensions

Also removes animation from tile visualization when rendering.
---
 .../src/components/Inspector/Inspector.js     |  9 +++++-
 .../tile-visualization/src/TileExtension.js   | 31 ++++++++++++++-----
 .../components/DashboardTile/DashboardTile.js |  3 +-
 .../VisualizationTile/VisualizationTile.js    |  3 +-
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/react/javascript/tile-sdk/src/components/Inspector/Inspector.js b/react/javascript/tile-sdk/src/components/Inspector/Inspector.js
index 0da8c1a..5316193 100644
--- a/react/javascript/tile-sdk/src/components/Inspector/Inspector.js
+++ b/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%">
diff --git a/react/javascript/tile-visualization/src/TileExtension.js b/react/javascript/tile-visualization/src/TileExtension.js
index 914be96..2552897 100644
--- a/react/javascript/tile-visualization/src/TileExtension.js
+++ b/react/javascript/tile-visualization/src/TileExtension.js
@@ -23,7 +23,7 @@
  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'
@@ -31,28 +31,43 @@ 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>
   )
 }
diff --git a/react/javascript/tile-visualization/src/components/DashboardTile/DashboardTile.js b/react/javascript/tile-visualization/src/components/DashboardTile/DashboardTile.js
index 30b5c65..746aa30 100644
--- a/react/javascript/tile-visualization/src/components/DashboardTile/DashboardTile.js
+++ b/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>
diff --git a/react/javascript/tile-visualization/src/components/VisualizationTile/VisualizationTile.js b/react/javascript/tile-visualization/src/components/VisualizationTile/VisualizationTile.js
index 4b0c86d..5868251 100644
--- a/react/javascript/tile-visualization/src/components/VisualizationTile/VisualizationTile.js
+++ b/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 && (