Rebuild workspace widgets and behavioral graph views
This commit is contained in:
@@ -1,98 +1,22 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="{{ workspace_url }}">AI Workspace</a></li>
|
||||
<li class="is-active"><a aria-current="page">Information</a></li>
|
||||
<li class="is-active"><a aria-current="page">MS / PS Information</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-4" style="margin-bottom: 0.35rem;">Information: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">Commitment directionality and underlying metric factors from deterministic message-history snapshots.</p>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="information" %}
|
||||
</div>
|
||||
|
||||
<div class="column is-5">
|
||||
<div class="box">
|
||||
<p class="heading">Conversation Overview</p>
|
||||
{% if overview_rows %}
|
||||
{% for row in overview_rows %}
|
||||
<article class="message is-light" style="margin-bottom: 0.45rem;">
|
||||
<div class="message-body" style="padding: 0.45rem 0.55rem;">
|
||||
<p class="is-size-7 has-text-grey" style="margin-bottom: 0.12rem;">
|
||||
{{ row.group_title }}
|
||||
</p>
|
||||
<p style="margin-bottom: 0.3rem;">
|
||||
<strong>{{ row.title }}:</strong> {{ row.value|default:"-" }}
|
||||
</p>
|
||||
<a
|
||||
class="tag is-light"
|
||||
href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=row.slug %}">
|
||||
View Detail
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="is-size-7 has-text-grey">No conversation metadata available yet.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<p class="heading">Commitment Directionality</p>
|
||||
<p class="title is-5" style="margin-bottom: 0.35rem;">{{ directionality.direction_label }}</p>
|
||||
<p><strong>Commit In:</strong> {{ directionality.commit_in|default:"-" }}</p>
|
||||
<p><strong>Commit Out:</strong> {{ directionality.commit_out|default:"-" }}</p>
|
||||
<p><strong>Delta:</strong> {{ directionality.delta|default:"-" }}</p>
|
||||
<p><strong>Magnitude:</strong> {{ directionality.magnitude|default:"-" }}</p>
|
||||
<p><strong>Confidence:</strong> {{ directionality.confidence|default:"-" }}</p>
|
||||
<article class="message is-light" style="margin-top: 0.65rem;">
|
||||
<div class="message-body">
|
||||
{{ directionality.conclusion }}
|
||||
</div>
|
||||
</article>
|
||||
<div class="mb-4">
|
||||
<h1 class="title is-4 mb-1">MS / PS Information: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Current message-state and presence-state signals derived from timing data.
|
||||
</p>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="information" %}
|
||||
</div>
|
||||
{% include "partials/ai-workspace-behavioral-information.html" %}
|
||||
</div>
|
||||
|
||||
<div class="column is-7">
|
||||
<div class="box">
|
||||
<p class="heading">Factor Inputs</p>
|
||||
<div class="columns is-multiline" style="margin: 0 -0.2rem;">
|
||||
{% for factor in directionality.factors %}
|
||||
<div class="column is-12-mobile is-6-tablet" style="padding: 0.2rem;">
|
||||
<article class="box" style="margin-bottom: 0; border: 1px solid rgba(0, 0, 0, 0.14); box-shadow: none;">
|
||||
<p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.2rem;">
|
||||
<span class="icon is-small"><i class="{{ factor.icon }}"></i></span>
|
||||
<span>{{ factor.title }}</span>
|
||||
</p>
|
||||
<p class="is-size-7"><strong>Weight:</strong> {{ factor.weight }}</p>
|
||||
<p class="is-size-7"><strong>Value:</strong> {{ factor.value|default:"-" }}</p>
|
||||
<p style="margin-top: 0.35rem;">
|
||||
<a class="tag is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=factor.slug %}">
|
||||
View Metric
|
||||
</a>
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<p class="heading">Linked Graphs</p>
|
||||
<div class="tags">
|
||||
{% for ref in directionality.graph_refs %}
|
||||
<a class="tag is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=ref.slug %}">
|
||||
{{ ref.title }}: {{ ref.value|default:"-" }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,113 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="{{ workspace_url }}">AI Workspace</a></li>
|
||||
<li><a href="{{ graphs_url }}">Insight Graphs</a></li>
|
||||
<li><a href="{{ graphs_url }}">Behavioral Graphs</a></li>
|
||||
<li class="is-active"><a aria-current="page">{{ metric.title }}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-4" style="margin-bottom: 0.35rem;">{{ metric.title }}: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">Conversation {{ workspace_conversation.id }}</p>
|
||||
{% include "partials/ai-insight-nav.html" %}
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div class="box">
|
||||
<p class="heading">{{ metric_group.title }}</p>
|
||||
<p class="title is-5" style="margin-bottom: 0.5rem;">{{ metric.title }}</p>
|
||||
<p><strong>Current Value:</strong> {{ metric_value|default:"-" }}</p>
|
||||
<p style="margin-top: 0.65rem;"><strong>How It Is Calculated</strong></p>
|
||||
<p>{{ metric.calculation }}</p>
|
||||
<p style="margin-top: 0.65rem;"><strong>Psychological Interpretation</strong></p>
|
||||
<p>{{ metric.psychology }}</p>
|
||||
{% if metric_psychology_hint %}
|
||||
<article class="message is-info is-light" style="margin-top: 0.75rem;">
|
||||
<div class="message-body">
|
||||
{{ metric_psychology_hint }}
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
<div class="mb-4">
|
||||
<h1 class="title is-4 mb-1">{{ metric.title }}: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Detailed MS/PS graph for this contact.
|
||||
</p>
|
||||
{% include "partials/ai-insight-nav.html" %}
|
||||
</div>
|
||||
{% include "partials/ai-workspace-behavioral-graph-detail.html" %}
|
||||
</div>
|
||||
<div class="column is-7">
|
||||
<div class="box">
|
||||
<p class="heading">History</p>
|
||||
{% if graph_applicable %}
|
||||
<div style="height: 360px;">
|
||||
<canvas id="metric-detail-chart"></canvas>
|
||||
</div>
|
||||
{% if not graph_points %}
|
||||
<p class="is-size-7 has-text-grey" style="margin-top: 0.65rem;">
|
||||
No historical points yet for this metric.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<article class="message is-light">
|
||||
<div class="message-body">
|
||||
This is a point-in-time metric and is not charted.
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ graph_points|json_script:"metric-detail-points" }}
|
||||
<script src="{% static 'js/chart.js' %}"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var node = document.getElementById("metric-detail-points");
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
var points = JSON.parse(node.textContent || "[]");
|
||||
var shouldRender = {{ graph_applicable|yesno:"true,false" }};
|
||||
if (!shouldRender) {
|
||||
return;
|
||||
}
|
||||
var labels = points.map(function(row) {
|
||||
var dt = new Date(row.x);
|
||||
return dt.toLocaleString();
|
||||
});
|
||||
var values = points.map(function(row) {
|
||||
return row.y;
|
||||
});
|
||||
var ctx = document.getElementById("metric-detail-chart");
|
||||
if (!ctx) {
|
||||
return;
|
||||
}
|
||||
new Chart(ctx.getContext("2d"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "{{ metric.title|escapejs }}",
|
||||
data: values,
|
||||
borderColor: "#3273dc",
|
||||
backgroundColor: "rgba(50,115,220,0.12)",
|
||||
borderWidth: 2,
|
||||
pointRadius: 2,
|
||||
tension: 0.28,
|
||||
spanGaps: true
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,129 +1,22 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="{{ workspace_url }}">AI Workspace</a></li>
|
||||
<li class="is-active"><a aria-current="page">Insight Graphs</a></li>
|
||||
<li class="is-active"><a aria-current="page">Behavioral Graphs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-4" style="margin-bottom: 0.35rem;">Insight Graphs: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Historical metrics for workspace {{ workspace_conversation.id }}. Points are range-downsampled server-side with high-resolution recent data and progressively sparser older ranges.
|
||||
</p>
|
||||
<div class="buttons are-small" style="margin: 0.5rem 0 0.25rem;">
|
||||
<a
|
||||
class="button {% if graph_density == 'low' %}is-dark{% else %}is-light{% endif %}"
|
||||
href="?density=low">
|
||||
Density: Low (max {{ graph_density_caps.low }})
|
||||
</a>
|
||||
<a
|
||||
class="button {% if graph_density == 'medium' %}is-dark{% else %}is-light{% endif %}"
|
||||
href="?density=medium">
|
||||
Density: Medium (max {{ graph_density_caps.medium }})
|
||||
</a>
|
||||
<a
|
||||
class="button {% if graph_density == 'high' %}is-dark{% else %}is-light{% endif %}"
|
||||
href="?density=high">
|
||||
Density: High (max {{ graph_density_caps.high }})
|
||||
</a>
|
||||
<div class="mb-4">
|
||||
<h1 class="title is-4 mb-1">Behavioral Graphs: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Rebuilt from message and event timing data using the MS/PS model rather than workspace snapshots.
|
||||
</p>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="graphs" %}
|
||||
</div>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="graphs" %}
|
||||
{% include "partials/ai-workspace-behavioral-graphs.html" %}
|
||||
</div>
|
||||
|
||||
{% for graph in graph_cards %}
|
||||
<div class="column is-6">
|
||||
<div class="box">
|
||||
<div class="is-flex is-justify-content-space-between is-align-items-center" style="margin-bottom: 0.45rem;">
|
||||
<div>
|
||||
<p class="heading">{{ graph.group_title }}</p>
|
||||
<p class="title is-6" style="margin-bottom: 0.2rem;">{{ graph.title }}</p>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
{{ graph.count }} displayed of {{ graph.raw_count }} source point{{ graph.raw_count|pluralize }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons are-small" style="margin: 0;">
|
||||
<a class="button is-light" href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}">
|
||||
Detail
|
||||
</a>
|
||||
<a class="button is-light" href="{{ help_url }}#group-{{ graph.group }}">
|
||||
How It Works
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 250px;">
|
||||
<canvas id="graph-{{ graph.slug }}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{{ graph_cards|json_script:"insight-graph-cards" }}
|
||||
<script src="{% static 'js/chart.js' %}"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var node = document.getElementById("insight-graph-cards");
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
var graphs = JSON.parse(node.textContent || "[]");
|
||||
var palette = ["#3273dc", "#23d160", "#ffdd57", "#ff3860", "#7957d5", "#00d1b2"];
|
||||
|
||||
graphs.forEach(function(graph, idx) {
|
||||
var canvas = document.getElementById("graph-" + graph.slug);
|
||||
if (!canvas) {
|
||||
return;
|
||||
}
|
||||
var labels = (graph.points || []).map(function(row) {
|
||||
return new Date(row.x).toLocaleString();
|
||||
});
|
||||
var values = (graph.points || []).map(function(row) {
|
||||
return row.y;
|
||||
});
|
||||
var color = palette[idx % palette.length];
|
||||
var yScale = {};
|
||||
if (graph.y_min !== null && graph.y_min !== undefined) {
|
||||
yScale.min = graph.y_min;
|
||||
}
|
||||
if (graph.y_max !== null && graph.y_max !== undefined) {
|
||||
yScale.max = graph.y_max;
|
||||
}
|
||||
new Chart(canvas.getContext("2d"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: graph.title,
|
||||
data: values,
|
||||
borderColor: color,
|
||||
backgroundColor: color + "33",
|
||||
borderWidth: 2,
|
||||
pointRadius: 2,
|
||||
tension: 0.24,
|
||||
spanGaps: true
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: yScale
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,58 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="{{ workspace_url }}">AI Workspace</a></li>
|
||||
<li><a href="{{ graphs_url }}">Insight Graphs</a></li>
|
||||
<li class="is-active"><a aria-current="page">Scoring Help</a></li>
|
||||
<li><a href="{{ graphs_url }}">Behavioral Graphs</a></li>
|
||||
<li class="is-active"><a aria-current="page">MS / PS Help</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<h1 class="title is-4" style="margin-bottom: 0.35rem;">Scoring Help: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Combined explanation for each metric collection group and what it can
|
||||
imply in relationship dynamics. Scoring is deterministic from message
|
||||
history and can be backfilled via metric history reconciliation.
|
||||
</p>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="help" %}
|
||||
</div>
|
||||
|
||||
{% for group_key, group in groups.items %}
|
||||
<div class="column is-12" id="group-{{ group_key }}">
|
||||
<div class="box">
|
||||
<p class="heading">{{ group.title }}</p>
|
||||
<p style="margin-bottom: 0.75rem;">{{ group.summary }}</p>
|
||||
|
||||
{% for metric in metrics %}
|
||||
{% if metric.group == group_key %}
|
||||
<article class="message is-light" style="margin-bottom: 0.6rem;">
|
||||
<div class="message-body">
|
||||
<h3 class="is-size-6 has-text-weight-semibold" style="margin-bottom: 0.45rem;">{{ metric.title }}</h3>
|
||||
|
||||
<p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
|
||||
Current Value
|
||||
</p>
|
||||
<p style="margin-bottom: 0.55rem;">{{ metric.value|default:"-" }}</p>
|
||||
|
||||
<p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
|
||||
How It Is Calculated
|
||||
</p>
|
||||
<p style="margin-bottom: 0.55rem;">{{ metric.calculation }}</p>
|
||||
|
||||
<p class="is-size-7 has-text-grey has-text-weight-semibold" style="margin-bottom: 0.15rem;">
|
||||
Psychological Interpretation
|
||||
</p>
|
||||
<p>{{ metric.psychology }}</p>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<h1 class="title is-4 mb-1">MS / PS Help: {{ person.name }}</h1>
|
||||
<p class="is-size-7 has-text-grey">
|
||||
Definitions and psychological interpretation for the timing signal system.
|
||||
</p>
|
||||
{% include "partials/ai-insight-nav.html" with active_tab="help" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% include "partials/ai-workspace-behavioral-help.html" %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user