Added channel selector

.prettierrc

@@ -0,0 +1,5 @@
+{
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": false
+}

directory/appd.json

@@ -51,7 +51,11 @@
  "details": {
  "url": "http://localhost:3000/toolbox/fdc3-workbench/"
  },
- "hostManifests": {},
+ "hostManifests": {
+ "sail": {
+ "forceNewWindow": true
+ }
+ },
  "version": "1.0.0",
  "publisher": "FINOS",
  "icons": []

directory/sail.json

@@ -1,7 +1,7 @@
 {
  "applications": [
  {
- "appId": "trading-view-chart",
+ "appId": "trading-view-chart-1",
  "name": "Trading View Chart",
  "title": "Trading View Chart",
  "description": "Displays a chart of a given stock, using the TradingView applications",
@@ -35,6 +35,46 @@
  }
  }
  }
+ },
+ {
+ "appId": "trading-view-chart-2",
+ "name": "Trading View Chart",
+ "title": "Trading View Chart (New Window)",
+ "description": "Displays a chart of a given stock, using the TradingView applications",
+ "type": "web",
+ "details": {
+ "url": "/static/example-apps/tradingview/chart.html"
+ },
+ "screenshots": [
+ {
+ "src": "/static/example-apps/tradingview/chart.png",
+ "label": "Demo Screenshot"
+ }
+ ],
+ "hostManifests": {
+ "sail": {
+ "forceNewWindow": true
+ }
+ },
+ "version": "1.0.0",
+ "publisher": "FINOS",
+ "icons": [
+ {
+ "src": "/static/example-apps/tradingview/tradingview-icon.png"
+ }
+ ],
+ "interop": {
+ "intents": {
+ "listensFor": {
+ "ViewChart": {
+ "contexts": [
+ "fdc3.instrument"
+ ],
+ "displayName": "View Chart"
+ }
+ }
+ }
+ }
  }
  ],
  "message": "OK"

package.json

@@ -18,7 +18,7 @@
  "vite": "^5.0.2"
  },
  "dependencies": {
- "@kite9/fdc3": "2.2.0-beta.25",
+ "@kite9/fdc3": "../FDC3/packages/fdc3",
  "@kite9/fdc3-web-impl": "../FDC3/toolbox/fdc3-for-web/fdc3-web-impl",
  "@types/react-dom": "^18.2.25",
  "@types/uuid": "^9.0.8",

src/app/Icon.tsx

@@ -0,0 +1,5 @@
+import * as styles from "./styles.module.css"
+
+export const Icon = ({ image, text }: { image: string; text: string }) => {
+ return <img src={image} className={styles.iconImage} title={text} />
+}

src/app/channel-selector.tsx

@@ -0,0 +1,116 @@
+import { BrowserTypes } from "@kite9/fdc3"
+import { createRoot } from "react-dom/client"
+import { ChannelPicker } from "./channel"
+import { TabDetail } from "../client/state/ClientState"
+import "../../static/fonts/DM_Sans/DM_Sans.css"
+
+type IframeChannels = BrowserTypes.IframeChannels
+type IframeHello = BrowserTypes.IframeHello
+type IframeRestyle = BrowserTypes.IframeRestyle
+
+var channels: TabDetail[] = []
+var channelId: string | null = null
+
+const DEFAULT_COLLAPSED_CSS = {
+ position: "fixed",
+ "z-index": 1000,
+ right: "10px",
+ bottom: "10px",
+ width: "55px",
+ height: "55px",
+ transition: "all 0.5s ease-out allow-discrete",
+}
+
+const DEFAULT_EXPANDED_CSS = {
+ position: "fixed",
+ "z-index": 1000,
+ right: "10px",
+ bottom: "10px",
+ width: "250px",
+ height: "55px",
+ transition: "all 0.5s ease-out allow-discrete",
+}
+
+window.addEventListener("load", () => {
+ const parent = window.parent
+ const container = document.getElementById("channelSelector")!!
+ const root = createRoot(container!)
+ var open: boolean = false
+
+ const mc = new MessageChannel()
+ const myPort = mc.port1
+ myPort.start()
+
+ // ISSUE: 1302
+ parent.postMessage(
+ {
+ type: "iframeHello",
+ payload: {
+ initialCSS: DEFAULT_COLLAPSED_CSS,
+ implementationDetails: "Demo Channel Selector v1.0",
+ },
+ } as any as IframeHello,
+ "*",
+ [mc.port2],
+ )
+
+ function changeSize(expanded: boolean) {
+ open = expanded
+ renderChannels(open)
+ document.body.setAttribute("data-expanded", "" + expanded)
+ myPort.postMessage({
+ type: "iframeRestyle",
+ payload: {
+ updatedCSS: expanded ? DEFAULT_EXPANDED_CSS : DEFAULT_COLLAPSED_CSS,
+ },
+ } as IframeRestyle)
+ }
+
+ function activate(channelId: string | null) {
+ myPort.postMessage({
+ type: "iframeChannelSelected",
+ payload: { selected: channelId },
+ })
+ }
+
+ function renderChannels(isOpen: boolean) {
+ root.render(
+ <ChannelPicker
+ channels={channels}
+ selected={channelId}
+ open={isOpen}
+ activate={activate}
+ changeSize={() => changeSize(!isOpen)}
+ />,
+ )
+ }
+
+ myPort.addEventListener("message", (e) => {
+ console.log(e.data.type)
+ if (e.data.type == "iframeHandshake") {
+ // ok, port is ready, send the iframe position detials
+ myPort.postMessage({
+ type: "iframeRestyle",
+ payload: { updatedCSS: DEFAULT_COLLAPSED_CSS },
+ } as IframeRestyle)
+ } else if (e.data.type == "iframeChannels") {
+ const details = e.data as IframeChannels
+ console.log(JSON.stringify("CHANNEL DETAILS: " + JSON.stringify(details)))
+
+ channels = details.payload.userChannels.map((c) => {
+ return {
+ background: c.displayMetadata?.color ?? "white",
+ icon:
+ c.displayMetadata?.glyph ??
+ "/static/tabs/noun-airplane-3707662.svg",
+ title: c.displayMetadata?.name ?? "Untitled",
+ id: c.id,
+ }
+ })
+ channelId = details.payload.selected
+ renderChannels(false)
+ }
+ })
+
+ renderChannels(false)
+})