@hippo-digital/hippocampus 1.0.0-rc.1

package/views/hippocampus/user.html

@@ -0,0 +1,157 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_list.njk" import bulletList %}
+
+{% block pageTitle %}{{ userGraph.user.label }}{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}/users">Back to users</a>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <span class="nhsuk-caption-l">User knowledge graph</span>
+      <h1>{{ userGraph.user.label }}</h1>
+      <p class="nhsuk-lede-text">{{ userGraph.user.description }}</p>
+    </div>
+  </div>
+
+  <section class="knowledge-section">
+    <h2>How this interlinks</h2>
+    <p>This page resolves links from the source data: user to scenarios, scenarios to needs, needs to evidence, and any journey, screen or decision links that already exist.</p>
+
+    <div class="knowledge-graph-summary">
+      <div><strong>{{ userGraph.scenarios.length }}</strong><span>Scenarios</span></div>
+      <div><strong>{{ userGraph.needs.length }}</strong><span>User needs</span></div>
+      <div><strong>{{ userGraph.evidence.length }}</strong><span>Evidence items</span></div>
+      <div><strong>{{ userGraph.journeys.length }}</strong><span>Journeys</span></div>
+      <div><strong>{{ userGraph.screens.length }}</strong><span>Screens</span></div>
+      <div><strong>{{ userGraph.decisions.length }}</strong><span>Decisions</span></div>
+    </div>
+
+    <div class="knowledge-graph">
+      {% for node in userGraph.graph.nodes %}
+        <article class="knowledge-graph__node knowledge-graph__node--{{ node.type | lower }}">
+          <strong>{{ node.type }}</strong>
+          <span>{{ node.label }}</span>
+        </article>
+      {% endfor %}
+    </div>
+
+    <h3 class="nhsuk-heading-s">Link map</h3>
+    <ul class="nhsuk-list knowledge-edge-list">
+      {% for edge in userGraph.graph.edges %}
+        <li>
+          <strong>{{ edge.fromLabel }}</strong>
+          <span>{{ edge.label }}</span>
+          <strong>{{ edge.toLabel }}</strong>
+        </li>
+      {% endfor %}
+    </ul>
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Responsibilities and access needs</h2>
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-half">
+        <h3 class="nhsuk-heading-s">Responsibilities</h3>
+        {{ bulletList(userGraph.user.responsibilities) }}
+      </div>
+      <div class="nhsuk-grid-column-one-half">
+        <h3 class="nhsuk-heading-s">Access needs</h3>
+        {{ bulletList(userGraph.user.accessNeeds) }}
+      </div>
+    </div>
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Scenarios</h2>
+    {% for scenario in userGraph.scenarios %}
+      <article class="knowledge-linked-block">
+        <span class="nhsuk-tag nhsuk-tag--{{ 'red' if scenario.riskLevel == 'high' else 'yellow' }}">{{ scenario.riskLevel }} risk</span>
+        <h3>{{ scenario.title }}</h3>
+        <p><strong>Trigger:</strong> {{ scenario.trigger }}</p>
+        <p>{{ scenario.context }}</p>
+
+        {% if scenario.locationSearch %}
+          <div class="knowledge-linked-block__detail">
+            <h4 class="nhsuk-heading-s">Location search intent</h4>
+            <p>{{ scenario.locationSearch.primaryIntent }}</p>
+            <p><strong>Scope:</strong> {{ scenario.locationSearch.searchScope }}</p>
+
+            <div class="nhsuk-grid-row">
+              <div class="nhsuk-grid-column-one-half">
+                <h5 class="nhsuk-heading-xs">Available information</h5>
+                {{ bulletList(scenario.locationSearch.availableInformation) }}
+              </div>
+              <div class="nhsuk-grid-column-one-half">
+                <h5 class="nhsuk-heading-xs">Outcomes</h5>
+                {{ bulletList(scenario.locationSearch.outcomes) }}
+              </div>
+            </div>
+          </div>
+        {% endif %}
+
+        <h4 class="nhsuk-heading-s">Linked needs</h4>
+        <ul class="nhsuk-list nhsuk-list--bullet">
+          {% for needId in scenario.needIds %}
+            {% set need = knowledge.index.needs[needId] %}
+            <li>{{ need.statement }}</li>
+          {% endfor %}
+        </ul>
+      </article>
+    {% else %}
+      <p class="knowledge-muted">No scenarios linked yet.</p>
+    {% endfor %}
+  </section>
+
+  <section class="knowledge-section">
+    <h2>User needs and evidence</h2>
+    <div class="knowledge-list">
+      {% for need in userGraph.needs %}
+        <article class="knowledge-card">
+          <p class="knowledge-card__meta">{{ need.priority }} priority</p>
+          <h3 class="nhsuk-heading-s">{{ need.statement }}</h3>
+          <h4 class="nhsuk-heading-xs">Evidence</h4>
+          <ul class="nhsuk-list">
+            {% for evidenceId in need.evidenceIds %}
+              {% set evidence = knowledge.index.evidence[evidenceId] %}
+              <li>{{ evidence.title }} <span class="knowledge-confidence-tag knowledge-confidence-tag--{{ evidence.confidence }}">{{ evidence.confidence }} confidence</span></li>
+            {% endfor %}
+          </ul>
+        </article>
+      {% endfor %}
+    </div>
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Evidence detail</h2>
+    {% for evidence in userGraph.evidence %}
+      <article class="knowledge-linked-block">
+        <p class="knowledge-card__meta">{{ evidence.sourceType }}</p>
+        <span class="knowledge-confidence-tag knowledge-confidence-tag--{{ evidence.confidence }}">{{ evidence.confidence }} confidence</span>
+        <h3><a href="{{ basePath }}/evidence/{{ evidence.id }}/impact">{{ evidence.title }}</a></h3>
+        <p>{{ evidence.summary }}</p>
+        {% if evidence.quotes %}
+          <h4 class="nhsuk-heading-xs">Quoted signals</h4>
+          <ul class="nhsuk-list nhsuk-list--bullet">
+            {% for quote in evidence.quotes %}
+              <li>&ldquo;{{ quote }}&rdquo;</li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </article>
+    {% endfor %}
+  </section>
+
+  <section class="knowledge-section">
+    <h2>Generated artefacts</h2>
+    {% if userGraph.journeys.length %}
+      <ul class="nhsuk-list">
+        {% for journey in userGraph.journeys %}
+          <li><a href="{{ basePath }}/journeys/{{ journey.id }}">{{ journey.title }}</a></li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <p class="knowledge-muted">No journey or prototype screen has been generated for this user yet. The scenario, needs and evidence are ready to drive that next slice.</p>
+    {% endif %}
+  </section>
+{% endblock %}

package/views/hippocampus/users.html

@@ -0,0 +1,32 @@
+{% extends "hippocampus/_layout.html" %}
+{% from "hippocampus/components/_list.njk" import bulletList %}
+{% from "hippocampus/components/_empty-state.njk" import emptyState %}
+
+{% block pageTitle %}Users{% endblock %}
+
+{% block content %}
+  <a class="nhsuk-back-link" href="{{ basePath }}">Back to knowledge base</a>
+  <h1>Users</h1>
+  {% if knowledge.users.length %}
+{% for user in knowledge.users %}
+    <section class="knowledge-section">
+      <h2><a href="{{ basePath }}/users/{{ user.id }}">{{ user.label }}</a></h2>
+      <p>{{ user.description }}</p>
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-one-half">
+          <h3 class="nhsuk-heading-s">Responsibilities</h3>
+          {{ bulletList(user.responsibilities) }}
+        </div>
+        <div class="nhsuk-grid-column-one-half">
+          <h3 class="nhsuk-heading-s">Access needs</h3>
+          {{ bulletList(user.accessNeeds) }}
+        </div>
+      </div>
+    </section>
+  {% endfor %}
+  {% else %}
+    {{ emptyState("No users yet",
+      "Users are who the service is for. Every need, scenario and screen hangs off one.",
+      "Add them with the add-user-needs skill, or import a persona document into hippocampus/inbox/project/.") }}
+  {% endif %}
+{% endblock %}