Using Observable for software engineering, programming language and user interface research.
Public
Edited
Dec 25, 2022
render(Codex, {})
data = fetch("https://sebastienpierre.me/d/codex.json").then((_) => _.json())
DataPanels = data
.map((_) =>
Object.entries(_).reduce(
(r, [k, v]) => {
if (v instanceof Array) {
r.items.push({
name: k,
value: v.map(({ name, type }) => ({ name, type }))
});
}
return r;
},
{ items: [] }
)
)
.slice(0, 3)
Explorer = component(({}) => {
return H.div({ style: { flexGrow: 1 } }, Panels({ items: DataPanels }));
})
Panels = component(({ items }) => {
const { Panels, Panel } = styled({
Panels: {
width: "320px",
height: "100%",
display: "flex",
border: "1px solid red"
},
Panel: {
width: "160px",
boxSizing: "border-box",
border: "1px solid yellow",
overflowY: "auto",
borderRight: "1px solid ${Cyan.border}"
}
});
//return Panels($(items).map((_) => Panel(_)));
return Panels($(items).map((_) => Panel($(_).map(Group(_)))));
})
Group = component(({ title, items }) => {
const { Title, List, Item, Symbol } = styled({
"Title:h3": {
fontWeight: "bold",
fontSize: "100%",
color: "$Cyan",
marginBottom: "0.5em"
},
"Item:li": { padding: "0px", margin: "0px", listStyleType: "none" },
"List:ul": { padding: "0px", margin: "0px", listStyleType: "none" },
"Symbol:span": {
display: "inline-flex",
"&:before": {
content: " ",
display: "inline-block",
minWidth: "2ch"
},
"&[data-type=moduleattribute]:before": {
content: "="
}
}
});
return H.div(
Title(title),
List(
$(items).map(({ name, type }) =>
Item(Symbol({ "data-type": type }, name))
)
)
);
})
Codex = component(({}) => {
const { Application } = styled({
Application: {
"@": [
"import(https://pvinis.github.io/iosevka-webfont/7.0.2/iosevka.css)"
],
width: "100%",
borderRadius: "4px",
height: "600px",
fontFamily: "Iosevka, monospace",
color: "$White",
background: "$Black",
display: "flex",
flexDirection: "column"
}
});
return Application(Navigation(), Explorer());
})
Tokens = ({
Black: "#000000",
White: "#FFFFFF",
Cyan: "#00FFF1",
Font: {
Base: "Ioseveka"
},
Background: "$Black",
Focused: "$Cyan",
border: (_) => _.color.alpha(0.1)
})
token("$Black") // TODO: token("$Cyan") does not work
token = (_) => parseToken(_, Tokens)
styled = (_) => _styled(_, Tokens)
Rules
import {
H,
$,
cells,
component,
render,
parseToken,
Rules,
styled as _styled
} from "@sebastien/ui-kit"
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.
