folder rename
This commit is contained in:
Dobromir Popov
334
ANNOTATE/web/static/css/annotation_ui.css
Normal file
334
ANNOTATE/web/static/css/annotation_ui.css
Normal file
@@ -0,0 +1,334 @@
|
||||
/* Annotation UI Specific Styles */
|
||||
|
||||
/* Main Layout */
|
||||
.main-content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
min-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
/* Chart Panel */
|
||||
.chart-panel {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.chart-panel .card-body {
|
||||
height: calc(100% - 60px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#chart-container {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.timeframe-chart {
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.timeframe-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chart-info {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chart-plot {
|
||||
height: 300px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.chart-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
background-color: rgba(17, 24, 39, 0.9);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Control Panel */
|
||||
.control-panel {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
max-height: calc(100vh - 150px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.control-panel .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.control-panel .form-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.control-panel .form-select,
|
||||
.control-panel .form-control {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.control-panel .btn-group-vertical .btn {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Annotation List */
|
||||
.annotation-list {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.annotation-list .card-body {
|
||||
padding: 0;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.annotation-list .list-group-item {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.annotation-list .list-group-item:hover {
|
||||
background-color: var(--bg-tertiary) !important;
|
||||
}
|
||||
|
||||
.annotation-list .btn-group-vertical {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
/* Training Panel */
|
||||
.training-panel {
|
||||
position: sticky;
|
||||
top: 420px;
|
||||
}
|
||||
|
||||
.training-panel .card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Inference Panel */
|
||||
.inference-panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#inference-chart {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.inference-panel .table-responsive {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Annotation Markers on Charts */
|
||||
.annotation-marker-entry {
|
||||
color: #10b981;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.annotation-marker-exit {
|
||||
color: #ef4444;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.annotation-line {
|
||||
stroke: #3b82f6;
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 5, 5;
|
||||
}
|
||||
|
||||
.annotation-pnl-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Prediction Markers */
|
||||
.prediction-marker-correct {
|
||||
color: #10b981;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prediction-marker-incorrect {
|
||||
color: #ef4444;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Crosshair Cursor */
|
||||
.chart-plot:hover {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* Fullscreen Mode */
|
||||
#chart-container:fullscreen {
|
||||
background-color: var(--bg-primary);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#chart-container:-webkit-full-screen {
|
||||
background-color: var(--bg-primary);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#chart-container:-moz-full-screen {
|
||||
background-color: var(--bg-primary);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.chart-plot {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.chart-plot {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.control-panel,
|
||||
.annotation-list,
|
||||
.training-panel {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for Loading States */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Highlight Effect for Selected Annotation */
|
||||
.annotation-highlighted {
|
||||
animation: highlight-flash 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes highlight-flash {
|
||||
0%, 100% {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Indicators */
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.status-indicator.active {
|
||||
background-color: var(--accent-success);
|
||||
box-shadow: 0 0 8px var(--accent-success);
|
||||
}
|
||||
|
||||
.status-indicator.inactive {
|
||||
background-color: var(--text-muted);
|
||||
}
|
||||
|
||||
.status-indicator.error {
|
||||
background-color: var(--accent-danger);
|
||||
box-shadow: 0 0 8px var(--accent-danger);
|
||||
}
|
||||
|
||||
/* Metric Cards */
|
||||
.metric-card {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Confusion Matrix Styling */
|
||||
.confusion-matrix-cell {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Timeline Table Styling */
|
||||
#prediction-timeline-body tr:last-child {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Panels */
|
||||
.control-panel::-webkit-scrollbar,
|
||||
.annotation-list .card-body::-webkit-scrollbar,
|
||||
.inference-panel .table-responsive::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* Keyboard Shortcut Hints */
|
||||
.keyboard-hint {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
/* Chart Zoom Controls */
|
||||
.chart-zoom-controls {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Annotation Mode Indicator */
|
||||
.annotation-mode-active {
|
||||
border: 2px solid var(--accent-success);
|
||||
}
|
||||
|
||||
.annotation-mode-inactive {
|
||||
border: 2px solid var(--text-muted);
|
||||
}
|
||||
265
ANNOTATE/web/static/css/dark_theme.css
Normal file
265
ANNOTATE/web/static/css/dark_theme.css
Normal file
@@ -0,0 +1,265 @@
|
||||
/* Dark Theme Styles for Manual Trade Annotation UI */
|
||||
|
||||
:root {
|
||||
--bg-primary: #111827;
|
||||
--bg-secondary: #1f2937;
|
||||
--bg-tertiary: #374151;
|
||||
--text-primary: #f8f9fa;
|
||||
--text-secondary: #9ca3af;
|
||||
--text-muted: #6b7280;
|
||||
--border-color: #4b5563;
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-success: #10b981;
|
||||
--accent-danger: #ef4444;
|
||||
--accent-warning: #f59e0b;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-primary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--bg-tertiary) !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.table {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
--bs-table-bg: var(--bg-secondary);
|
||||
--bs-table-striped-bg: var(--bg-tertiary);
|
||||
--bs-table-hover-bg: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.table-dark thead th {
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
.table-dark tbody td {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-control,
|
||||
.form-select {
|
||||
background-color: var(--bg-tertiary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
background-color: var(--bg-tertiary) !important;
|
||||
border-color: var(--accent-primary) !important;
|
||||
color: var(--text-primary) !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-outline-light {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* List Groups */
|
||||
.list-group-item {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.list-group-item-action:hover {
|
||||
background-color: var(--bg-tertiary) !important;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert-info {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.3);
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal-content {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-bottom-color: var(--border-color);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
/* Progress Bars */
|
||||
.progress {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar-dark {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: var(--bg-secondary) !important;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Text Colors */
|
||||
.text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--accent-success) !important;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--accent-danger) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--accent-warning) !important;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
/* Tooltips */
|
||||
.tooltip-inner {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-top .tooltip-arrow::before {
|
||||
border-top-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
|
||||
border-bottom-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
/* Spinners */
|
||||
.spinner-border {
|
||||
border-color: var(--accent-primary);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast {
|
||||
background-color: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-bottom-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
193
ANNOTATE/web/static/js/annotation_manager.js
Normal file
193
ANNOTATE/web/static/js/annotation_manager.js
Normal file
@@ -0,0 +1,193 @@
|
||||
/**
|
||||
* AnnotationManager - Manages trade marking interactions
|
||||
*/
|
||||
|
||||
class AnnotationManager {
|
||||
constructor(chartManager) {
|
||||
this.chartManager = chartManager;
|
||||
this.pendingAnnotation = null;
|
||||
this.enabled = true;
|
||||
|
||||
console.log('AnnotationManager initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle chart click for marking entry/exit
|
||||
*/
|
||||
handleChartClick(clickData) {
|
||||
if (!this.enabled) {
|
||||
console.log('Annotation mode disabled');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.pendingAnnotation) {
|
||||
// Mark entry point
|
||||
this.markEntry(clickData);
|
||||
} else {
|
||||
// Mark exit point
|
||||
this.markExit(clickData);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark entry point
|
||||
*/
|
||||
markEntry(clickData) {
|
||||
this.pendingAnnotation = {
|
||||
symbol: window.appState.currentSymbol,
|
||||
timeframe: clickData.timeframe,
|
||||
entry: {
|
||||
timestamp: clickData.timestamp,
|
||||
price: clickData.price,
|
||||
index: clickData.index
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Entry marked:', this.pendingAnnotation);
|
||||
|
||||
// Show pending annotation status
|
||||
document.getElementById('pending-annotation-status').style.display = 'block';
|
||||
|
||||
// Visual feedback on chart
|
||||
this.showPendingMarker(clickData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark exit point
|
||||
*/
|
||||
markExit(clickData) {
|
||||
if (!this.pendingAnnotation) return;
|
||||
|
||||
// Validate exit is after entry
|
||||
const entryTime = new Date(this.pendingAnnotation.entry.timestamp);
|
||||
const exitTime = new Date(clickData.timestamp);
|
||||
|
||||
if (exitTime <= entryTime) {
|
||||
window.showError('Exit time must be after entry time');
|
||||
return;
|
||||
}
|
||||
|
||||
// Complete annotation
|
||||
this.pendingAnnotation.exit = {
|
||||
timestamp: clickData.timestamp,
|
||||
price: clickData.price,
|
||||
index: clickData.index
|
||||
};
|
||||
|
||||
// Calculate P&L
|
||||
const entryPrice = this.pendingAnnotation.entry.price;
|
||||
const exitPrice = this.pendingAnnotation.exit.price;
|
||||
const direction = exitPrice > entryPrice ? 'LONG' : 'SHORT';
|
||||
const profitLossPct = ((exitPrice - entryPrice) / entryPrice) * 100;
|
||||
|
||||
this.pendingAnnotation.direction = direction;
|
||||
this.pendingAnnotation.profit_loss_pct = profitLossPct;
|
||||
|
||||
console.log('Exit marked:', this.pendingAnnotation);
|
||||
|
||||
// Save annotation
|
||||
this.saveAnnotation(this.pendingAnnotation);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save annotation to server
|
||||
*/
|
||||
saveAnnotation(annotation) {
|
||||
fetch('/api/save-annotation', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(annotation)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Add to app state
|
||||
window.appState.annotations.push(data.annotation);
|
||||
|
||||
// Update UI
|
||||
window.renderAnnotationsList(window.appState.annotations);
|
||||
|
||||
// Add to chart
|
||||
this.chartManager.addAnnotation(data.annotation);
|
||||
|
||||
// Clear pending annotation
|
||||
this.pendingAnnotation = null;
|
||||
document.getElementById('pending-annotation-status').style.display = 'none';
|
||||
|
||||
window.showSuccess('Annotation saved successfully');
|
||||
} else {
|
||||
window.showError('Failed to save annotation: ' + data.error.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
window.showError('Network error: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show pending marker on chart
|
||||
*/
|
||||
showPendingMarker(clickData) {
|
||||
// TODO: Add visual marker for pending entry
|
||||
console.log('Showing pending marker at:', clickData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark current position (for keyboard shortcut)
|
||||
*/
|
||||
markCurrentPosition() {
|
||||
// TODO: Implement marking at current crosshair position
|
||||
console.log('Mark current position');
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable annotation mode
|
||||
*/
|
||||
enable() {
|
||||
this.enabled = true;
|
||||
console.log('Annotation mode enabled');
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable annotation mode
|
||||
*/
|
||||
disable() {
|
||||
this.enabled = false;
|
||||
this.pendingAnnotation = null;
|
||||
document.getElementById('pending-annotation-status').style.display = 'none';
|
||||
console.log('Annotation mode disabled');
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate profit/loss percentage
|
||||
*/
|
||||
calculateProfitLoss(entryPrice, exitPrice, direction) {
|
||||
if (direction === 'LONG') {
|
||||
return ((exitPrice - entryPrice) / entryPrice) * 100;
|
||||
} else {
|
||||
return ((entryPrice - exitPrice) / entryPrice) * 100;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate annotation
|
||||
*/
|
||||
validateAnnotation(annotation) {
|
||||
if (!annotation.entry || !annotation.exit) {
|
||||
return {valid: false, error: 'Missing entry or exit point'};
|
||||
}
|
||||
|
||||
const entryTime = new Date(annotation.entry.timestamp);
|
||||
const exitTime = new Date(annotation.exit.timestamp);
|
||||
|
||||
if (exitTime <= entryTime) {
|
||||
return {valid: false, error: 'Exit time must be after entry time'};
|
||||
}
|
||||
|
||||
if (!annotation.entry.price || !annotation.exit.price) {
|
||||
return {valid: false, error: 'Missing price data'};
|
||||
}
|
||||
|
||||
return {valid: true};
|
||||
}
|
||||
}
|
||||
255
ANNOTATE/web/static/js/chart_manager.js
Normal file
255
ANNOTATE/web/static/js/chart_manager.js
Normal file
@@ -0,0 +1,255 @@
|
||||
/**
|
||||
* ChartManager - Manages Plotly charts for multi-timeframe visualization
|
||||
*/
|
||||
|
||||
class ChartManager {
|
||||
constructor(containerId, timeframes) {
|
||||
this.containerId = containerId;
|
||||
this.timeframes = timeframes;
|
||||
this.charts = {};
|
||||
this.annotations = {};
|
||||
this.syncedTime = null;
|
||||
|
||||
console.log('ChartManager initialized with timeframes:', timeframes);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize charts for all timeframes
|
||||
*/
|
||||
initializeCharts(chartData) {
|
||||
console.log('Initializing charts with data:', chartData);
|
||||
|
||||
this.timeframes.forEach(timeframe => {
|
||||
if (chartData[timeframe]) {
|
||||
this.createChart(timeframe, chartData[timeframe]);
|
||||
}
|
||||
});
|
||||
|
||||
// Enable crosshair
|
||||
this.enableCrosshair();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a single chart for a timeframe
|
||||
*/
|
||||
createChart(timeframe, data) {
|
||||
const plotId = `plot-${timeframe}`;
|
||||
const plotElement = document.getElementById(plotId);
|
||||
|
||||
if (!plotElement) {
|
||||
console.error(`Plot element not found: ${plotId}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create candlestick trace
|
||||
const candlestickTrace = {
|
||||
x: data.timestamps,
|
||||
open: data.open,
|
||||
high: data.high,
|
||||
low: data.low,
|
||||
close: data.close,
|
||||
type: 'candlestick',
|
||||
name: timeframe,
|
||||
increasing: {line: {color: '#10b981'}},
|
||||
decreasing: {line: {color: '#ef4444'}}
|
||||
};
|
||||
|
||||
// Create volume trace
|
||||
const volumeTrace = {
|
||||
x: data.timestamps,
|
||||
y: data.volume,
|
||||
type: 'bar',
|
||||
name: 'Volume',
|
||||
yaxis: 'y2',
|
||||
marker: {color: '#3b82f6', opacity: 0.3}
|
||||
};
|
||||
|
||||
const layout = {
|
||||
title: '',
|
||||
xaxis: {
|
||||
rangeslider: {visible: false},
|
||||
gridcolor: '#374151',
|
||||
color: '#9ca3af'
|
||||
},
|
||||
yaxis: {
|
||||
title: 'Price',
|
||||
gridcolor: '#374151',
|
||||
color: '#9ca3af'
|
||||
},
|
||||
yaxis2: {
|
||||
title: 'Volume',
|
||||
overlaying: 'y',
|
||||
side: 'right',
|
||||
showgrid: false,
|
||||
color: '#9ca3af'
|
||||
},
|
||||
plot_bgcolor: '#1f2937',
|
||||
paper_bgcolor: '#1f2937',
|
||||
font: {color: '#f8f9fa'},
|
||||
margin: {l: 50, r: 50, t: 20, b: 40},
|
||||
hovermode: 'x unified'
|
||||
};
|
||||
|
||||
const config = {
|
||||
responsive: true,
|
||||
displayModeBar: true,
|
||||
modeBarButtonsToRemove: ['lasso2d', 'select2d'],
|
||||
displaylogo: false
|
||||
};
|
||||
|
||||
Plotly.newPlot(plotId, [candlestickTrace, volumeTrace], layout, config);
|
||||
|
||||
// Store chart reference
|
||||
this.charts[timeframe] = {
|
||||
plotId: plotId,
|
||||
data: data,
|
||||
element: plotElement
|
||||
};
|
||||
|
||||
// Add click handler for annotations
|
||||
plotElement.on('plotly_click', (eventData) => {
|
||||
this.handleChartClick(timeframe, eventData);
|
||||
});
|
||||
|
||||
console.log(`Chart created for ${timeframe}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle chart click for annotation
|
||||
*/
|
||||
handleChartClick(timeframe, eventData) {
|
||||
if (!eventData.points || eventData.points.length === 0) return;
|
||||
|
||||
const point = eventData.points[0];
|
||||
const clickData = {
|
||||
timeframe: timeframe,
|
||||
timestamp: point.x,
|
||||
price: point.close || point.y,
|
||||
index: point.pointIndex
|
||||
};
|
||||
|
||||
console.log('Chart clicked:', clickData);
|
||||
|
||||
// Trigger annotation manager
|
||||
if (window.appState && window.appState.annotationManager) {
|
||||
window.appState.annotationManager.handleChartClick(clickData);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update charts with new data
|
||||
*/
|
||||
updateCharts(newData) {
|
||||
Object.keys(newData).forEach(timeframe => {
|
||||
if (this.charts[timeframe]) {
|
||||
const plotId = this.charts[timeframe].plotId;
|
||||
|
||||
Plotly.react(plotId, [
|
||||
{
|
||||
x: newData[timeframe].timestamps,
|
||||
open: newData[timeframe].open,
|
||||
high: newData[timeframe].high,
|
||||
low: newData[timeframe].low,
|
||||
close: newData[timeframe].close,
|
||||
type: 'candlestick'
|
||||
},
|
||||
{
|
||||
x: newData[timeframe].timestamps,
|
||||
y: newData[timeframe].volume,
|
||||
type: 'bar',
|
||||
yaxis: 'y2'
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Add annotation to charts
|
||||
*/
|
||||
addAnnotation(annotation) {
|
||||
console.log('Adding annotation to charts:', annotation);
|
||||
|
||||
// Store annotation
|
||||
this.annotations[annotation.annotation_id] = annotation;
|
||||
|
||||
// Add markers to relevant timeframe chart
|
||||
const timeframe = annotation.timeframe;
|
||||
if (this.charts[timeframe]) {
|
||||
// TODO: Add visual markers using Plotly annotations
|
||||
this.updateChartAnnotations(timeframe);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove annotation from charts
|
||||
*/
|
||||
removeAnnotation(annotationId) {
|
||||
if (this.annotations[annotationId]) {
|
||||
const annotation = this.annotations[annotationId];
|
||||
delete this.annotations[annotationId];
|
||||
|
||||
// Update chart
|
||||
if (this.charts[annotation.timeframe]) {
|
||||
this.updateChartAnnotations(annotation.timeframe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update chart annotations
|
||||
*/
|
||||
updateChartAnnotations(timeframe) {
|
||||
// TODO: Implement annotation rendering on charts
|
||||
console.log(`Updating annotations for ${timeframe}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight annotation
|
||||
*/
|
||||
highlightAnnotation(annotationId) {
|
||||
console.log('Highlighting annotation:', annotationId);
|
||||
// TODO: Implement highlight effect
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable crosshair cursor
|
||||
*/
|
||||
enableCrosshair() {
|
||||
// Crosshair is enabled via hovermode in layout
|
||||
console.log('Crosshair enabled');
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle zoom
|
||||
*/
|
||||
handleZoom(zoomFactor) {
|
||||
Object.values(this.charts).forEach(chart => {
|
||||
Plotly.relayout(chart.plotId, {
|
||||
'xaxis.range[0]': null,
|
||||
'xaxis.range[1]': null
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset zoom
|
||||
*/
|
||||
resetZoom() {
|
||||
Object.values(this.charts).forEach(chart => {
|
||||
Plotly.relayout(chart.plotId, {
|
||||
'xaxis.autorange': true,
|
||||
'yaxis.autorange': true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Synchronize time navigation across charts
|
||||
*/
|
||||
syncTimeNavigation(timestamp) {
|
||||
this.syncedTime = timestamp;
|
||||
// TODO: Implement time synchronization
|
||||
console.log('Syncing charts to timestamp:', timestamp);
|
||||
}
|
||||
}
|
||||
146
ANNOTATE/web/static/js/time_navigator.js
Normal file
146
ANNOTATE/web/static/js/time_navigator.js
Normal file
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* TimeNavigator - Handles time navigation and data loading
|
||||
*/
|
||||
|
||||
class TimeNavigator {
|
||||
constructor(chartManager) {
|
||||
this.chartManager = chartManager;
|
||||
this.currentTime = null;
|
||||
this.timeRange = '1d'; // Default 1 day range
|
||||
|
||||
console.log('TimeNavigator initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to specific time
|
||||
*/
|
||||
navigateToTime(timestamp) {
|
||||
this.currentTime = timestamp;
|
||||
console.log('Navigating to time:', new Date(timestamp));
|
||||
|
||||
// Load data for this time range
|
||||
this.loadDataRange(timestamp);
|
||||
|
||||
// Sync charts
|
||||
this.chartManager.syncTimeNavigation(timestamp);
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to current time
|
||||
*/
|
||||
navigateToNow() {
|
||||
const now = Date.now();
|
||||
this.navigateToTime(now);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll forward in time
|
||||
*/
|
||||
scrollForward(increment = null) {
|
||||
if (!increment) {
|
||||
increment = this.getIncrementForRange();
|
||||
}
|
||||
|
||||
const newTime = (this.currentTime || Date.now()) + increment;
|
||||
this.navigateToTime(newTime);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll backward in time
|
||||
*/
|
||||
scrollBackward(increment = null) {
|
||||
if (!increment) {
|
||||
increment = this.getIncrementForRange();
|
||||
}
|
||||
|
||||
const newTime = (this.currentTime || Date.now()) - increment;
|
||||
this.navigateToTime(newTime);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set time range
|
||||
*/
|
||||
setTimeRange(range) {
|
||||
this.timeRange = range;
|
||||
console.log('Time range set to:', range);
|
||||
|
||||
// Reload data with new range
|
||||
if (this.currentTime) {
|
||||
this.loadDataRange(this.currentTime);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load data for time range
|
||||
*/
|
||||
loadDataRange(centerTime) {
|
||||
// Show loading indicator
|
||||
const loadingEl = document.getElementById('chart-loading');
|
||||
if (loadingEl) {
|
||||
loadingEl.classList.remove('d-none');
|
||||
}
|
||||
|
||||
// Calculate start and end times based on range
|
||||
const rangeMs = this.getRangeInMs(this.timeRange);
|
||||
const startTime = centerTime - (rangeMs / 2);
|
||||
const endTime = centerTime + (rangeMs / 2);
|
||||
|
||||
// Fetch data
|
||||
fetch('/api/chart-data', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
symbol: window.appState.currentSymbol,
|
||||
timeframes: window.appState.currentTimeframes,
|
||||
start_time: new Date(startTime).toISOString(),
|
||||
end_time: new Date(endTime).toISOString()
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
this.chartManager.updateCharts(data.chart_data);
|
||||
} else {
|
||||
window.showError('Failed to load chart data: ' + data.error.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
window.showError('Network error: ' + error.message);
|
||||
})
|
||||
.finally(() => {
|
||||
if (loadingEl) {
|
||||
loadingEl.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get increment for current range
|
||||
*/
|
||||
getIncrementForRange() {
|
||||
const rangeMs = this.getRangeInMs(this.timeRange);
|
||||
return rangeMs / 10; // Move by 10% of range
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert range string to milliseconds
|
||||
*/
|
||||
getRangeInMs(range) {
|
||||
const units = {
|
||||
'1h': 60 * 60 * 1000,
|
||||
'4h': 4 * 60 * 60 * 1000,
|
||||
'1d': 24 * 60 * 60 * 1000,
|
||||
'1w': 7 * 24 * 60 * 60 * 1000
|
||||
};
|
||||
|
||||
return units[range] || units['1d'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup keyboard shortcuts
|
||||
*/
|
||||
setupKeyboardShortcuts() {
|
||||
// Keyboard shortcuts are handled in the main template
|
||||
console.log('Keyboard shortcuts ready');
|
||||
}
|
||||
}
|
||||
102
ANNOTATE/web/static/js/training_controller.js
Normal file
102
ANNOTATE/web/static/js/training_controller.js
Normal file
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* TrainingController - Manages training and inference simulation
|
||||
*/
|
||||
|
||||
class TrainingController {
|
||||
constructor() {
|
||||
this.currentTrainingId = null;
|
||||
this.inferenceState = null;
|
||||
|
||||
console.log('TrainingController initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Start training session
|
||||
*/
|
||||
startTraining(modelName, annotationIds) {
|
||||
console.log('Starting training:', modelName, annotationIds);
|
||||
|
||||
// Training is initiated from the training panel
|
||||
// This method can be used for additional training logic
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate inference on annotations
|
||||
*/
|
||||
simulateInference(modelName, annotations) {
|
||||
console.log('Simulating inference:', modelName, annotations.length, 'annotations');
|
||||
|
||||
// Prepare inference request
|
||||
const annotationIds = annotations.map(a =>
|
||||
a.annotation_id || a.get('annotation_id')
|
||||
);
|
||||
|
||||
// Start inference simulation
|
||||
fetch('/api/simulate-inference', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
model_name: modelName,
|
||||
annotation_ids: annotationIds
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
this.displayInferenceResults(data.results);
|
||||
} else {
|
||||
window.showError('Failed to simulate inference: ' + data.error.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
window.showError('Network error: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Display inference results
|
||||
*/
|
||||
displayInferenceResults(results) {
|
||||
console.log('Displaying inference results:', results);
|
||||
|
||||
// Update metrics
|
||||
if (results.metrics) {
|
||||
window.updateMetrics(results.metrics);
|
||||
}
|
||||
|
||||
// Update prediction timeline
|
||||
if (results.predictions) {
|
||||
window.inferenceState = {
|
||||
isPlaying: false,
|
||||
currentIndex: 0,
|
||||
predictions: results.predictions,
|
||||
annotations: window.appState.annotations,
|
||||
speed: 1
|
||||
};
|
||||
}
|
||||
|
||||
window.showSuccess('Inference simulation complete');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get training status
|
||||
*/
|
||||
getTrainingStatus(trainingId) {
|
||||
return fetch('/api/training-progress', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({training_id: trainingId})
|
||||
})
|
||||
.then(response => response.json());
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel training
|
||||
*/
|
||||
cancelTraining(trainingId) {
|
||||
console.log('Canceling training:', trainingId);
|
||||
|
||||
// TODO: Implement training cancellation
|
||||
window.showError('Training cancellation not yet implemented');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user