@hopara/iframe 2.4.57 → 2.4.58

package/src/events/EventEmitter.ts

@@ -0,0 +1,90 @@
+import { EventType, HOPARA_EVENT_TYPE, LoadDataRequestData } from './Events'
+import { DataLoader, FilterSet, LoaderResponse } from '@hopara/dataset'
+import { Row } from '@hopara/dataset'
+
+export class EventEmitter {
+  private static sendMessage(data: any, targetWindow?: Window) {
+    const target = targetWindow || window.parent || window.top
+    if (!window) return
+    // eslint-disable-next-line @microsoft/sdl/no-postmessage-star-origin
+    target.postMessage(data, '*')
+  }
+
+  static ready(): void {
+    this.sendMessage({[HOPARA_EVENT_TYPE]: EventType.READY})
+  }
+
+  static init(config: any, targetWindow: Window): void {
+    this.sendMessage(Object.assign(config, {[HOPARA_EVENT_TYPE]: EventType.INIT}), targetWindow)
+  }
+
+  static loadDataRequest(dataLoader: Partial<DataLoader>, filterSet: FilterSet): void {
+    this.sendMessage({
+      [HOPARA_EVENT_TYPE]: EventType.LOAD_DATA,
+      data: {query: dataLoader.query, name: dataLoader.query, source: dataLoader.source},
+      filterSet,
+    } as LoadDataRequestData)
+  }
+
+  static getRows(response: any, error?: Error) {
+    if (error || !response) {
+      return []
+    }
+
+    return Array.isArray(response) ? response : response.rows
+  }
+
+  static getColumns(response:any, error?: Error) {
+    if (error) {
+      return []
+    }
+
+    return Array.isArray(response) ? [] : response.columns
+  }
+
+  static getError(response:any, error?: Error) {
+    if (error) {
+      return error
+    }
+
+    if (!response) {
+      return new Error('Load data with undefined response')
+    }
+
+    return undefined
+  }
+
+
+  static loadDataResponse(config: any, dataLoader: Partial<DataLoader>, response: any[] | LoaderResponse, error: Error | undefined, targetWindow: Window): void {   
+    const rows = this.getRows(response, error)
+    const columns = this.getColumns(response, error)
+    this.sendMessage(Object.assign(
+      config,
+      {[HOPARA_EVENT_TYPE]: EventType.LOAD_DATA_RESPONSE},
+      {data: {query: dataLoader.query ?? (dataLoader as any).name, source: dataLoader.source}, 
+              rows, columns, error: this.getError(response, error)},
+    ), targetWindow)
+  }
+
+  static refresh(config: any, targetWindow: Window): void {
+    this.sendMessage({
+      ...config,
+      [HOPARA_EVENT_TYPE]: EventType.REFRESH,
+    }, targetWindow)
+  }
+
+  static update(config:any, targetWindow: Window): void {
+    this.sendMessage({
+      ...config,
+      [HOPARA_EVENT_TYPE]: EventType.UPDATE,
+    }, targetWindow)
+  }
+
+  static callback(name: string, row: Row): void {
+    this.sendMessage({
+      [HOPARA_EVENT_TYPE]: EventType.FUNCTION_CALLBACK,
+      name,
+      row,
+    })
+  }
+}

package/src/events/EventReceiver.ts

@@ -0,0 +1,24 @@
+import { DataLoader, LoaderResponse } from '@hopara/dataset'
+import { EventType, HOPARA_EVENT_TYPE, LoadDataResponseData, PostMessageEvent } from './Events'
+
+export class EventReceiver {
+  static isHoparaMessage(event: any): boolean {
+    return event.data[HOPARA_EVENT_TYPE] !== undefined
+  }
+
+  static loadDataResponse(dataLoader: Partial<DataLoader>): Promise<LoaderResponse> {
+    return new Promise((resolve) => {
+      const callback = (event: PostMessageEvent<LoadDataResponseData>) => {
+        if (
+          event.data[HOPARA_EVENT_TYPE] === EventType.LOAD_DATA_RESPONSE &&
+          (event.data.data.query === dataLoader.query || (event.data.data as any).name === dataLoader.query) &&
+          event.data.data.source === dataLoader.source) {
+          window.removeEventListener('message', callback, false)
+          resolve({rows: event.data.rows ?? [], columns: event.data.columns ?? [], error: event.data.error})
+        }
+      }
+
+      window.addEventListener('message', callback, false)
+    })
+  }
+}

package/src/events/Events.ts

@@ -0,0 +1,86 @@
+import { ConfigEnvironment } from '@hopara/config'
+import { FilterSet } from '@hopara/dataset'
+import { Position } from '@hopara/components/src/view-state/ViewState'
+import { SelectedFilter } from '@hopara/components/src/filter/domain/SelectedFilter'
+import { InitialRow } from '@hopara/components/src/initial-row/InitialRow'
+import { PlainError } from '@hopara/dataset/src/repository/LoaderDatasetRepository'
+import { PlainDataLoader } from '@hopara/dataset/src/loader/DataLoader'
+import { HoparaTab } from '../view/Provider'
+import { Language } from '@hopara/browser'
+
+export enum EventType {
+  INIT = 'init',
+  READY = 'ready',
+  UPDATE = 'update',
+  LOAD_DATA = 'loadData',
+  LOAD_DATA_RESPONSE = 'loadDataResponse',
+  UPDATE_DATA = 'updateData',
+  UPDATE_DATA_RESPONSE = 'updateDataResponse',
+  REFRESH = 'refresh',
+  FUNCTION_CALLBACK = 'functionCallback',
+}
+
+export const HOPARA_EVENT_TYPE = '__hopara__eventType__'
+
+export interface EventData {
+  [HOPARA_EVENT_TYPE]?: EventType
+}
+
+export interface InitData extends EventData {
+  accessToken?: string
+  refreshToken?: string
+  visualizationId?: string
+  fallbackVisualizationId?: string
+  visualizationScope?: string
+  tenant?: string
+  env?: ConfigEnvironment
+  initialPosition?: Position
+  initialRow?: InitialRow
+  dataLoaders?: PlainDataLoader[]
+  darkMode?: boolean
+  callbackNames?: string[]
+  filters?: Partial<SelectedFilter>[]
+  language?: Language | `${Language}`
+  initialTab?: HoparaTab | `${HoparaTab}`
+  navigationControls?: boolean
+}
+
+export interface LoadDataRequestData extends EventData {
+  data: {
+    query: string
+    source: string
+  }
+  filterSet: FilterSet
+}
+
+export interface LoadDataResponseData extends EventData {
+  data: {
+    query: string
+    source: string
+  }
+  rows: any[]
+  columns: any[]
+  error?: PlainError
+}
+
+export interface CallbackFunctionData extends EventData {
+  name: string
+  row: any
+}
+
+export interface PostMessageEvent<D> extends MessageEvent {
+  origin: string
+  data: D
+}
+
+export const isReadyEvent = (event: PostMessageEvent<EventData>): event is PostMessageEvent<EventData> => {
+  return event.data[HOPARA_EVENT_TYPE] === EventType.READY
+}
+
+export const isLoadDataEvent = (event: PostMessageEvent<EventData>): event is PostMessageEvent<LoadDataRequestData> => {
+  return event.data[HOPARA_EVENT_TYPE] === EventType.LOAD_DATA
+}
+
+export const isCallbackFunctionEvent = (event: PostMessageEvent<EventData>): event is PostMessageEvent<CallbackFunctionData> => {
+  return event.data[HOPARA_EVENT_TYPE] === EventType.FUNCTION_CALLBACK
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+// react create app needs this file to work properly
+export const anyFn = () => ({})

package/src/react-app-env.d.ts

@@ -0,0 +1,9 @@
+// / <reference types="react-scripts" />
+
+declare module 'math.gl';
+declare module 'class-transformer';
+declare module '*.css';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.gif';
+declare module '*.glb';

package/src/service-worker.ts

@@ -0,0 +1 @@
+import '@hopara/service-worker'

package/src/view/Provider.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from 'react'
+import {connect} from 'react-redux'
+import jwtDecode from 'jwt-decode'
+import { Logger } from '@hopara/internals'
+import actions, { HocLoadedPayload } from '@hopara/components/src/hoc/HocActions'
+import { InitialRow } from '@hopara/components/src/initial-row/InitialRow'
+import { HoparaController } from '@hopara/components/src/hoc/HoparaController'
+import { Config, ConfigEnvironment } from '@hopara/config'
+import { CallbackFunction } from '@hopara/components/src/action/ActionReducer'
+import { SelectedFilter } from '@hopara/components/src/filter/domain/SelectedFilter'
+import { SelectedFilters } from '@hopara/components/src/filter/domain/SelectedFilters'
+import { Authorization } from '@hopara/authorization'
+import { Store } from '@hopara/components/src/state/Store'
+import { getPageUrl } from '@hopara/page/src/PageNavigation'
+import { PageType } from '@hopara/page/src/Pages'
+import { useNavigate } from 'react-router-dom'
+import { FilterStore } from '@hopara/components/src/filter/state/FilterStore'
+import QueryStore from '@hopara/components/src/query/QueryStore'
+import { isEqual } from 'lodash/fp'
+import { PlainDataLoader } from '@hopara/dataset/src/loader/DataLoader'
+import { Language } from '@hopara/browser'
+
+export enum HoparaTab {
+  OBJECTS='objects',
+  LAYERS='layers',
+  SETTINGS='settings',
+  VISUALIZATION='visualization'
+}
+
+export type EmbeddedProps = {
+  env?: ConfigEnvironment
+  visualizationId: string
+  fallbackVisualizationId?: string
+  visualizationScope?: string
+  accessToken: string
+  refreshToken?: string
+  tenant?: string
+  dataLoaders?: PlainDataLoader[]
+  initialRow?: InitialRow
+  controller?: HoparaController
+  darkMode?: boolean
+  callbacks?: CallbackFunction[]
+  attribution?: boolean
+  filters?: Partial<SelectedFilter>[]
+  language?: Language
+  initialTab?: HoparaTab
+  navigationControls?: boolean
+}
+
+const logInit = (message:string, props: EmbeddedProps) => {
+  Logger.debug(message, {
+    visualizationId: props.visualizationId,
+    accessToken: props.accessToken ? `${props.accessToken?.substring(0, 50)}...` : undefined,
+  })
+}
+
+const getDecodedToken = (accessToken: string) => {
+  try {
+    return jwtDecode<any>(accessToken)
+  } catch {
+    return {}
+  }
+}
+
+interface ProviderStateProps extends EmbeddedProps {
+  stateVisualizationId: string
+  stateFallbackVisualizationId: string
+  stateTenant: string
+  stateAuthorization?: Authorization
+  filterStore: FilterStore
+  queryStore: QueryStore
+}
+
+interface ProviderStateActions {
+  onLoad: (navigateToTabUrl) => void
+  onUpdate: () => void
+  onVisualizationChanged: (navigateFn: any, tenant: string) => void
+  forceRefresh: () => void
+  onTabChange: (navigateFn: any, tab: HoparaTab) => void
+}
+
+const Provider = (props: ProviderStateProps & ProviderStateActions) => {
+  const navigate = useNavigate()
+  const [isFirstLoad, setIsFirstLoad] = useState(true)
+  const [oldVisualization, setOldVisualizationId] = useState({id: props.visualizationId, fallback: props.fallbackVisualizationId})
+  const [oldToken, setOldToken] = useState({token: props.accessToken, refreshToken: props.refreshToken, tenant: props.tenant})
+  const [oldFilters, setOldFilters] = useState(props.filters)
+  const [oldDataLoaders, setOldDataLoaders] = useState(props.dataLoaders)
+  const [oldInitialRow, setOldInitialRow] = useState(props.initialRow)
+  const [oldInitialTab, setOldInitialTab] = useState(props.initialTab)
+
+  const isRenderable = !!props.accessToken && !!props.visualizationId
+  const isTokenRefreshable = !!props.accessToken && !!props.refreshToken
+
+  const hasVisualizationChanged = !isEqual(oldVisualization.id, props.visualizationId) || !isEqual(oldVisualization.fallback, props.fallbackVisualizationId)
+  const hasTokenChanged = !isTokenRefreshable && (!isEqual(oldToken.token, props.accessToken) || !isEqual(oldToken.refreshToken, props.refreshToken))
+  const hasFiltersChanged = !isEqual(oldFilters, props.filters)
+  const hasDataLoadersChanged = !isEqual(oldDataLoaders, props.dataLoaders)
+  const hasInitialRowChanged = !isEqual(oldInitialRow, props.initialRow)
+  const hasInitialTabChanged = !isEqual(oldInitialTab, props.initialTab)
+
+  const shouldUpdate = hasVisualizationChanged || hasTokenChanged || hasFiltersChanged || hasDataLoadersChanged || hasInitialRowChanged || hasInitialTabChanged
+
+  useEffect(() => {
+    if (!shouldUpdate || !isRenderable) return
+    if (props.controller) props.controller.setRefreshSignal(props.forceRefresh)
+    if (props.env && props.env !== Config.environment) Config.setEnv(props.env)
+
+    setOldToken({token: props.accessToken, refreshToken: props.refreshToken, tenant: props.tenant})
+    setOldVisualizationId({id: props.visualizationId, fallback: props.fallbackVisualizationId})
+    setOldFilters(props.filters)
+    setOldDataLoaders(props.dataLoaders)
+    setOldInitialRow(props.initialRow)
+    setOldInitialTab(props.initialTab)
+
+    if (isFirstLoad) {
+      setIsFirstLoad(false)
+      return props.onLoad((navigateToTabUrl) => navigate(navigateToTabUrl, {replace: false, state: {jumpBack: false}}))
+    } else if (hasVisualizationChanged) {
+      props.onVisualizationChanged((url) => navigate(url, {replace: false, state: {jumpBack: false}}), props.tenant ?? props.stateTenant)
+    } else if (hasInitialTabChanged && props.initialTab) {
+      props.onTabChange((url) => navigate(url, {replace: false, state: {jumpBack: false}}), props.initialTab)
+    } else {
+      props.onUpdate()
+    }
+  }, [props.visualizationId, props.accessToken, props.refreshToken, props.tenant, props.filters, props.dataLoaders, props.initialTab, shouldUpdate])
+
+  return <></>
+}
+
+const tabToPageType = (tab: HoparaTab): PageType => {
+  switch (tab) {
+    case HoparaTab.LAYERS:
+      return PageType.VisualizationLayerEditor
+    case HoparaTab.OBJECTS:
+      return PageType.VisualizationObjectEditor
+    case HoparaTab.SETTINGS:
+      return PageType.VisualizationSettings
+    default:
+      return PageType.VisualizationDetail
+  }
+}
+
+const mapState = (state: Store, props: EmbeddedProps): ProviderStateProps => {
+  return {
+    ...props,
+    tenant: props.tenant,
+    stateTenant: state.auth.authorization.tenant,
+    visualizationId: props.visualizationId ?? '',
+    stateVisualizationId: state.visualizationStore.visualization?.id ?? '',
+    stateFallbackVisualizationId: state.visualizationStore.fallbackVisualizationId ?? '',
+    stateAuthorization: state.auth.authorization,
+    filterStore: state.filterStore,
+    queryStore: state.queryStore,
+  }
+}
+
+const mapActions = (dispatch: any, props: EmbeddedProps): ProviderStateActions => {
+  const getActionPayload = (): HocLoadedPayload => {
+    const {tenants = [], scope = '', exp = 0, username} = getDecodedToken(props.accessToken)
+    const authorization = new Authorization({
+      accessToken: props.accessToken,
+      refreshToken: props.refreshToken,
+      expiration: exp,
+      tenant: props.tenant ?? tenants[0],
+      tenants,
+      permissions: scope?.split(' '),
+      clientId: username,
+    })
+
+    const filters = props.filters?.length ?
+                    new SelectedFilters(...props.filters.map((filter) => new SelectedFilter(filter))) :
+                    undefined
+
+    return {
+      visualizationId: props.visualizationId,
+      fallbackVisualizationId: props.fallbackVisualizationId,
+      visualizationScope: props.visualizationScope,
+      dataLoaders: props.dataLoaders,
+      initialRow: props.initialRow,
+      darkMode: !!props.darkMode,
+      callbacks: props.callbacks,
+      filters,
+      authorization,
+      language: props.language,
+      navigationControls: props.navigationControls,
+    }
+  }
+
+  return {
+    onLoad: (navigate) => {
+      logInit('initializing module', props)
+
+      const actionPayload = getActionPayload()
+      dispatch(actions.configLoaded(actionPayload))      
+      if (!props.initialTab) return
+
+      const initalTabURL = getPageUrl(
+        tabToPageType(props.initialTab),
+        actionPayload.authorization.tenant,
+        {
+          visualizationId: props.visualizationId,
+          fallbackVisualizationId: props.fallbackVisualizationId,
+          visualizationScope: props.visualizationScope,
+          initialLayerId: props.initialRow?.layerId,
+          initialRowId: props.initialRow?.rowId,
+          filters: props.filters,
+        },
+      )
+
+      return navigate(initalTabURL)
+    },
+    onTabChange: (navigate: any, tab: HoparaTab) => {
+      const actionPayload = getActionPayload()
+      const initalTabURL = getPageUrl(
+        tabToPageType(tab),
+        actionPayload.authorization.tenant,
+        {
+          visualizationId: props.visualizationId,
+          fallbackVisualizationId: props.fallbackVisualizationId,
+          visualizationScope: props.visualizationScope,
+          initialLayerId: props.initialRow?.layerId,
+          initialRowId: props.initialRow?.rowId,
+          filters: props.filters,
+        },
+      )
+
+      return navigate(initalTabURL)
+    },
+    onUpdate: () => {
+      logInit('updating module', props)
+      dispatch(actions.configUpdated(getActionPayload()))
+    },
+    onVisualizationChanged: (navigate, tenant) => {
+      if (!tenant) {
+        tenant = getActionPayload().authorization.tenant
+      }
+
+      const url = getPageUrl(
+        PageType.VisualizationDetail,
+        tenant,
+        {
+          visualizationId: props.visualizationId,
+          fallbackVisualizationId: props.fallbackVisualizationId,
+          visualizationScope: props.visualizationScope,
+          initialLayerId: props.initialRow?.layerId,
+          initialRowId: props.initialRow?.rowId,
+          filters: props.filters,
+        },
+      )
+
+      return navigate(url)
+    },
+    forceRefresh: () => dispatch(actions.forceRefresh()),
+  }
+}
+
+export const EmbeddedProvider = connect(mapState, mapActions)(Provider)

package/src/view/Router.tsx

@@ -0,0 +1,35 @@
+import React, {lazy, Suspense} from 'react'
+import {Route, Routes} from 'react-router-dom'
+import {Pages, PageType} from '@hopara/page/src/Pages'
+import {LoadingSpinner} from '@hopara/design-system/src/loading-spinner/Spinner'
+import {ConnectedAuthProvider} from '@hopara/components/src/hoc/AuthProvider'
+import {RumRouteMonitoring} from '@hopara/rum/src/RumMonitoring'
+
+const VisualizationOutlet = lazy(() => import(/* webpackPreload: true */ '@hopara/components/src/visualization/pages/VisualizationOutlet'))
+const VisualizationPageTemplate = lazy(() => import(/* webpackPreload: true */ '@hopara/components/src/visualization/pages/VisualizationPageTemplate'))
+const ObjectEditorOutlet = lazy(() => import(/* webpackPreload: true */ '@hopara/components/src/object/editor/ObjectEditorOutletContainer'))
+const SettingsOutlet = lazy(() => import(/* webpackPreload: true */ '@hopara/components/src/settings/SettingsOutletContainer'))
+const LayerEditorOutlet = lazy(() => import(/* webpackPreload: true */ '@hopara/components/src/layer/editor/LayerEditorOutletContainer'))
+const ForbiddenPage = lazy(() => import(/* webpackPreload: true */ '@hopara/design-system/src/static-pages/ForbiddenPage'))
+const NotFoundPage = lazy(() => import(/* webpackPreload: true */ '@hopara/design-system/src/static-pages/NotFoundPage'))
+
+export const Router = () => {
+  return (
+    <ConnectedAuthProvider>
+      <Suspense fallback={<LoadingSpinner fullscreen={true}/>}>
+        <RumRouteMonitoring />
+        <Routes>
+          <Route path={Pages.getPath(PageType.Forbidden)} element={<ForbiddenPage/>}/>
+          <Route path={Pages.getPath(PageType.NotFound)} element={<NotFoundPage/>}/>
+          <Route element={<VisualizationPageTemplate/>}>
+            <Route path={Pages.getPath(PageType.VisualizationDetail)} element={<VisualizationOutlet/>}/>
+            <Route path={Pages.getPath(PageType.VisualizationObjectEditor)} element={<ObjectEditorOutlet/>}/>
+            <Route path={Pages.getPath(PageType.VisualizationSettings)} element={<SettingsOutlet/>}/>
+            <Route path={Pages.getPath(PageType.VisualizationLayerEditor)} element={<LayerEditorOutlet/>}/>
+          </Route>
+          <Route path="*" element={<LoadingSpinner fullscreen={true}/>}/>
+        </Routes>
+      </Suspense>
+    </ConnectedAuthProvider>
+  )
+}

package/src/view/View.tsx

@@ -0,0 +1,159 @@
+import React from 'react'
+import {MemoryRouter} from 'react-router-dom'
+import {EmbeddedProvider, EmbeddedProps} from './Provider'
+import { HoparaController } from '@hopara/components/src/hoc/HoparaController'
+import { EventType, HOPARA_EVENT_TYPE, InitData, PostMessageEvent } from '../events/Events'
+import { EventReceiver } from '../events/EventReceiver'
+import { EventEmitter } from '../events/EventEmitter'
+import {Router} from './Router'
+import { PureComponent } from '@hopara/design-system'
+import { Box } from '@mui/material'
+import HoparaProvider from '@hopara/components/src/hoc/Provider'
+import { DataLoader } from '@hopara/dataset'
+import { PlainDataLoader } from '@hopara/dataset/src/loader/DataLoader'
+
+type Props = {
+  children?: React.ReactElement
+}
+
+export class View extends PureComponent<Props, EmbeddedProps> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      accessToken: '',
+      visualizationId: '',
+      fallbackVisualizationId: undefined,
+      visualizationScope: undefined,
+      env: undefined,
+      refreshToken: undefined,
+      tenant: undefined,
+      dataLoaders: undefined,
+      initialRow: undefined,
+      controller: undefined,
+      darkMode: undefined,
+      callbacks: undefined,
+      attribution: undefined,
+      filters: undefined,
+      language: undefined,
+      initialTab: undefined,
+      navigationControls: undefined,
+    }
+  }
+
+  private dataLoaderAsPostMessage(dataLoader: PlainDataLoader): DataLoader {
+    const migratedDataLoader = {
+      query: dataLoader.query ?? (dataLoader as any).name,
+      source: dataLoader.source,
+      cache: dataLoader.cache,
+    }
+
+    return new DataLoader({
+      ...migratedDataLoader,
+      loader: async (filterSet) => {
+        EventEmitter.loadDataRequest(migratedDataLoader, filterSet)
+        return EventReceiver.loadDataResponse(migratedDataLoader)
+      },
+    })
+  }
+
+  private callbacksAsPostMessage(name: string): any {
+    return {
+      name,
+      callback: (data) => EventEmitter.callback(name, data),
+    }
+  }
+  private getVisualizationId(event:PostMessageEvent<InitData>): string {
+    return event.data.visualizationId ?? event.data.fallbackVisualizationId!
+  }
+
+  handleInitEvent(event:PostMessageEvent<InitData>, callback?: () => void) {
+    const newState = Object.keys(this.state).reduce((state, key) => {
+      // we only update the state if the key is present in the new event data
+      return { ...state, [key]: key in event.data ? event.data[key] : state[key] }
+    }, this.state)
+
+    this.setState({
+      ...newState,
+      accessToken: event.data.accessToken!,
+      visualizationId: this.getVisualizationId(event),
+      callbacks: event.data.callbackNames?.map(this.callbacksAsPostMessage.bind(this)),
+      dataLoaders: event.data.dataLoaders?.map(this.dataLoaderAsPostMessage.bind(this)),
+      controller: new HoparaController(),
+    }, callback)
+  }
+
+  private shouldSkipEvent(event:PostMessageEvent<any>): boolean {
+    const isValidEvent = event.data.__hopara__eventType__ === EventType.INIT ||
+                         event.data.__hopara__eventType__ === EventType.UPDATE ||
+                         event.data.__hopara__eventType__ == EventType.REFRESH
+    const hasVisualizationId = !!event.data.visualizationId ||
+                               !!event.data.visualization ||
+                               !!event.data.app ||
+                               !!event.data.fallbackVisualizationId
+
+    return !isValidEvent || !event.data.accessToken || !hasVisualizationId
+  }
+
+  initMessageListener(event:PostMessageEvent<InitData>) {
+    if (this.shouldSkipEvent(event)) return
+
+    switch (event.data[HOPARA_EVENT_TYPE]) {
+      case (EventType.INIT):
+      case (EventType.UPDATE):
+        return this.handleInitEvent(event)
+      case (EventType.REFRESH):
+        return this.state.controller?.refresh()
+    }
+  }
+
+  cachedInitMessageListener: EventListenerOrEventListenerObject
+
+  registerToReceiveMessage() {
+    if (!window) return
+
+    this.cachedInitMessageListener = this.initMessageListener.bind(this) as any
+    window.addEventListener('message', this.cachedInitMessageListener, false)
+
+    EventEmitter.ready()
+  }
+
+  cachedRegisterToReceiveMessage: any
+
+  componentDidMount(): void {
+    this.cachedRegisterToReceiveMessage = this.registerToReceiveMessage.bind(this)
+    window.addEventListener('load', this.cachedRegisterToReceiveMessage, false)
+  }
+
+  unregisterToReceiveMessage() {
+    if (!window) return
+
+    if (this.cachedRegisterToReceiveMessage) {
+      window.removeEventListener('load', this.cachedRegisterToReceiveMessage, false)
+    }
+
+    if (this.cachedInitMessageListener) {
+      window.removeEventListener('message', this.cachedInitMessageListener, false)
+    }    
+  }
+
+  componentWillUnmount(): void {
+    this.unregisterToReceiveMessage()
+  }
+
+  render() {
+    return (
+      <Box sx={{
+        'width': '100vw',
+        'height': '100vh',
+        '@supports (height: 100dvh)': { height: '100dvh' },
+      }}>
+        <HoparaProvider>
+          <MemoryRouter>
+            <EmbeddedProvider {...this.state as any} />
+            <Router />
+          </MemoryRouter>
+        </HoparaProvider>
+      </Box>
+    )
+  }
+}