export default function App()

in src/components/App.ts [82:154]
69 lines of code
1 McCabe index (conditional complexity)

export default function App() {
    const [selectedPings, setSelectedPings] = createSignal([]);
    const [selectedSignature, setSelectedSignature] = createSignal<SignatureInfo>();
    const [filterInfo, setFilterInfo] = createSignal<FilterInfo>();
    const [selectedPing, setSelectedPing] = createSignal<PingInfo>();
    const [settingsLoaded, setSettingsLoaded] = createSignal(false);

    loadAndPopulateSettings(() => setSettingsLoaded(true));

    const loadingSources = () => html`
        <div style=${{ width: "50ch" }}>
            <h2>Loading...</h2>
            <${SourceStatus} />
        </div>
    `;

    const main = () => html`
        <${Layout} column>
            <${Layout} row size="content" element="header">
                <${Layout} size="content">
                    <h1>Crash Pings</h1>
                <//>
                <${Layout} size="content">
                    <${DateFilter} dates=${setDates} />
                <//>
                <${Layout} fill=1 />
                <${Layout} size="content">
                    <${Link} />
                <//>
            <//>
            <${Suspense} fallback=${loadingSources}>
                <${Layout} row element="main">
                    <${Layout} size="14em">
                        <${Selection} pings=${allPings} selectedPings=${setSelectedPings} filterInfo=${setFilterInfo}>
                            <${MultiselectFilter} field="channel" />
                            <${MultiselectFilter} field="process" />
                            <${MultiselectFilter} field="ipc_actor" prettyName="utility ipc actor"
                                requires=${{ "process": "utility" }} />
                            <${MultiselectFilter} field="version" />
                            <${MultiselectFilter} field="os" />
                            <${FiltersForField} field="os">${osVersionFilter}<//>
                            <${MultiselectFilter} field="arch" />
                        <//>
                    <//>
                    <${Layout} column>
                        <${Layout} frame>
                            <${Signatures} pings=${selectedPings} sort="clients" selectedSignature=${setSelectedSignature}><//>
                        <//>
                        <${Show} when=${selectedSignature}>
                            <${Layout} frame size="content" "aria-live"="polite">
                                <${SignatureDetail} signature=${selectedSignature} filterInfo=${filterInfo}><//>
                            <//>
                        <//>
                    <//>
                    <${Layout} column>
                        <${Show} when=${selectedSignature}>
                            <${Layout} frame "aria-live"="polite">
                                <${Pings} signature=${selectedSignature} selectedPing=${setSelectedPing}><//>
                            <//>
                            <${Show} when=${selectedPing}>
                                <${Layout} frame "aria-live"="polite">
                                    <${PingDetail} ping=${selectedPing}><//>
                                <//>
                            <//>
                        <//>
                    <//>
                <//>
            <//>
        <//>
    `;

    return html`<${Show} when=${settingsLoaded}>${main}<//>`;
};