Cómo compilar extensiones de mosaicos

A partir de Looker 24.0, se pueden desarrollar extensiones para que se ejecuten en un mosaico de los paneles. Las extensiones que admiten ejecutarse como una tarjeta o visualización se pueden agregar mientras el panel está en modo de edición o guardar en un panel como una visualización desde una exploración. Las extensiones también se pueden configurar como tarjetas en los paneles de LookML.

Hay ejemplos de extensiones que se pueden usar como tarjetas de panel disponibles:

• La extensión de visualización de tarjetas muestra cómo compilar una visualización personalizada con el framework de extensiones.
• La extensión del SDK de tarjetas muestra los métodos de la API disponibles que son específicos de las extensiones de tarjetas.

Cómo usar el SDK de extensiones de Looker con extensiones de tarjetas

Las extensiones de tarjetas requieren que se defina el parámetro mount_points en el archivo de manifiesto del proyecto de LookML para que las extensiones se carguen como tarjetas en un panel. Existen dos tipos de mount_points relacionados con las extensiones de tarjetas:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }

• dashboard_vis: Cuando está habilitada, la extensión aparecerá en las opciones de visualización de un Explorar, donde se podrá seleccionar como visualización y guardar como una tarjeta del panel. Cuando se ejecute el panel, este ejecutará la consulta asociada al mosaico y pondrá los datos a disposición de la extensión. Esto es similar a cómo funcionan las visualizaciones personalizadas. La principal diferencia entre una visualización personalizada y una extensión que se ejecuta en una tarjeta del panel que tiene habilitado dashboard_vis es que la extensión puede realizar llamadas a la API de Looker.
• dashboard_tile: Cuando se habilita, la extensión aparecerá en el panel Extensiones que se muestra cuando un usuario edita un panel y selecciona la opción Extensiones después de hacer clic en el botón Agregar. Este tipo de extensión es responsable de recuperar sus propios datos, en lugar de que la consulta de la tarjeta proporcione automáticamente los datos a la extensión.

Un punto de activación adicional, standalone, hace que la extensión aparezca en la sección Aplicaciones del menú principal de Looker. Es posible que una extensión tenga definidos varios puntos de activación. En el tiempo de ejecución, se notifica a la extensión cómo está montada y puede ajustar su comportamiento en consecuencia. Por ejemplo, las extensiones de standalone pueden necesitar establecer su propia altura, mientras que las extensiones de tarjetas no.

APIs adicionales de la extensión de Tile

Las extensiones de tarjetas se proporcionan con APIs y datos adicionales en el tiempo de ejecución. Estos se obtienen del contexto de la extensión:

const {
  tileSDK,
  tileHostData,
  visualizationData,
  visualizationSDK,
} = useContext(ExtensionContext40)

• tileSDK: Proporciona funciones específicas de la tarjeta para permitir que la extensión interactúe con el host del panel de Looker. Por ejemplo, para permitir que la extensión muestre y borre mensajes de error.
• tileHostData: Proporciona datos de tarjetas a la extensión. Los datos se actualizan automáticamente en función de las interacciones con el panel de alojamiento. Un ejemplo es el indicador de isDashboardEditing.
• visualizationSDK: Proporciona funciones específicas de la visualización para permitir que la extensión interactúe con el host del panel de Looker. Un ejemplo es la función updateRowLimit.
• visualizationData: Proporciona datos de visualización a la extensión. Los datos se actualizan automáticamente en función de las interacciones con el panel de alojamiento. Los datos son similares a los que se proporcionan a las visualizaciones personalizadas.

Cómo compilar extensiones reactivas

Los iframes en los que se ejecutan las extensiones cambian de tamaño automáticamente a medida que cambia el tamaño de la ventana principal del host de Looker. Esto se refleja automáticamente en la ventana de contenido del iframe. El componente iframe no tiene padding ni margen, por lo que la extensión debe proporcionar su propio padding y margen para que se vea coherente con la aplicación de Looker. En el caso de las extensiones independientes, la extensión controla su altura. En el caso de las extensiones que se ejecutan en tarjetas del panel o en visualizaciones de Explorar, la ventana de contenido del iframe se establecerá automáticamente en la altura que proporcione el iframe.

Consideraciones sobre la renderización

Es importante tener en cuenta que las extensiones de tarjetas se renderizarán cuando se descargue un panel como PDF o imagen. El renderizador espera que la segmentación le notifique cuando se complete la renderización. Si no se hace, el renderizador dejará de responder. A continuación, se muestra un ejemplo de cómo notificar al renderizador que se renderizó la segmentación.

  const { extensionSDK } = useContext(ExtensionContext40)

  useEffect(() => {
    extensionSDK.rendered()
  }, [])

Las animaciones también deben inhabilitarse durante la renderización. A continuación, se muestra un ejemplo en el que se desactivan los parámetros de configuración de la animación durante la renderización:

  const { lookerHostData} = useContext(ExtensionContext40)
  const isRendering = lookerHostData?.isRendering

  const config = isRendering
    ? {
        ...visConfig,
        valueCountUp: false,
        waveAnimateTime: 0,
        waveRiseTime: 0,
        waveAnimate: false,
        waveRise: false,
      }
    : visConfig

  if (mountPoint === MountPoint.dashboardVisualization) {
    return <VisualizationTile config={config} />
  }

Funciones y propiedades del SDK de Tile

El SDK de tarjetas proporciona funciones que permiten que una extensión de tarjeta interactúe con su panel de hosting.

Las funciones y propiedades disponibles se muestran en la siguiente tabla:

Datos del SDK de Tiles

En la siguiente tabla, se muestran las propiedades de datos del SDK de tarjetas disponibles:

Funciones y propiedades del SDK de Visualización

En la siguiente tabla, se muestran las funciones y propiedades disponibles del SDK de visualización:

Datos del SDK de Visualization

El SDK de visualización consta de lo siguiente:

• Datos de configuración de la visualización
• Datos de respuesta de la consulta

Datos de configuración de la visualización

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

Datos de respuesta de la consulta

Usa el SDK de Embed

No se recomienda usar el SDK de Embed en una extensión de tarjeta por los siguientes motivos:

• Es posible que la extensión termine renderizando un panel en el que se muestre como tarjeta. El framework de extensiones no tiene forma de detectar esto y, como resultado, es posible que el navegador falle.
• No funciona la renderización de PDF del contenido incorporado dentro de una extensión de tarjeta.