-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.html
More file actions
174 lines (155 loc) · 11 KB
/
Copy pathapp.html
File metadata and controls
174 lines (155 loc) · 11 KB
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
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Phones get the touch-friendly mobile view (override with ?desktop=1). Runs before
the graph libraries load, so mobile users never download the desktop bundle. -->
<script>
(function () {
try {
if (!/[?&]desktop=1/.test(location.search) && window.matchMedia && window.matchMedia('(max-width: 820px)').matches) {
location.replace('m.html' + location.hash);
}
} catch (e) {}
})();
</script>
<title>Kuber Map · the treasury of financial knowledge</title>
<!-- PWA -->
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#0e1a13" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Kuber Map" />
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png" />
<link rel="stylesheet" href="css/style.css" />
<!-- set theme before paint to avoid flash -->
<script>
(function () {
try { var t = localStorage.getItem('kuber-theme'); if (t) document.documentElement.setAttribute('data-theme', t); } catch (e) {}
})();
</script>
</head>
<body>
<!-- Top bar -->
<header class="topbar">
<a class="brand" href="index.html" data-tip="Home, about Kuber Map" aria-label="Home, Kuber Map"><span class="om" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M12 6.2C10.4 4.5 6.7 4.6 5.1 7.6 3.3 10.9 5.7 15.9 12 22c6.3-6.1 8.7-11.1 6.9-14.4C17.3 4.6 13.6 4.5 12 6.2Z" fill="currentColor"/><path d="M12 6.2V2.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><g stroke="#0a3f24" stroke-opacity=".5" stroke-width=".9" stroke-linecap="round"><path d="M12 7.3V20"/><path d="M12 10.1 8.9 8.3"/><path d="M12 10.1 15.1 8.3"/><path d="M12 12.9 8.6 11.3"/><path d="M12 12.9 15.4 11.3"/><path d="M12 15.6 9.2 14.5"/><path d="M12 15.6 14.8 14.5"/></g></svg></span><span class="brand-text"><span class="brand-name">Kuber Map</span><span class="sub">the treasury of financial knowledge</span></span></a>
<div class="search-wrap">
<input id="search" type="text" placeholder="Search concepts… (f)" autocomplete="off" aria-label="Search concepts" />
<div id="searchResults" class="search-results" role="listbox"></div>
</div>
<div class="level-bar" role="group" aria-label="Filter concepts by FIBO maturity">
<span class="level-caption">Maturity</span>
<button class="level-chip active" data-level="1" data-tip="Release (production maturity)" aria-label="Toggle Release maturity"><span class="num">R</span></button>
<button class="level-chip active" data-level="2" data-tip="Provisional (under review)" aria-label="Toggle Provisional maturity"><span class="num">P</span></button>
<button class="level-chip active" data-level="3" data-tip="Informative / unspecified" aria-label="Toggle Informative maturity"><span class="num">I</span></button>
<button class="new-chip active" id="newChip" data-tip="Toggle between the curated core and the full ontology (3,104)" aria-label="Toggle core / full ontology"><span class="spark" aria-hidden="true">★</span><span class="lbl">Core</span><span class="new-count">0</span></button>
<span class="lens-wrap">
<span class="level-caption">Use case</span>
<select id="lens" class="lens-select" data-tip="Focus one use case's curated concepts" aria-label="Use-case lens">
<option value="">All use cases</option>
</select>
</span>
</div>
<div class="toolbar">
<div class="tool-group">
<button class="btn primary icon-only" id="startDecision" data-tip="Which FIBO concept models what you need?" aria-label="Concept guide">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
<span class="label">Which concept?</span>
</button>
<button class="btn icon-only" id="startPath" data-tip="Guided tour of the loan-origination underwriting arc" aria-label="Guided tour">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>
<span class="label">Guided Path</span>
</button>
<button class="btn icon-only" id="mapBtn" data-tip="Build your own view by picking FIBO domains" aria-label="Build your view">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 14.09 8.26 20.9 8.26 15.41 12.14 17.5 18.4 12 14.52 6.5 18.4 8.59 12.14 3.1 8.26 9.91 8.26"/></svg>
<span class="label">My view</span>
</button>
</div>
<span class="tool-divider" aria-hidden="true"></span>
<div class="tool-group">
<button class="btn ghost icon-only" id="fitBtn" data-tip="Fit graph to screen" aria-label="Fit graph to screen">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
<span class="label">Fit</span>
</button>
<button class="btn ghost icon-only" id="relayoutBtn" data-tip="Recompute layout" aria-label="Re-layout graph">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>
<span class="label">Re-layout</span>
</button>
<button class="btn ghost icon-only" id="exportBtn" data-tip="Export the map as one agent-ready grounding file (OKF, with FIBO IRI citations)" aria-label="Export knowledge base for agents">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<span class="label">For agents</span>
</button>
<button class="btn ghost icon-only" id="compareBtn" data-tip="Compare concepts side by side" aria-label="Compare concepts">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
<span class="label">Compare</span>
</button>
</div>
<span class="tool-divider" aria-hidden="true"></span>
<button class="icon-btn" id="helpBtn" data-tip="Help & welcome" aria-label="Help and welcome">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
</button>
<button class="icon-btn" id="themeToggle" data-tip="Toggle light / dark theme" aria-label="Toggle theme"></button>
</div>
</header>
<!-- Graph -->
<div id="cy"></div>
<!-- Busy overlay: shown while a layout / focus is computing -->
<div id="busy" class="busy" aria-hidden="true" role="status">
<div class="busy-card"><span class="spinner"></span><span id="busyLabel" class="busy-label">Loading…</span></div>
</div>
<!-- Minimap (orientation) -->
<div id="minimap" class="minimap" data-tip="Minimap, click/drag to pan · m to hide" aria-hidden="true">
<canvas id="minimapCanvas"></canvas>
</div>
<!-- Legend dock (collapsible) -->
<button class="icon-btn dock-toggle" id="dockToggle" data-tip="Show legend & filters" aria-label="Show legend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
</button>
<aside class="dock" id="dock">
<div class="dock-head">
<span class="dock-title">Legend & filters</span>
<button class="dock-collapse" id="dockCollapse" data-tip="Collapse" aria-label="Collapse legend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
</button>
</div>
<div class="legend-section">
<h3>Explore by theme <span class="h3-hint">tap ● to hide · name to zoom</span></h3>
<div id="legend"></div>
</div>
<div class="legend-section">
<h3>Relationships</h3>
<div id="relLegend"></div>
</div>
</aside>
<!-- Detail panel -->
<aside id="panel" class="panel" aria-live="polite"></aside>
<!-- Guided path -->
<div id="guidedBox" class="float-box"></div>
<!-- Decision wizard -->
<div id="decisionBox" class="float-box"></div>
<!-- Welcome / onboarding modal -->
<div id="welcomeModal" class="modal" role="dialog" aria-modal="true" aria-label="Welcome to Kuber Map">
<div class="modal-card welcome-card" id="welcomeCard"></div>
</div>
<!-- Compare modal -->
<div id="compareModal" class="modal" role="dialog" aria-modal="true" aria-label="Compare techniques">
<div class="modal-card" id="compareCard"></div>
</div>
<!-- My Map (build your own learning map) -->
<div id="mapModal" class="modal" role="dialog" aria-modal="true" aria-label="Build your learning map">
<div class="modal-card" id="mapCard"></div>
</div>
<!-- Toast -->
<div id="toast" class="toast"></div>
<div class="hint">Curated core is the default, toggle Core for all <span id="fullCount">3,104</span> · click a node for its FIBO IRI · drag to pan · scroll to zoom · <kbd>f</kbd> search <kbd>↑</kbd><kbd>↓</kbd><kbd>↵</kbd> · <kbd>t</kbd> theme · <kbd>m</kbd> map · <kbd>?</kbd> help · <kbd>Esc</kbd> close · shareable</div>
<script src="js/cytoscape.min.js"></script>
<!-- fcose layout extension (offline), load order: layout-base → cose-base → fcose -->
<script src="js/layout-base.js"></script>
<script src="js/cose-base.js"></script>
<script src="js/cytoscape-fcose.js"></script>
<script src="js/data.js"></script>
<script src="js/graph.js"></script>
<script src="js/sw-register.js"></script>
</body>
</html>