Dr. Tanner is a research professor at the University of Tennessee working towards making data science accessible using AI tools.
viewof ATOM = Inputs.file({
})
Inputs.textarea({
value: await ATOM.text(),
})
FEED = {
const $xml = await ATOM.xml();
return TOJSON($xml.firstElementChild);
function TOJSON($el) {
if ($el instanceof Text) {
return { name: '#text', value: $el.textContent };
}
const name = $el.nodeName;
const attributes = [];
for (let i=0, n=$el?.attributes?.length; i<n; ++i) {
const attr = $el.attributes[i];
const name = attr.localName;
const value = attr.value;
attributes.push({ name, value });
}
const children = [];
for (let i=0, n=$el.childNodes.length; i<n; ++i) {
const $child = $el.childNodes[i];
children.push(TOJSON($child));
}
return { name, attributes, children };
}
}
{
const root = htl.html`<div>`;
const shadowRoot = root.attachShadow({ mode: 'closed' });
shadowRoot.appendChild(htl.html`<style>${style.replaceAll(':root', ':host')}`)
const self = htl.html`<span>`;
shadowRoot.appendChild(self);
let title = null;
const messages = [];
for (let i=0, n=FEED.children.length; i<n; ++i) {
const current = FEED.children[i];
if (current.name === 'title') {
title = current.children[0].value;
continue;
}
if (current.name !== 'entry') continue;
const role = current.children.length === 8 ? 'poster' : 'commenter';
const author = current
.children.find(({ name }) => name === 'author')
.children.find(({ name }) => name === 'name')
.children.find(({ name }) => name === '#text')
.value;
const content = current
.children.find(({ name }) => name === 'content')
.children.find(({ name }) => name === '#text')
.value;
const $content = new DOMParser().parseFromString(content, 'text/html').querySelector('div.md');
messages.push({ author, content, $content, role });
}
render({ title, messages });
return root;
function $Message({ role, author, $content }) {
if (role === 'poster') {
return $PosterMessage({ author, $content });
} else if (role === 'commenter') {
return $CommenterMessage({ author, $content });
} else {
throw `bad role: ${role}`;
}
}
function $CommenterMessage({ author, $content }) {
return htl.html.fragment`
<div class="msg right-msg">
<div
class="msg-img"
style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"
></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name">${author}</div>
<!-- <div class="msg-info-time">12:46</div> -->
</div>
<div class="msg-text" style="white-space: pre-line">${$content}</div>
</div>
</div>
`/* htl.html.fragment */;
}
function $PosterMessage({ author, $content }) {
return htl.html.fragment`
<div class="msg left-msg">
<div
class="msg-img"
style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"
></div>
<div class="msg-bubble">
<div class="msg-info">
<div class="msg-info-name">${author}</div>
<!-- <div class="msg-info-time">12:45</div> -->
</div>
<div class="msg-text" style="white-space: pre-line">${$content}</div>
</div>
</div>
`/* htl.html.fragment */;
}
function render({ title, messages }) {
reconcile(self, htl.html`
<section class="msger">
<header class="msger-header">
<div class="msger-header-title">${title}</div>
</header>
<main class="msger-chat">
${messages.map($Message)}
</main>
</section>
`/* htl.html */);
} /* function render */
}
import {viewroutine, ask, fetchEventSource} from '@player1537/utilities'
import {reconcile} from '@tomlarkworthy/reconcile'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
