ntnsndr/protocol-bicorder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added contextual content to the web app, some aesthetic improvements

Browse Source
This commit is contained in:
Nathan Schneider
2025-12-02 22:28:15 -07:00
parent f123db6faf
commit 912e209b80
8 changed files with 305 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
bicorder-app/src/App.svelte
View File

@@ -5,6 +5,7 @@
import MetadataFields from './components/MetadataFields.svelte';
import AnalysisDisplay from './components/AnalysisDisplay.svelte';
import ExportControls from './components/ExportControls.svelte';
import HelpModal from './components/HelpModal.svelte';
// Load bicorder data from build-time constant
let data: BicorderState = JSON.parse(JSON.stringify(__BICORDER_DATA__));
@@ -19,6 +20,7 @@
let viewMode: ViewMode = 'focused'; // Focused is default
let currentScreen = 0;
let refreshKey = 0; // Used to force component refresh in focused mode
let isHelpOpen = false;
// Screen types
type Screen =
@@ -212,10 +214,17 @@
location.reload();
}
}
function openHelp() {
isHelpOpen = true;
}
</script>
<HelpModal bind:isOpen={isHelpOpen} />
<main>
<div class="header">
<button class="help-btn" on:click={openHelp} aria-label="About the Bicorder">?</button>
<div class="title">Protocol</div>
<div class="title">BICORDER</div>
<button class="mode-toggle" on:click={toggleViewMode} aria-label="Toggle view mode">
@@ -225,6 +234,10 @@
{#if viewMode === 'list'}
<!-- LIST MODE: Show all sections -->
<div class="description">
<p>A diagnostic tool for the study of protocols</p>
</div>
<MetadataFields
metadata={data.metadata}
on:update={handleMetadataUpdate}
@@ -277,6 +290,12 @@
{:else}
<!-- FOCUSED MODE: Show one screen at a time -->
{#if currentScreen === 0}
<div class="description">
<p>A diagnostic tool for the study of protocols</p>
</div>
{/if}
<div class="focused-container">
{#if currentScreenData.type === 'metadata'}
<div class="focused-screen">
@@ -393,6 +412,10 @@
</div>
</div>
{/if}
<footer class="footer">
<p>Initiated by <a href="https://nathanschneider.info" rel="nofollow">Nathan Schneider</a>; <a href="https://git.medlab.host/ntnsndr/protocol-bicorder/src/branch/main/bicorder-app" rel="nofollow">source code</a> licensed under the <a href="https://firstdonoharm.dev/" rel="nofollow">Hippocratic License</a> (do no harm!).</p>
</footer>
</main>
<style>
@@ -407,7 +430,7 @@
.header {
text-align: center;
margin-bottom: 2rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
padding-bottom: 1rem;
position: relative;
@@ -419,6 +442,32 @@
letter-spacing: 0.2rem;
}
.help-btn {
position: absolute;
top: 0;
left: 0;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
background: var(--bg-color);
color: var(--fg-color);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.4;
transition: opacity 0.2s, background-color 0.2s;
}
.help-btn:hover {
opacity: 0.8;
background-color: var(--input-bg);
}
.mode-toggle {
position: absolute;
top: 0;
@@ -440,6 +489,33 @@
border-color: var(--border-color);
}
.description {
text-align: center;
padding: 1rem;
margin-bottom: 2rem;
border: 1px solid var(--border-color);
background-color: var(--input-bg);
font-size: 0.9rem;
line-height: 1.6;
}
.description p {
margin: 0;
}
.footer {
margin-top: auto;
padding: 2rem 1rem 1rem;
border-top: 2px solid var(--border-color);
text-align: center;
font-size: 0.85rem;
opacity: 0.7;
}
.footer p {
margin: 0.5rem 0;
}
.diagnostic-set, .analysis-section {
margin: 2rem 0;
padding: 1rem 0;
@@ -502,9 +578,7 @@
}
.gradient-focused {
padding: 2rem;
border: 2px solid var(--border-color);
background-color: var(--bg-color);
padding: 0;
display: flex;
flex-direction: column;
gap: 2rem;
@@ -603,11 +677,28 @@
font-size: 1rem;
}
.help-btn {
width: 1.75rem;
height: 1.75rem;
font-size: 1rem;
}
.mode-toggle {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
}
.description {
padding: 0.75rem;
font-size: 0.85rem;
margin-bottom: 1.5rem;
}
.footer {
padding: 1.5rem 0.5rem 0.5rem;
font-size: 0.8rem;
}
.progress-bar {
font-size: 0.85rem;
letter-spacing: 0.05rem;
@@ -622,7 +713,7 @@
}
.gradient-focused {
padding: 1rem;
padding: 0;
gap: 1.5rem;
}

146
bicorder-app/src/components/HelpModal.svelte Normal file
View File

@@ -0,0 +1,146 @@
<script lang="ts">
export let isOpen = false;
function closeModal() {
isOpen = false;
}
function handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape') {
closeModal();
}
}
</script>
<svelte:window on:keydown={handleKeyDown} />
{#if isOpen}
<div class="modal-backdrop" on:click={closeModal} on:keydown={() => {}} role="button" tabindex="-1">
<div class="modal-content" on:click|stopPropagation on:keydown={() => {}} role="dialog" aria-modal="true">
<div class="modal-header">
<h2>Help & Instructions</h2>
<button class="close-btn" on:click={closeModal} aria-label="Close help">×</button>
</div>
<div class="modal-body">
<p>The Protocol Bicorder is a diagnostic tool for the study of protocols. It allows a human or machine user to evaluate protocol characteristics along a series of gradients between opposing terms.</p>
<p>The name is a tribute to the tricorder, a fictional device in the Star Trek universe that the characters can use to obtain all manner of empirical data about their surroundings.</p>
<p>To carry out the diagnostic, the analyst should consider the protocol from the perspective of one of the <code>gradients</code> at a time. The gradients invite the analyst to determine where the protocol lies between two terms.</p>
<p>This is inevitably an interpretive exercise, but do your best to identify the most accurate <code>value</code>, with <code>1</code> being closest to <code>term_left</code> and <code>9</code> being closest to <code>term_right</code>.</p>
<p>Choosing a <code>value</code> in the middle, such as <code>5</code>, can mean "a bit of both." Leaving the gradient <code>value</code> as <code>null</code> means "not applicable."</p>
<p>There is a <code>notes</code> field for the analyst to add additional context or explanation.</p>
<p>The <code>shortform</code> option allows the use of an abbreviated version of the bicorder, including only the most salient gradients.</p>
<p>Happy protocol watching!</p>
</div>
</div>
</div>
{/if}
<style>
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
padding: 1rem;
}
.modal-content {
background-color: var(--bg-color);
border: 2px solid var(--border-color);
max-width: 600px;
width: 100%;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 2px solid var(--border-color);
}
.modal-header h2 {
margin: 0;
font-size: 1.3rem;
letter-spacing: 0.1rem;
}
.close-btn {
background: none;
border: none;
color: var(--fg-color);
font-size: 2rem;
line-height: 1;
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: opacity 0.2s;
}
.close-btn:hover {
opacity: 1;
}
.modal-body {
padding: 1.5rem;
overflow-y: auto;
line-height: 1.6;
}
.modal-body h3 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.1rem;
letter-spacing: 0.05rem;
}
.modal-body p {
margin-bottom: 1rem;
}
.modal-body code {
font-family: inherit;
font-size: inherit;
background: none;
padding: 0;
color: #888;
}
.modal-body strong {
color: var(--accent-color);
}
@media (max-width: 768px) {
.modal-content {
max-height: 90vh;
}
.modal-header {
padding: 1rem;
}
.modal-header h2 {
font-size: 1.1rem;
}
.modal-body {
padding: 1rem;
}
}
</style>