Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrite channel selector to use updated message types #1345

Merged
merged 25 commits into from
Nov 4, 2024
Merged

Rewrite channel selector to use updated message types #1345

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
75e5afa
Rewrite channel selector to use updated message types
julianna-ciq Sep 10, 2024
ada459d
Update UI
julianna-ciq Sep 16, 2024
ae5c4d5
Update UI
julianna-ciq Sep 16, 2024
e592a49
Fix infinite loop issue with ChartIQ
julianna-ciq Sep 16, 2024
39e57b2
Merge remote-tracking branch 'upstream/fdc3-for-web-impl' into fdc3-f…
julianna-ciq Sep 16, 2024
de29cd8
Add additional styling info
julianna-ciq Sep 16, 2024
f0ff8c3
Merge branch 'fdc3-for-web-impl' of https://github.com/finos/FDC3 int…
julianna-ciq Sep 23, 2024
110ac58
Make the FDC3 logo visible on white backgrounds
julianna-ciq Sep 23, 2024
4577e2b
Add initialCSS to CS iframeHello
julianna-ciq Sep 23, 2024
79e32ff
Update dimensions
julianna-ciq Sep 24, 2024
18ede6b
Make intent resolver appear in app center as a dialog
julianna-ciq Sep 25, 2024
926a8af
Cleanup
julianna-ciq Sep 25, 2024
c9bf4b0
Merge branch 'fdc3-for-web-impl' into fdc3-for-web-impl-addon
julianna-ciq Oct 16, 2024
763419f
Update packages/addon/src/channel_selector.ts
julianna-ciq Oct 16, 2024
97aa62b
Update packages/addon/src/channel_selector.ts
julianna-ciq Oct 16, 2024
52be447
Update packages/addon/src/channel_selector.ts
julianna-ciq Oct 16, 2024
2cd919e
Update packages/addon/src/channel_selector.ts
julianna-ciq Oct 16, 2024
20175f1
Update packages/addon/src/channel_selector.ts
julianna-ciq Oct 16, 2024
15d209d
Merge branch 'fdc3-for-web-impl-addon' of https://github.com/InteropI…
julianna-ciq Oct 16, 2024
f3553c1
Update packages/addon/src/intent_resolver.ts
julianna-ciq Oct 16, 2024
6bbd210
Update packages/addon/src/intent_resolver.ts
julianna-ciq Oct 16, 2024
13ae485
Update packages/addon/src/intent_resolver.ts
julianna-ciq Oct 16, 2024
ebe8b7d
Merge branch 'fdc3-for-web-impl-addon' of https://github.com/InteropI…
julianna-ciq Oct 16, 2024
469cca6
Update message types
julianna-ciq Oct 17, 2024
e484919
Merge remote-tracking branch 'upstream/fdc3-for-web-impl' into fdc3-f…
julianna-ciq Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions packages/addon/public/channel_selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,16 @@

#list {
background-color: white;
border: 1px solid lightgrey;
border-radius: 3px;
padding: 10px;
margin: 10px;
padding: 20px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
font-family: sans-serif;
display: none;
position: fixed;
bottom: 4px;
right: 4px;

& > div {
font-size: 18px;
height: 24px;
Expand All @@ -41,14 +46,20 @@
}
#tokens {
display: none;
cursor: pointer;
}

body[data-expanded="true"] #list {
display: block;
}

body[data-expanded="false"] #tokens {
display: block;
}

.logo path {
stroke: black;
}
</style>
</head>
<body data-expanded="false">
Expand All @@ -60,6 +71,8 @@
<path class="st0_tUmL" d="M428.27,363.7v-234L239.55,238.65c0.11,0.99,0.58,1.85,0.58,2.87c0,11.73-7.91,21.26-18.57,24.5v217.03 L428.27,363.7L428.27,363.7z"></path>
<path class="st1_dMUi" d="M234.38,225.9l186.09-107.44v-0.58L214.13,0L7.8,117.89v0.58L193.89,225.9c4.75-6.15,11.86-10.38,20.24-10.38 C222.52,215.52,229.63,219.75,234.38,225.9L234.38,225.9z"></path>
<path class="st2_WNwV" d="M188.72,238.65L0,129.69v234l206.71,119.34V266.02c-10.67-3.24-18.57-12.77-18.57-24.5 C188.14,240.5,188.6,239.64,188.72,238.65L188.72,238.65z"></path>
</g>
</svg>
</div>
</body>
</html>
56 changes: 34 additions & 22 deletions packages/addon/public/intent_resolver.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,15 @@
display: flex;
flex-direction: column;
gap: 2px;
height: 235px;
height: fit-content;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ace;
border-radius: 8px;
width: fit-content;
position: fixed;
bottom: 4px;
right: 0;

& > div {
font-size: 18px;
Expand Down Expand Up @@ -105,31 +110,38 @@
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
font-family: sans-serif;
}

dialog {
border: none;
background: transparent;
}
</style>
</head>

<body data-visible="false">
<div class="container">
<h1>Intent Resolver</h1>

<div class="frontmatter">
Resolve intent for:
<select id="displayIntent"></select
><br />
</div>

<div class="tablist" role="tablist">
<div role="tab" tabindex="0" aria-selected="true" data-list-ref="new-list">New Apps</div>
<div role="tab" tabindex="0" aria-selected="false" data-list-ref="open-list">Open Apps</div>
</div>

<div id="new-list" class="list" data-visible="true"></div>

<div id="open-list" class="list" data-visible="false"></div>

<div class="button-row">
<button id="cancel">Cancel</button>
<dialog>
<div class="container">
<h1>Intent Resolver</h1>

<div class="frontmatter">
Resolve intent for:
<select id="displayIntent"></select
><br />
</div>

<div class="tablist" role="tablist">
<div role="tab" tabindex="0" aria-selected="true" data-list-ref="new-list">New Apps</div>
<div role="tab" tabindex="0" aria-selected="false" data-list-ref="open-list">Open Apps</div>
</div>

<div id="new-list" class="list" data-visible="true"></div>

<div id="open-list" class="list" data-visible="false"></div>

<div class="button-row">
<button id="cancel">Cancel</button>
</div>
</div>
</div>
</dialog>
</body>
</html>
152 changes: 106 additions & 46 deletions packages/addon/src/channel_selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { ChannelDetails, SelectorMessageChannels } from "@kite9/fdc3-common";
import { IframeChannelsPayload, Channel } from "@kite9/fdc3-common";


var channels: ChannelDetails[] = []
var channelId: string | null = null

function fillChannels(data: ChannelDetails[], selected: string | null, messageClickedChannel: (s: String) => void) {
const fillChannels = (data: Channel[], selected: string | null, messageClickedChannel: (s: string | null) => void) => {
const list = document.getElementById('list')!!;
list.innerHTML = '';

Expand All @@ -14,17 +11,25 @@ function fillChannels(data: ChannelDetails[], selected: string | null, messageCl

const span = document.createElement('span');
span.classList.add('glyph');
span.style.color = displayMetadata.color;
span.style.borderColor = displayMetadata.color;
span.textContent = displayMetadata.glyph ?? '';

if(displayMetadata?.color){
span.style.color = displayMetadata.color;
span.style.borderColor = displayMetadata.color;
}
span.textContent = displayMetadata?.glyph ?? '';
node.appendChild(span);
const span2 = document.createElement('span');
span2.classList.add('name');
span2.textContent = displayMetadata.name;
node.appendChild(span2);
list.appendChild(node);
node.addEventListener('click', () => messageClickedChannel(id));

if(displayMetadata?.name){
const span2 = document.createElement('span');
span2.classList.add('name');
span2.textContent = displayMetadata.name;
node.appendChild(span2);
}

list.appendChild(node);
node.addEventListener('click', () => {
messageClickedChannel(id)
});

if (id === selected) {
node.setAttribute("aria-selected", "true");
Expand All @@ -35,40 +40,95 @@ function fillChannels(data: ChannelDetails[], selected: string | null, messageCl

window.addEventListener("load", () => {
const parent = window.parent;
const logo = document.getElementById("logo")!!
const logo = document.getElementById("logo")!;

const mc = new MessageChannel();
const myPort = mc.port1
myPort.start()

parent.postMessage({ type: "SelectorMessageInitialize" }, "*", [mc.port2]);

function changeSize(expanded: boolean) {
document.body.setAttribute("data-expanded", "" + expanded);
myPort.postMessage({ type: "SelectorMessageResize", expanded })
}

myPort.addEventListener("message", (e: MessageEvent) => {
if (e.data.type == 'SelectorMessageChannels') {
const details = e.data as SelectorMessageChannels
// console.log(JSON.stringify("CHANNEL DETAILS: " + JSON.stringify(details)))
channels = details.channels
channelId = details.selected

const selectedColor = (channelId ? (channels.find(c => c.id == channelId)?.displayMetadata?.color) : null) ?? 'black'
logo.style.fill = selectedColor
const myPort = mc.port1;
myPort.start();
myPort.onmessage = ({data}) => {
console.debug("Received message: ", data);
switch(data.type){
case "iframeHandshake": {
collapse();
break;
}
case "iframeChannels": {
logo.removeEventListener("click", expand);
julianna-ciq marked this conversation as resolved.
Show resolved Hide resolved
const {userChannels, selected} = data.payload as IframeChannelsPayload;
fillChannels(userChannels, selected, (channelStr) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IframeChannelsPayload needs updating to the new type name.

Suggested change
const {userChannels, selected} = data.payload as IframeChannelsPayload;
const {userChannels, selected} = data.payload as Fdc3UserInterfaceChannelsPayload;

However, you are also using one of the generated components of the top level type. The naming of these is unstable and they should not be used directly. Instead, you should type the data element as Fdc3UserInterfaceChannels instead and rework accordingly

myPort.postMessage({
type: "iframeChannelSelected",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be better to initialise the message as an object and use the Fdc3UserInterfaceChannelSelected type to check it, then post it.

payload: {
julianna-ciq marked this conversation as resolved.
Show resolved Hide resolved
selected: channelStr || null
}
});
collapse();
});
const selectedChannel = userChannels.find((c) => c.id === selected);
logo.style.fill = selectedChannel?.displayMetadata?.color ?? "white";
logo.addEventListener("click", expand);
break;
}
}
})

logo.addEventListener("click", () => {
fillChannels(channels, channelId, (id) => {
changeSize(false)
myPort.postMessage({ type: "SelectorMessageChoice", channelId: id })
})

// ask the parent container to increase the window size
changeSize(true)
})
};

parent.postMessage({
type: "iframeHello",
payload: {
julianna-ciq marked this conversation as resolved.
Show resolved Hide resolved
initialCSS: {
width: `${8*4}px`,
height: `${8*5}px`,
right: "2px",
bottom: "2px",
zIndex: "1000",
"z-index": "1000",
position: "fixed"

}
}
}, "*", [mc.port2]);

const expand = () => {
document.body.setAttribute("data-expanded", "true");
myPort.postMessage({
type: "iframeRestyle",
payload: {
julianna-ciq marked this conversation as resolved.
Show resolved Hide resolved
updatedCSS: {
width: `100%`,
height: `100%`,
top: 0,
left: 0,
zIndex: "1000",
"z-index": "1000",
position: "fixed"
}
}
});
}

const collapse = () => {
myPort.postMessage({
type: "iframeRestyle",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above - I would set up the message as an object and apply typing, then post it.

payload: {
julianna-ciq marked this conversation as resolved.
Show resolved Hide resolved
updatedCSS: {
width: `${8*4}px`,
height: `${8*5}px`,
right: "2px",
bottom: "2px",
zIndex: "1000",
"z-index": "1000",
position: "fixed"
}
}
});

// If you immediately change to the logo, before the iframe has a chance to finish restyling,
// you see a flicker of a giant, colored logo.
// Here, we wait a negligible amount of time, and hope that the restyling has finished. This avoids the flicker.
// It's not a *good* idea, it's just the best available, since we don't know when the restyle finishes.
setTimeout(() => {
document.body.setAttribute("data-expanded", "false");
}, 15);
}
Comment on lines +125 to +131
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doh, do we need to add a response message to the restyle message so that the DA can indicate that it has applied the change? That's likely to add some lag however, so we might be just exchanging one artefact for another...

This is exactly the sort of issue that we need to explore and provide advice on handling so thank you for identifying it. We'll need to think though reliable solutions / designs that avoid this...


})
});
Loading
Loading