folder rename
This commit is contained in:
Dobromir Popov
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