feat(ui): extend minimal doctor design across all screens
CI / ruff · pytest (pull_request) Successful in 2m16s
CI / ruff · pytest (pull_request) Successful in 2m16s
Refs #85
This commit is contained in:
Pavel Eliseev
@@ -42,7 +42,10 @@ def dose_strip_html(grid: h.DoseGrid, start: date | None) -> str:
|
||||
f'<span><i style="border:1.5px dashed var(--grey)"></i>ожидается · {c["pending"]}</span>'
|
||||
"</div>"
|
||||
)
|
||||
return f'<div class="mt-doses" style="grid-template-columns:{cols}">{"".join(cells)}</div>{legend}'
|
||||
return (
|
||||
f'<div class="mt-dose-scroll"><div class="mt-doses" style="grid-template-columns:{cols}">'
|
||||
f"{''.join(cells)}</div></div>{legend}"
|
||||
)
|
||||
|
||||
|
||||
def _tile(label: str, value: str, hint: str = "", tone: str = "blue") -> str:
|
||||
@@ -181,7 +184,7 @@ def render(card: PatientCard, today: date | None) -> None:
|
||||
|
||||
main, side = st.columns([1.75, 1], gap="large")
|
||||
with main:
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-scales"):
|
||||
c1, c2 = st.columns(2)
|
||||
for col, scale_id, title in ((c1, "phq9", "PHQ-9"), (c2, "pcl5", "PCL-5")):
|
||||
fig = charts.scale_figure(card.series, scale_id, title, start)
|
||||
@@ -191,22 +194,22 @@ def render(card: PatientCard, today: date | None) -> None:
|
||||
else:
|
||||
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key=f"chart-{scale_id}")
|
||||
st.caption("◇ — внеплановое заполнение (по триггеру правил). Полосы — градации тяжести из config/scales.")
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-wellbeing"):
|
||||
fig = charts.wellbeing_figure(card.series, start)
|
||||
if fig is None:
|
||||
st.caption("Ежедневных чек-инов пока нет")
|
||||
else:
|
||||
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key="chart-wellbeing")
|
||||
st.caption("Красная зона настроения ≤ 3 (3 дня → внеплановый PHQ-9); пунктир — сон 4 ч.")
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-doses"):
|
||||
st.html('<div class="mt-panel-title">Календарь приёма</div>')
|
||||
st.html(dose_strip_html(grid, start))
|
||||
with side:
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-alerts"):
|
||||
_alerts_feed(card.alerts, today)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-summary"):
|
||||
_summary(card.summary)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-safety"):
|
||||
_safety_plan(card.safety_plan)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-prescriptions"):
|
||||
_prescriptions(card)
|
||||
|
||||
@@ -51,7 +51,7 @@ def render_playback_panel(persona: dict[str, Any]) -> None:
|
||||
token = persona["token"]
|
||||
scenario, source = w.scenario_for(persona)
|
||||
state = w.playback_state(token)
|
||||
st.subheader("🎬 Сценарий демо")
|
||||
st.subheader("Сценарий демо")
|
||||
_scenario_source_controls(persona, source)
|
||||
if scenario.errors:
|
||||
with st.expander(f"⚠️ Замечания к сценарию: {len(scenario.errors)}", expanded=not scenario.days):
|
||||
|
||||
@@ -368,10 +368,9 @@ def render_doctor_panel(highlight_token: str | None, *, key: str = "doc") -> Non
|
||||
]
|
||||
for a in fresh_acute[:1]:
|
||||
st.markdown(
|
||||
"<div style='background:#c62828;color:#fff;padding:18px 20px;border-radius:12px;"
|
||||
"font-size:1.35rem;font-weight:700;margin-bottom:8px'>"
|
||||
"<div class='mt-banner t-red mt-console-alert'><div>"
|
||||
f"🚨 ОСТРЫЙ АЛЕРТ · {_escape(a.get('patient_name', ''))} · {_fmt_ts(a.get('ts'))}<br>"
|
||||
f"<span style='font-size:1.05rem;font-weight:500'>{_escape(a.get('reason', ''))}</span></div>",
|
||||
f"<div class='mt-sub'>{_escape(a.get('reason', ''))}</div></div></div>",
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
c1, c2 = st.columns(2)
|
||||
|
||||
@@ -68,7 +68,7 @@ def _reset() -> None:
|
||||
|
||||
def _result(res: ConnectPatientOut, name: str) -> None:
|
||||
link = h.absolute_link(res.deep_link, os.environ.get("DASHBOARD_PUBLIC_URL", "http://localhost:8501"))
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-connect-result"):
|
||||
st.html(
|
||||
f'<div class="mt-kicker">Пациент подключён · {escape(name)}</div>'
|
||||
'<div class="mt-sub" style="margin:4px 0 10px">Покажите QR пациенту или продиктуйте код — бот спросит '
|
||||
@@ -108,7 +108,7 @@ def main() -> None:
|
||||
st.button("Заполнить демо-данными (Андрей)", icon=":material/auto_fix_high:", on_click=_fill_demo, args=(today,))
|
||||
|
||||
left, right = st.columns(2, gap="large")
|
||||
with left, st.container(border=True):
|
||||
with left, st.container(border=True, key="panel-connect-person"):
|
||||
st.html('<div class="mt-panel-title">Пациент</div>')
|
||||
st.text_input("Имя и инициал фамилии", key="cp_name", placeholder="Андрей С.", help="Без полного ФИО")
|
||||
a, b = st.columns(2)
|
||||
@@ -128,7 +128,7 @@ def main() -> None:
|
||||
key="cp_modules",
|
||||
format_func=lambda m: h.MODULE_LABELS[m],
|
||||
)
|
||||
with right, st.container(border=True):
|
||||
with right, st.container(border=True, key="panel-connect-prescription"):
|
||||
st.html('<div class="mt-panel-title">Назначение</div>')
|
||||
d1, d2 = st.columns([1.4, 1])
|
||||
with d1:
|
||||
|
||||
@@ -14,21 +14,31 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
|
||||
from console import widgets as w # noqa: E402
|
||||
from console.playback_ui import render_playback_panel # noqa: E402
|
||||
|
||||
from dashboard import theme # noqa: E402
|
||||
from dashboard.components import ui # noqa: E402
|
||||
|
||||
st.set_page_config(page_title="Демо-консоль", page_icon="🎬", layout="wide")
|
||||
|
||||
st.html(theme.CSS)
|
||||
st.html(
|
||||
ui.page_header(
|
||||
"Демо-консоль",
|
||||
"Чат пациента и сценарий сопровождения. Прототип на синтетических данных.",
|
||||
kicker="Демонстрация",
|
||||
)
|
||||
)
|
||||
|
||||
persona = w.select_persona()
|
||||
w.render_connect_hero()
|
||||
w.show_flash()
|
||||
st.sidebar.caption(f"API: {w.get_api().base_url}")
|
||||
|
||||
st.title("Демо-консоль")
|
||||
st.caption("Прототип на синтетических данных. Время — виртуальные демо-часы (ADR-005).")
|
||||
w.render_clock_bar(persona, key="console-clock")
|
||||
st.divider()
|
||||
with st.container(border=True, key="panel-console-clock"):
|
||||
w.render_clock_bar(persona, key="console-clock")
|
||||
|
||||
chat_col, play_col = st.columns([1.05, 1], gap="large")
|
||||
with chat_col:
|
||||
st.subheader(f"💬 Чат пациента — {persona.get('display_name') or persona['token']}")
|
||||
with chat_col, st.container(border=True, key="panel-console-chat"):
|
||||
st.subheader(f"Чат пациента — {persona.get('display_name') or persona['token']}")
|
||||
w.render_chat(persona["token"], height=560, key="console-chat")
|
||||
with play_col:
|
||||
with play_col, st.container(border=True, key="panel-console-scenario"):
|
||||
render_playback_panel(persona)
|
||||
|
||||
@@ -15,12 +15,12 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
|
||||
|
||||
from console import widgets as w # noqa: E402
|
||||
|
||||
from dashboard import theme # noqa: E402
|
||||
from dashboard.components import ui # noqa: E402
|
||||
|
||||
st.set_page_config(page_title="Сплит-экран", page_icon="🖥️", layout="wide", initial_sidebar_state="collapsed")
|
||||
st.markdown(
|
||||
"<style>.block-container{padding-top:1.2rem;max-width:100%} "
|
||||
"[data-testid='stMarkdownContainer'] p, [data-testid='stMarkdownContainer'] li{font-size:1.08rem}</style>",
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
st.html(theme.CSS)
|
||||
st.html(ui.page_header("Сплит-экран", "Пациент и врач: сопровождение в реальном времени.", kicker="Демонстрация"))
|
||||
|
||||
persona = w.select_persona()
|
||||
w.show_flash()
|
||||
@@ -44,15 +44,15 @@ if clicked and nxt is not None:
|
||||
st.rerun()
|
||||
|
||||
left, right = st.columns([1.1, 1], gap="large")
|
||||
with left:
|
||||
with left, st.container(border=True, key="panel-split-patient"):
|
||||
url = w.patient_web_url()
|
||||
if url:
|
||||
st.markdown(f"#### 📱 Пациент — {persona.get('display_name') or token}")
|
||||
st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
|
||||
st.iframe(url, height=760)
|
||||
st.caption(f"Веб-приложение пациента: {url}")
|
||||
else:
|
||||
st.markdown(f"#### 💬 Пациент — {persona.get('display_name') or token}")
|
||||
st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
|
||||
w.render_chat(token, height=600, key="split-chat")
|
||||
with right:
|
||||
st.markdown("#### 🩺 Кабинет врача — д-р Смирнова Е. А.")
|
||||
with right, st.container(border=True, key="panel-split-doctor"):
|
||||
st.markdown("#### Кабинет врача — д-р Смирнова Е. А.")
|
||||
w.polled_doctor_panel(token, key="split-doc")
|
||||
|
||||
+23
-6
@@ -138,8 +138,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-empty p {{ font-size:.85rem; margin:8px 0 0; }}
|
||||
|
||||
/* ---------- chips, badges, bars ---------- */
|
||||
.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 999px; margin-right: 4px;
|
||||
background: var(--blue-tint); color: var(--blue-ink); font-weight: 500; }}
|
||||
.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 5px; margin-right: 4px;
|
||||
background: #edf3ee; color: #38634b; font-weight: 500; }}
|
||||
.mt-badge {{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:550; padding: 5px 8px;
|
||||
border-radius: 5px; white-space: normal; }}
|
||||
.mt-badge.t-red {{ background: var(--red-tint); color: var(--red-ink); }}
|
||||
@@ -166,7 +166,7 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-banner b {{ color: inherit; }}
|
||||
.mt-pulse {{ width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; flex: none;
|
||||
box-shadow: 0 0 0 4px #faeeee; }}
|
||||
.mt-panel-title {{ font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650;
|
||||
.mt-panel-title {{ font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 550;
|
||||
color: var(--ink-3); margin: 2px 0 8px; }}
|
||||
.mt-alert {{ border-left: 4px solid var(--grey); padding: 4px 0 4px 12px; }}
|
||||
.mt-alert.t-red {{ border-left-color: var(--red); }}
|
||||
@@ -175,9 +175,9 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-alert .when {{ color: var(--ink-3); font-size: .78rem; }}
|
||||
.mt-alert .why {{ color: var(--ink); font-weight: 600; font-size: .92rem; margin: 2px 0; }}
|
||||
.mt-alert.acked .why {{ color: var(--ink-3); font-weight: 500; }}
|
||||
.mt-summary {{ background: var(--blue-tint); border-radius: 12px; padding: 14px 16px; color: var(--ink);
|
||||
line-height: 1.5; font-size: .93rem; }}
|
||||
.mt-summary .disc {{ color: var(--blue-ink); font-size: .76rem; margin-top: 8px; }}
|
||||
.mt-summary {{ background: #f4f6f2; border:1px solid var(--line); border-radius: 12px; padding: 14px 16px;
|
||||
color: var(--ink); line-height: 1.5; font-size: .93rem; }}
|
||||
.mt-summary .disc {{ color: var(--ink-2); font-size: .76rem; margin-top: 8px; }}
|
||||
.mt-plan ol {{ margin: 0; padding-left: 1.2rem; }}
|
||||
.mt-plan li {{ margin: 3px 0; color: var(--ink); font-size: .9rem; }}
|
||||
|
||||
@@ -195,6 +195,21 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-legend i {{ display:inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px;
|
||||
vertical-align: -1px; }}
|
||||
|
||||
/* ---------- internal pages ---------- */
|
||||
div[class*="st-key-panel-"] {{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
|
||||
padding:20px; }}
|
||||
[data-testid="stExpander"] {{ background:var(--surface); border-color:var(--line); border-radius:12px; }}
|
||||
[data-testid="stChatMessage"] {{ background:#f4f6f2; border:1px solid var(--line); border-radius:12px; }}
|
||||
[data-testid="stChatInput"] {{ background:var(--surface); border:1px solid var(--line); border-radius:8px; }}
|
||||
[data-testid="stNumberInputContainer"], [data-testid="stDateInput"] input {{
|
||||
background:var(--surface); color:var(--ink); border-color:var(--line); border-radius:8px; }}
|
||||
[data-testid="stApp"] [data-variant="pills"][data-selected] {{ background:#edf3ee; color:#285e4e;
|
||||
border-color:#b4c6ba; }}
|
||||
.mt-console-alert {{ font-size:1.1rem; font-weight:600; }}
|
||||
.mt-console-alert .mt-sub {{ color:var(--red-ink); font-weight:400; }}
|
||||
.mt-dose-scroll {{ overflow-x:auto; padding-bottom:4px; }}
|
||||
.mt-doses {{ min-width:max-content; }}
|
||||
|
||||
/* ---------- connect result ---------- */
|
||||
.mt-code {{ font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: var(--ink);
|
||||
font-variant-numeric: tabular-nums; }}
|
||||
@@ -222,6 +237,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-mobile-label {{ display:block; color:var(--ink-3); font-size:.68rem; margin-bottom:5px; }}
|
||||
.mt-row-details {{ grid-template-columns:1fr; gap:12px; }}
|
||||
.mt-list-footer {{ flex-wrap:wrap; }}
|
||||
.mt-head .mt-side {{ text-align:left; }}
|
||||
div[class*="st-key-panel-"] {{ padding:16px; }}
|
||||
.mt-tip:hover::after, .mt-tip:focus-visible::after {{ display:none; }}
|
||||
}}
|
||||
@media (prefers-reduced-motion: reduce) {{
|
||||
|
||||
Reference in New Issue
Block a user