Cómo compilar extensiones de mosaicos

A partir de Looker 24.0, se pueden desarrollar extensiones para que se ejecuten en una tarjeta de los paneles. Las extensiones que admiten ejecutarse como tarjetas o visualizaciones se pueden agregar mientras el panel está en modo de edición o guardar en un panel como una visualización desde Explorar. 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:

• En la extensión de visualización de tarjetas, se muestra cómo crear una visualización personalizada con el framework de extensiones.
• La extensión del SDK de tarjetas muestra los métodos de 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 se habilita, la extensión aparecerá en las opciones de visualización de una exploración, donde se puede seleccionar como una visualización y guardar como tarjeta de panel. Cuando se ejecute el panel, este ejecutará la consulta asociada con la tarjeta y pondrá los datos a disposición de la extensión. Esto es similar a la forma en que funcionan las visualizaciones personalizadas. La principal diferencia entre una visualización personalizada y una extensión que se ejecuta en una tarjeta de 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 tarjetas le proporcione datos automáticamente.

Un punto de activación adicional, standalone, hace que la extensión aparezca en la sección Applications del menú principal de Looker. Es posible que una extensión tenga varios puntos de activación definidos. Durante el tiempo de ejecución, se le notifica a la extensión cómo se montó y puede ajustar su comportamiento según corresponda. Por ejemplo, es posible que las extensiones de standalone deban establecer su propia altura, mientras que las extensiones de tarjetas no.

APIs adicionales de la extensión de tarjetas

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

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

• tileSDK: Proporciona funciones específicas de tarjetas 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 hosting. Un ejemplo es el indicador isDashboardEditing.
• visualizationSDK: Proporciona funciones específicas de 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 hosting. 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 del host principal 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 depende de la extensión proporcionar su propio padding y margen para que se vea coherente con la aplicación de Looker. En el caso de las extensiones independientes, depende de la extensión controlar la altura. En el caso de las extensiones que se ejecutan en tarjetas de panel o visualizaciones de Explorar, la ventana de contenido del iframe se establecerá automáticamente en la altura que el iframe pone a disposición.

Consideraciones de renderización

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

  const { extensionSDK } = useContext(ExtensionContext40)

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

Las animaciones también deben inhabilitarse durante la renderización. El siguiente es un ejemplo en el que se desactivan las configuraciones de 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 tarjetas

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 tarjetas

Las propiedades de datos del SDK de tarjetas disponibles se muestran en la siguiente tabla:

Funciones y propiedades del SDK de Visualization

Las funciones y propiedades del SDK de visualización disponibles se muestran en la siguiente tabla:

Datos del SDK de Visualization

El SDK de visualización consta de lo siguiente:

• Datos de configuración de la visualización
• Cómo consultar datos de respuesta

Datos de configuración de la visualización

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

Cómo consultar datos de respuesta