Hugging Face's logo

Spaces:
CommunityOne
/
open-navigator
Running on CPU Upgrade

App Files Community
open-navigator
File size: 5,003 Bytes
61d29fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import React from 'react';
import MetricCard from './shared/MetricCard';
import Compare from './shared/Compare';
import InsightBox from './shared/InsightBox';
import { logicChainData as d } from '../data/dashboardData';

/**
 * Dashboard 2: Delayed 6 months and counting
 * (Logic Chain / Sequential Deferral)
 */
export default function EndlessStudyLoop() {
  return (
    <div>
      <p style={{ 
        fontSize: 14, 
        color: '#555', 
        borderLeft: '2px solid #D85A30', 
        paddingLeft: 12, 
        marginBottom: 20 
      }}>
        {d.conclusion}
      </p>

      {/* Topic */}
      <div style={{
        background: '#f5f5f2',
        padding: 12,
        borderRadius: 8,
        marginBottom: 16
      }}>
        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', marginBottom: 4 }}>
          Policy Decision
        </div>
        <div style={{ fontSize: 14, fontWeight: 500, color: '#222' }}>
          {d.topic}
        </div>
      </div>

      {/* Key Metrics */}
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: '1fr 1fr', 
        gap: 12, 
        marginBottom: 20 
      }}>
        <MetricCard 
          value={`${d.totalDeferrals}×`} 
          label={`Times deferred in ${d.monthsInLimbo} months`}
          tone="negative" 
        />
        <MetricCard 
          value={new Set(d.justifications.map(j => j.reason)).size} 
          label="Distinct justifications used" 
        />
      </div>

      {/* The "Study" Loop Timeline */}
      <div style={{ marginBottom: 20 }}>
        <h4 style={{ 
          fontSize: 12, 
          textTransform: 'uppercase', 
          letterSpacing: '0.05em', 
          color: '#999',
          marginBottom: 12
        }}>
          Shifting Justifications
        </h4>
        
        <div style={{ position: 'relative', paddingLeft: 24 }}>
          {/* Vertical timeline line */}
          <div style={{ 
            position: 'absolute', 
            left: 7, 
            top: 8, 
            bottom: 8, 
            width: 1, 
            background: '#ddd' 
          }} />
          
          {d.justifications.map((item, i) => (
            <div key={i} style={{ position: 'relative', marginBottom: 18 }}>
              {/* Timeline dot */}
              <div style={{ 
                position: 'absolute', 
                left: -20, 
                top: 4, 
                width: 8, 
                height: 8, 
                borderRadius: '50%', 
                background: item.status === 'deferred' ? '#D85A30' : '#BA7517',
                border: '1.5px solid',
                borderColor: item.status === 'deferred' ? '#D85A30' : '#BA7517'
              }} />
              
              {/* Timeline content */}
              <div style={{ fontSize: 11, color: '#999', marginBottom: 2 }}>
                {item.month} — <strong>{item.status}</strong>
              </div>
              <div style={{ fontSize: 13, color: '#555' }}>
                "{item.reason}"
              </div>
              {item.speaker && item.speaker !== 'N/A' && (
                <div style={{ fontSize: 11, color: '#888', fontStyle: 'italic', marginTop: 2 }}>
                  — {item.speaker}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Benchmark Comparison */}
      <div style={{ marginTop: 20 }}>
        <h4 style={{ 
          fontSize: 12, 
          textTransform: 'uppercase', 
          letterSpacing: '0.05em', 
          color: '#999',
          marginBottom: 10
        }}>
          School-Linked Dental Programs by State Type
        </h4>
        <Compare 
          benchmarks={d.benchmarks} 
          metric="activePrograms"
          prefix=""
          suffix=" states"
        />
        <p style={{ 
          fontSize: 11, 
          color: '#888',
          marginTop: 8,
          textAlign: 'center'
        }}>
          Source: ASTDD State Oral Health Program Database, 2025
        </p>
      </div>

      {/* The Logic */}
      <InsightBox type="critical">
        <strong>{d.patternType}:</strong> {d.inference}
      </InsightBox>

      {/* Question for the Room */}
      <div style={{
        marginTop: 16,
        padding: 14,
        background: '#fff',
        border: '2px solid #D85A30',
        borderRadius: 8
      }}>
        <strong style={{ fontSize: 13, color: '#D85A30' }}>Ask them:</strong>
        <p style={{ fontSize: 13, color: '#222', marginTop: 6 }}>
          "This proposal has been 'under review' for {d.monthsInLimbo} months with {d.totalDeferrals} deferrals. 
          Each time, you give a different reason. {d.benchmarks.republicanAvg.activePrograms} Republican-led states 
          and {d.benchmarks.democraticAvg.activePrograms} Democratic-led states already have active programs. 
          What analysis are you waiting for that 35 states haven't already completed?"
        </p>
      </div>
    </div>
  );
}