@hopara/iframe 2.4.57 → 2.4.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hopara/iframe",
-  "version": "2.4.57",
+  "version": "2.4.58",
   "main": "build/client.js",
   "types": "build/types/src/client/index.d.ts",
   "scripts": {
@@ -34,13 +34,13 @@
   },
   "devDependencies": {
     "@babel/register": "^7.15.3",
-    "@hopara/components": "2.4.57",
-    "@hopara/config": "2.4.57",
-    "@hopara/design-system": "2.4.57",
-    "@hopara/internals": "2.4.57",
-    "@hopara/rum": "2.4.57",
-    "@hopara/service-worker": "2.4.57",
-    "@hopara/system-test": "2.4.57",
+    "@hopara/components": "2.4.58",
+    "@hopara/config": "2.4.58",
+    "@hopara/design-system": "2.4.58",
+    "@hopara/internals": "2.4.58",
+    "@hopara/rum": "2.4.58",
+    "@hopara/service-worker": "2.4.58",
+    "@hopara/system-test": "2.4.58",
     "babel-loader": "8.1.0",
     "customize-cra": "^1.0.0",
     "lodash": "~4.17.21",

package/src/client/index.ts

@@ -0,0 +1,256 @@
+import { EventEmitter } from '../events/EventEmitter'
+import { EventReceiver } from '../events/EventReceiver'
+import { CallbackFunctionData, InitData, LoadDataRequestData, PostMessageEvent, isCallbackFunctionEvent, isLoadDataEvent, isReadyEvent } from '../events/Events'
+import packageJSON from '../../package.json'
+import { DataLoader } from '@hopara/dataset'
+import { Logger } from '@hopara/internals'
+
+interface CallbackAction {
+  name: string
+  callback: (data: any) => void
+}
+
+export interface HoparaIframeConfig extends InitData {
+  targetElementId?: string
+  targetElement?: HTMLElement | null
+  version?: string
+  debug?: boolean
+  embeddedUrl?: string
+  callbacks?: CallbackAction[]
+}
+
+const embeddedEnvUrl = {
+  'test': 'https://statics.test.hopara.app/embedded',
+  'production': 'https://statics.hopara.app/embedded',
+}
+
+export class Hopara {
+  private static _version = packageJSON.version
+  config: HoparaIframeConfig
+  private iframe?: HTMLIFrameElement
+  private readyEventTimeoutId?: number
+  private readonly readyEventTimeoutMs = 5000
+
+  constructor(config: HoparaIframeConfig) {
+    this.config = config
+  }
+
+  private getIframeSrc() {
+    const envUrl = embeddedEnvUrl[this.config.env ?? 'production'] ?? embeddedEnvUrl.production
+    const url = this.config.embeddedUrl ? this.config.embeddedUrl : `${envUrl}/${this.config.version ? this.config.version : 'latest'}`
+    return `${url}?v=${Date.now()}${this.config.debug ? '&debug=true' : ''}`
+  }
+
+  private getIframeStyle() {
+    return 'background-color: transparent; border: 0px none transparent; padding: 0px; overflow: hidden; width: 100%; height: 100%;'
+  }
+
+  private createIframe(): HTMLIFrameElement {
+    const iframe = document.createElement('iframe')
+
+    iframe.setAttribute('src', this.getIframeSrc())
+    iframe.setAttribute('allow', 'geolocation; fullscreen')
+    iframe.setAttribute('style', this.getIframeStyle())
+    iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation allow-modals allow-downloads allow-top-navigation')
+  
+    return iframe
+  }
+
+  private getEventData(): InitData {
+    const eventData = {
+      ...this.config,
+      visualizationId: this.config.visualizationId ?? (this.config as any).visualization ?? (this.config as any).app,
+      dataLoaders: this.config.dataLoaders?.map((dataLoader) => {
+        return {
+          query: dataLoader.query ?? (dataLoader as any).name,
+          source: dataLoader.source,
+          cache: dataLoader.cache,
+        } as DataLoader
+      }),
+      callbackNames: this.config.callbacks?.map((callback) => callback.name),
+
+      // remove uneccessary properties from the event data to prevent postMessage errors and reduce the payload size
+      callbacks: undefined,
+      targetElementId: undefined,
+      targetElement: undefined,
+    }
+
+    return eventData
+  }
+
+  private handleReadyEvent(targetWindow: Window | MessageEventSource) {
+    return EventEmitter.init(this.getEventData(), targetWindow as Window)
+  }
+
+  private handleLoadDataEvent(event: PostMessageEvent<LoadDataRequestData>, targetWindow: Window | MessageEventSource) {
+    const dataLoader = this.config.dataLoaders?.find((dataLoader) => {
+      return (dataLoader.query === event.data.data.query || (dataLoader as any).name === event.data.data.query) &&
+             dataLoader.source === event.data.data.source
+    })
+
+    return dataLoader?.loader(event.data.filterSet)
+      .then((data) => EventEmitter.loadDataResponse(
+        this.getEventData(),
+        dataLoader,
+        data,
+        undefined,
+        targetWindow as Window,
+      ))
+      .catch((error) => EventEmitter.loadDataResponse(
+        this.getEventData(),
+        dataLoader,
+        [],
+        error,
+        targetWindow as Window,
+      ))
+  }
+
+  handleCallbackFunctionEvent(event: PostMessageEvent<CallbackFunctionData>) {
+    const callbackFunc = this.config.callbacks?.find((callback) => callback.name === event.data.name)
+    if (!callbackFunc) return
+    return callbackFunc.callback(event.data.row)
+  }
+
+  listenerFunction(event: PostMessageEvent<any>) {
+    const targetWindow = this.iframe?.contentWindow ?? event.source
+    if (!targetWindow && EventReceiver.isHoparaMessage(event)) {
+      throw new Error('Hopara: targetWindow is not available')
+    }
+
+    if (isReadyEvent(event)) {
+      this.clearReadyEventTimeout()
+      return this.handleReadyEvent(targetWindow!)
+    }
+
+    if (isLoadDataEvent(event)) {
+      return this.handleLoadDataEvent(event, targetWindow!)
+    }
+
+    if (isCallbackFunctionEvent(event)) {
+      return this.handleCallbackFunctionEvent(event)
+    }
+  }
+
+  private cachedListenerFunction
+
+  private createListeners() {
+    this.cachedListenerFunction = this.listenerFunction.bind(this)
+    window.addEventListener('message', this.cachedListenerFunction, true)
+  }
+
+  private removeListeners() {
+    window.removeEventListener('message', this.cachedListenerFunction, true)
+  }
+
+  private scheduleReadyEventTimeout(targetWindow?: Window | MessageEventSource | null) {
+    if (typeof window === 'undefined') return
+
+    const windowToWatch = targetWindow ?? this.iframe?.contentWindow ?? null
+    if (!windowToWatch) return
+
+    this.clearReadyEventTimeout()
+    this.readyEventTimeoutId = window.setTimeout(() => {
+      Logger.warn('Hopara: ready event not received within 5s, reloading target window')
+      this.readyEventTimeoutId = undefined
+      this.reloadTargetWindow(windowToWatch)
+    }, this.readyEventTimeoutMs)
+  }
+
+  private clearReadyEventTimeout() {
+    if (!this.readyEventTimeoutId) return
+
+    clearTimeout(this.readyEventTimeoutId)
+    this.readyEventTimeoutId = undefined
+  }
+
+  private reloadTargetWindow(targetWindow?: Window | MessageEventSource | null) {
+    const windowToReload = targetWindow ?? this.iframe?.contentWindow ?? null
+    if (!windowToReload && !this.iframe) return
+
+    let reloaded = false
+
+    if (windowToReload) {
+      try {
+        const location = (windowToReload as Window).location
+        if (location && typeof location.reload === 'function') {
+          location.reload()
+          reloaded = true
+        }
+      } catch (error) {
+        Logger.warn('Hopara: unable to reload target window directly', error as Error)
+      }
+    }
+
+    if (!reloaded && this.iframe) {
+      this.iframe.setAttribute('src', this.getIframeSrc())
+      reloaded = true
+    }
+
+    if (reloaded) {
+      this.scheduleReadyEventTimeout()
+    }
+  }
+
+  private doInit = () => {
+    const targetElement = this.config.targetElementId ? document.getElementById(this.config.targetElementId) : this.config.targetElement
+    if (!targetElement) {
+      Logger.warn('Hopara: targetElement not found')
+      return this
+    }
+  
+    const iframe = this.createIframe()
+    targetElement.appendChild(iframe)
+    this.iframe = iframe
+
+    this.createListeners()
+    this.scheduleReadyEventTimeout()
+    return this
+  }
+
+  refresh(): void {
+    if (!this.iframe) throw new Error('Hopara: iframe is not available')
+
+    if (this.iframe.contentWindow) {
+      EventEmitter.refresh(this.getEventData(), this.iframe.contentWindow)
+    }
+  }
+
+  update(config: Partial<HoparaIframeConfig>): void {
+    this.config = Object.assign({}, this.config, config)
+
+    if (this.iframe?.contentWindow) {
+      EventEmitter.update(this.getEventData(), this.iframe.contentWindow)
+    }
+  }
+
+  destroy(): void {
+    if (!this.iframe) throw new Error('Hopara: iframe is not available')
+
+    this.iframe.remove()
+    this.iframe = undefined
+    this.clearReadyEventTimeout()
+    this.removeListeners()
+  }
+
+  static init(config: HoparaIframeConfig) {
+    if (!config) {
+      Logger.warn('Hopara: init config not present'); return
+    }
+    if ((!window || !window.document)) {
+      Logger.warn('Hopara: window is not available'); return
+    }
+
+    const client = new Hopara(config)
+    return client.doInit()
+  }
+
+  static moduleVersion(): string {
+    return this._version
+  }
+
+  moduleVersion(): string {
+    return Hopara._version
+  }
+}
+
+export default Hopara

package/src/demo/Demo.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import Hopara from '../client'
+import buildingsData from './resources/buildings-data.json'
+import sensorsData from './resources/sensors-data.json'
+import assetsData from './resources/assets-data.json'
+import { PureComponent } from '@hopara/design-system'
+
+export class DemoPage extends PureComponent<any> {
+  componentDidMount(): void {
+    const hopara = Hopara.init({
+      debug: true,
+      visualizationId: '',
+      fallbackVisualizationId: '',
+      tenant: '',
+      accessToken: '',
+      // refreshToken: '',
+      targetElementId: 'embedded-target-element',
+      darkMode: true,
+      // filters: [{
+      //   field: 'type',
+      //   values: ['REFRIGERATOR', 'FREEZER'],
+      // }],
+      // initialRow: {
+      //   layerId: 'hopara-floors',
+      //   rowId: '1',
+      // },
+      embeddedUrl: 'http://localhost:3000/',
+      dataLoaders: [
+        // ...ibbxMockLoaders,
+        {
+          query: 'labs_floorplans',
+          source: 'sample',
+          loader: async () => {
+            return buildingsData
+          },
+        } as any,
+        {
+          query: 'sensors',
+          source: 'sample',
+          loader: async () => {
+            return sensorsData
+          },
+        } as any,
+        {
+          query: 'labs_assets',
+          source: 'sample',
+          loader: async () => {
+            return assetsData
+          },
+        } as any,
+      ],
+      callbacks: [
+        {
+          name: 'CALLBACK_TEST',
+          callback: (data) => {
+            alert(`CALLBACK_TEST 4: ${data._id}`)
+          },
+        },
+        {
+          name: 'goTo3D',
+          callback: () => {
+            hopara?.update({
+              visualizationId: '78-ativo-3d-2',
+              fallbackVisualizationId: 'ativo-3d-2',
+            })
+          },
+        },
+        {
+          name: 'goTo2D',
+          callback: () => {
+            hopara?.update({
+              visualizationId: '78-ativo-2d-2',
+              fallbackVisualizationId: 'ativo-2d-2',
+            })
+          },
+        },
+      ],
+    })
+
+    // setInterval(() => {
+      // hopara?.update({
+      //   visualizationId: '78-ativo-3d-2',
+      //   fallbackVisualizationId: 'ativo-3d-2',
+      // })
+    // }, 10000)
+  }
+
+  render() {
+    return (
+      <div style={{
+        display: 'grid',
+        gridTemplateRows: '70px 1fr',
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+      }}>
+        <h1 style={{
+          alignItems: 'center',
+          background: '#efefef',
+          display: 'flex',
+          font: '22px sans-serif',
+          justifyContent: 'center',
+          margin: 0,
+          padding: '0.5em',
+          textAlign: 'center',
+        }}>
+          Hopara embedded demo page!
+        </h1>
+        <div
+          id="embedded-target-element"
+          style={{
+            width: '100%',
+            height: '100%',
+            background: '#fefefe',
+          }}></div>
+      </div>
+      )
+    }
+  }

package/src/demo/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import {createRoot} from 'react-dom/client'
+import { DemoPage } from './Demo'
+
+createRoot(
+  document.getElementById('root') as Element)
+  .render(<DemoPage />)