Hugging Face's logo

Spaces:
alterzick
/
simulation-pair-analysis
Running

App Files Community
simulation-pair-analysis / index.html
alterzick's picture
alterzick
undefined - Initial Deployment
430c0fe verified
raw
history blame contribute delete
38.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Well Injection Pair Analysis Simulator - Duri Field</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
#map { height: 500px; }
.chart-container {
width: 100%;
height: 400px;
position: relative;
}
.well-icon {
background-size: contain;
background-repeat: no-repeat;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 10px;
}
.production-well {
background-color: #3b82f6;
}
.injection-well {
background-color: #ef4444;
}
.connection-line {
stroke-dasharray: 5, 5;
}
.tooltip {
position: absolute;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 4px;
pointer-events: none;
font-size: 12px;
z-index: 1000;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-3xl font-bold text-blue-800">Well Injection Pair Analysis Simulator</h1>
<h2 class="text-xl text-gray-600">Duri Field, Riau - Sumatra</h2>
<p class="mt-2 text-gray-700">Simulate injection well impacts on production wells in the same zone</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Control Panel -->
<div class="bg-white p-6 rounded-lg shadow-md col-span-1">
<h3 class="text-xl font-semibold mb-4 text-blue-700">Simulation Parameters</h3>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Number of Production Wells</label>
<input type="number" id="prodWellCount" min="1" max="20" value="5"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Number of Injection Wells</label>
<input type="number" id="injWellCount" min="1" max="10" value="3"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Maximum Distance (meters)</label>
<input type="number" id="maxDistance" min="100" max="5000" value="2000" step="100"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Injection Rate (bbl/day)</label>
<input type="number" id="injectionRate" min="100" max="10000" value="2000" step="100"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-1">Simulation Duration (days)</label>
<input type="number" id="simDuration" min="30" max="365" value="90" step="10"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<button id="runSimulation" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Run Simulation
</button>
<button id="resetSimulation" class="w-full mt-2 bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Reset
</button>
</div>
<!-- Map and Results -->
<div class="bg-white p-6 rounded-lg shadow-md col-span-2">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-blue-700">Field Map & Simulation Results</h3>
<div class="flex space-x-2">
<button id="showConnections" class="bg-green-500 hover:bg-green-600 text-white text-sm py-1 px-2 rounded">
Show Connections
</button>
<button id="exportData" class="bg-purple-500 hover:bg-purple-600 text-white text-sm py-1 px-2 rounded">
Export Data
</button>
</div>
</div>
<div id="map" class="mb-6 rounded-lg overflow-hidden"></div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-medium text-gray-800 mb-2">Production Well Impact Summary</h4>
<div id="prodWellSummary" class="text-sm">
<p class="text-gray-600">Run simulation to see results</p>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-medium text-gray-800 mb-2">Injection Well Contribution</h4>
<div id="injWellSummary" class="text-sm">
<p class="text-gray-600">Run simulation to see results</p>
</div>
</div>
</div>
<div class="mt-4">
<h4 class="font-medium text-gray-800 mb-2">Pressure & Production Impact Chart</h4>
<div id="chartContainer" class="chart-container">
<canvas id="impactChart"></canvas>
</div>
</div>
</div>
</div>
<div class="mt-8 bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-4 text-blue-700">Pair Analysis Details</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Production Well</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Injection Well</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Distance (m)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pressure Impact (psi)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prod. Rate Change (%)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Water Cut Change (%)</th>
</tr>
</thead>
<tbody id="pairAnalysisTable" class="bg-white divide-y divide-gray-200">
<tr>
<td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">No simulation data available</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-8 bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold mb-4 text-blue-700">Mitigation Recommendations</h3>
<div id="mitigationRecommendations" class="space-y-3 text-gray-700">
<p>Based on the simulation results, recommendations will appear here for optimizing injection patterns and mitigating negative impacts on production wells.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Initialize map centered on Duri, Riau
const map = L.map('map').setView([1.421, 101.252], 12);
// Add base map layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add satellite imagery option
const satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
// Add base map layer control
const baseLayers = {
"Street Map": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
"Satellite": satelliteLayer
};
L.control.layers(baseLayers, null, {position: 'topright'}).addTo(map);
// Initialize variables
let productionWells = [];
let injectionWells = [];
let connections = [];
let impactChart = null;
let tooltip = null;
// DOM elements
const runSimulationBtn = document.getElementById('runSimulation');
const resetSimulationBtn = document.getElementById('resetSimulation');
const showConnectionsBtn = document.getElementById('showConnections');
const exportDataBtn = document.getElementById('exportData');
// Event listeners
runSimulationBtn.addEventListener('click', runSimulation);
resetSimulationBtn.addEventListener('click', resetSimulation);
showConnectionsBtn.addEventListener('click', toggleConnections);
exportDataBtn.addEventListener('click', exportData);
// Initialize tooltip
tooltip = document.createElement('div');
tooltip.className = 'tooltip hidden';
document.body.appendChild(tooltip);
// Create initial wells (for demo purposes)
createInitialWells();
// Functions
function createInitialWells() {
// Clear existing wells
productionWells = [];
injectionWells = [];
// Get counts from inputs
const prodCount = parseInt(document.getElementById('prodWellCount').value);
const injCount = parseInt(document.getElementById('injWellCount').value);
// Create production wells
for (let i = 0; i < prodCount; i++) {
const lat = 1.421 + (Math.random() * 0.04 - 0.02);
const lng = 101.252 + (Math.random() * 0.04 - 0.02);
const well = {
id: `P-${i+1}`,
name: `PROD-${i+1}`,
type: 'production',
lat: lat,
lng: lng,
initialRate: 500 + Math.random() * 1500,
waterCut: 10 + Math.random() * 40,
pressure: 800 + Math.random() * 400
};
productionWells.push(well);
// Add to map
const marker = L.marker([lat, lng], {
icon: L.divIcon({
className: 'well-icon production-well',
html: well.id
})
}).addTo(map);
marker.bindPopup(`<b>${well.name}</b><br>Type: Production<br>Initial Rate: ${well.initialRate.toFixed(0)} bbl/day<br>Water Cut: ${well.waterCut.toFixed(1)}%<br>Pressure: ${well.pressure.toFixed(0)} psi`);
marker.on('mouseover', function(e) {
tooltip.className = 'tooltip';
tooltip.innerHTML = `<b>${well.name}</b><br>Production Well`;
tooltip.style.left = e.containerPoint.x + 'px';
tooltip.style.top = (e.containerPoint.y - 30) + 'px';
});
marker.on('mouseout', function() {
tooltip.className = 'tooltip hidden';
});
}
// Create injection wells
for (let i = 0; i < injCount; i++) {
const lat = 1.421 + (Math.random() * 0.04 - 0.02);
const lng = 101.252 + (Math.random() * 0.04 - 0.02);
const well = {
id: `I-${i+1}`,
name: `INJ-${i+1}`,
type: 'injection',
lat: lat,
lng: lng,
rate: parseInt(document.getElementById('injectionRate').value),
fluid: 'Water'
};
injectionWells.push(well);
// Add to map
const marker = L.marker([lat, lng], {
icon: L.divIcon({
className: 'well-icon injection-well',
html: well.id
})
}).addTo(map);
marker.bindPopup(`<b>${well.name}</b><br>Type: Injection<br>Rate: ${well.rate} bbl/day<br>Fluid: ${well.fluid}`);
marker.on('mouseover', function(e) {
tooltip.className = 'tooltip';
tooltip.innerHTML = `<b>${well.name}</b><br>Injection Well`;
tooltip.style.left = e.containerPoint.x + 'px';
tooltip.style.top = (e.containerPoint.y - 30) + 'px';
});
marker.on('mouseout', function() {
tooltip.className = 'tooltip hidden';
});
}
}
function runSimulation() {
// Clear previous connections
connections.forEach(conn => {
if (conn.line) map.removeLayer(conn.line);
});
connections = [];
// Get simulation parameters
const maxDistance = parseInt(document.getElementById('maxDistance').value);
const injectionRate = parseInt(document.getElementById('injectionRate').value);
const duration = parseInt(document.getElementById('simDuration').value);
// Update injection rates
injectionWells.forEach(well => {
well.rate = injectionRate;
});
// Calculate distances and impacts
const pairAnalysis = [];
productionWells.forEach(prodWell => {
const impacts = [];
injectionWells.forEach(injWell => {
// Calculate distance between wells
const distance = calculateDistance(prodWell, injWell);
if (distance <= maxDistance) {
// Calculate impact based on distance and injection rate
const impactFactor = 1 - (distance / maxDistance);
const pressureImpact = (injectionRate * impactFactor * 0.05) * (duration / 30);
const prodRateChange = (injectionRate * impactFactor * 0.02) * (duration / 30);
const waterCutChange = (injectionRate * impactFactor * 0.03) * (duration / 30);
impacts.push({
injWell: injWell,
distance: distance,
pressureImpact: pressureImpact,
prodRateChange: prodRateChange,
waterCutChange: waterCutChange
});
// Add to pair analysis table
pairAnalysis.push({
prodWell: prodWell,
injWell: injWell,
distance: distance,
pressureImpact: pressureImpact,
prodRateChange: prodRateChange,
waterCutChange: waterCutChange
});
// Create connection line
const line = L.polyline(
[[prodWell.lat, prodWell.lng], [injWell.lat, injWell.lng]],
{
color: '#6b7280',
weight: 2,
dashArray: '5, 5',
className: 'connection-line'
}
).addTo(map);
connections.push({
prodWell: prodWell,
injWell: injWell,
line: line
});
}
});
// Calculate total impacts on production well
if (impacts.length > 0) {
prodWell.totalPressureImpact = impacts.reduce((sum, impact) => sum + impact.pressureImpact, 0);
prodWell.totalProdRateChange = impacts.reduce((sum, impact) => sum + impact.prodRateChange, 0);
prodWell.totalWaterCutChange = impacts.reduce((sum, impact) => sum + impact.waterCutChange, 0);
// Update production well properties
prodWell.finalPressure = prodWell.pressure + prodWell.totalPressureImpact;
prodWell.finalRate = prodWell.initialRate + prodWell.totalProdRateChange;
prodWell.finalWaterCut = Math.min(95, prodWell.waterCut + prodWell.totalWaterCutChange);
} else {
prodWell.totalPressureImpact = 0;
prodWell.totalProdRateChange = 0;
prodWell.totalWaterCutChange = 0;
prodWell.finalPressure = prodWell.pressure;
prodWell.finalRate = prodWell.initialRate;
prodWell.finalWaterCut = prodWell.waterCut;
}
});
// Update UI with results
updateResultsUI(pairAnalysis);
// Generate chart
generateImpactChart();
// Generate mitigation recommendations
generateMitigationRecommendations(pairAnalysis);
}
function calculateDistance(well1, well2) {
// Simple distance calculation (for demo purposes)
const latDiff = well1.lat - well2.lat;
const lngDiff = well1.lng - well2.lng;
return Math.sqrt(latDiff * latDiff + lngDiff * lngDiff) * 111320; // Convert to meters
}
function updateResultsUI(pairAnalysis) {
// Update production well summary
let prodSummaryHTML = '';
productionWells.forEach(well => {
prodSummaryHTML += `
<div class="mb-2 pb-2 border-b border-gray-200">
<div class="flex justify-between">
<span class="font-medium">${well.name}</span>
<span class="text-blue-600">${well.id}</span>
</div>
<div class="grid grid-cols-2 gap-1 text-xs mt-1">
<div>Initial Rate: <span class="font-medium">${well.initialRate.toFixed(0)} bbl/day</span></div>
<div>Final Rate: <span class="font-medium">${well.finalRate.toFixed(0)} bbl/day</span></div>
<div>Pressure: <span class="font-medium">${well.pressure.toFixed(0)} → ${well.finalPressure.toFixed(0)} psi</span></div>
<div>Water Cut: <span class="font-medium">${well.waterCut.toFixed(1)}% → ${well.finalWaterCut.toFixed(1)}%</span></div>
</div>
</div>
`;
});
document.getElementById('prodWellSummary').innerHTML = prodSummaryHTML;
// Update injection well summary
let injSummaryHTML = '';
injectionWells.forEach(well => {
// Calculate how many production wells this injector affects
const affectedWells = pairAnalysis.filter(pair => pair.injWell.id === well.id).length;
injSummaryHTML += `
<div class="mb-2 pb-2 border-b border-gray-200">
<div class="flex justify-between">
<span class="font-medium">${well.name}</span>
<span class="text-red-600">${well.id}</span>
</div>
<div class="grid grid-cols-2 gap-1 text-xs mt-1">
<div>Rate: <span class="font-medium">${well.rate} bbl/day</span></div>
<div>Affects: <span class="font-medium">${affectedWells} prod. wells</span></div>
</div>
</div>
`;
});
document.getElementById('injWellSummary').innerHTML = injSummaryHTML;
// Update pair analysis table
let tableHTML = '';
pairAnalysis.forEach(pair => {
tableHTML += `
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">${pair.prodWell.name}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">${pair.injWell.name}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${pair.distance.toFixed(0)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${pair.pressureImpact.toFixed(1)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${pair.prodRateChange.toFixed(1)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${pair.waterCutChange.toFixed(1)}</td>
</tr>
`;
});
if (tableHTML === '') {
tableHTML = `
<tr>
<td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">No connections within specified distance</td>
</tr>
`;
}
document.getElementById('pairAnalysisTable').innerHTML = tableHTML;
}
function generateImpactChart() {
const ctx = document.getElementById('impactChart').getContext('2d');
// Destroy previous chart if exists
if (impactChart) {
impactChart.destroy();
}
// Prepare data
const labels = productionWells.map(well => well.name);
const initialRates = productionWells.map(well => well.initialRate);
const finalRates = productionWells.map(well => well.finalRate);
const initialWaterCuts = productionWells.map(well => well.waterCut);
const finalWaterCuts = productionWells.map(well => well.finalWaterCut);
impactChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: 'Initial Production Rate (bbl/day)',
data: initialRates,
backgroundColor: 'rgba(59, 130, 246, 0.5)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
},
{
label: 'Final Production Rate (bbl/day)',
data: finalRates,
backgroundColor: 'rgba(16, 185, 129, 0.5)',
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 1
},
{
label: 'Initial Water Cut (%)',
data: initialWaterCuts,
backgroundColor: 'rgba(249, 168, 37, 0.5)',
borderColor: 'rgba(249, 168, 37, 1)',
borderWidth: 1,
type: 'line',
yAxisID: 'y1'
},
{
label: 'Final Water Cut (%)',
data: finalWaterCuts,
backgroundColor: 'rgba(220, 38, 38, 0.5)',
borderColor: 'rgba(220, 38, 38, 1)',
borderWidth: 1,
type: 'line',
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Production Rate (bbl/day)'
}
},
y1: {
position: 'right',
beginAtZero: true,
max: 100,
title: {
display: true,
text: 'Water Cut (%)'
},
grid: {
drawOnChartArea: false
}
}
},
plugins: {
title: {
display: true,
text: 'Production Well Performance Before and After Injection'
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += context.parsed.y.toFixed(1);
return label;
}
}
}
}
}
});
}
function generateMitigationRecommendations(pairAnalysis) {
let recommendationsHTML = '';
if (pairAnalysis.length === 0) {
recommendationsHTML = `
<div class="p-4 bg-green-50 rounded-lg">
<h4 class="font-medium text-green-800">No Significant Impacts Detected</h4>
<p class="text-sm text-green-700 mt-1">Based on current injection patterns and distances, no production wells are significantly affected.</p>
</div>
`;
} else {
// Find wells with highest water cut increase
const highWaterCutWells = [...productionWells]
.sort((a, b) => (b.finalWaterCut - b.waterCut) - (a.finalWaterCut - a.waterCut))
.slice(0, 3);
if (highWaterCutWells.length > 0 && highWaterCutWells[0].finalWaterCut - highWaterCutWells[0].waterCut > 10) {
recommendationsHTML += `
<div class="p-4 bg-yellow-50 rounded-lg mb-3">
<h4 class="font-medium text-yellow-800">Water Breakthrough Risk</h4>
<p class="text-sm text-yellow-700 mt-1">The following production wells show significant water cut increase (>10%):</p>
<ul class="list-disc list-inside text-sm text-yellow-700 mt-2 ml-2">
${highWaterCutWells.map(well =>
`<li>${well.name}: Water cut increased from ${well.waterCut.toFixed(1)}% to ${well.finalWaterCut.toFixed(1)}%</li>`
).join('')}
</ul>
<p class="text-sm text-yellow-700 mt-2">Consider adjusting injection rates or patterns for injectors affecting these wells.</p>
</div>
`;
}
// Find injectors affecting most production wells
const injectorImpactCount = {};
pairAnalysis.forEach(pair => {
if (!injectorImpactCount[pair.injWell.id]) {
injectorImpactCount[pair.injWell.id] = 0;
}
injectorImpactCount[pair.injWell.id]++;
});
const mostImpactfulInjectors = Object.entries(injectorImpactCount)
.sort((a, b) => b[1] - a[1])
.slice(0, 2);
if (mostImpactfulInjectors.length > 0 && mostImpactfulInjectors[0][1] > 3) {
recommendationsHTML += `
<div class="p-4 bg-blue-50 rounded-lg mb-3">
<h4 class="font-medium text-blue-800">High-Impact Injectors</h4>
<p class="text-sm text-blue-700 mt-1">The following injectors affect multiple production wells:</p>
<ul class="list-disc list-inside text-sm text-blue-700 mt-2 ml-2">
${mostImpactfulInjectors.map(([id, count]) =>
`<li>${id}: Affects ${count} production wells</li>`
).join('')}
</ul>
<p class="text-sm text-blue-700 mt-2">Consider monitoring these injectors closely as they have broad impact across the field.</p>
</div>
`;
}
// Find isolated production wells (not affected by any injector)
const affectedProdWellIds = new Set(pairAnalysis.map(pair => pair.prodWell.id));
const isolatedProdWells = productionWells.filter(well => !affectedProdWellIds.has(well.id));
if (isolatedProdWells.length > 0) {
recommendationsHTML += `
<div class="p-4 bg-purple-50 rounded-lg">
<h4 class="font-medium text-purple-800">Isolated Production Wells</h4>
<p class="text-sm text-purple-700 mt-1">The following production wells are not receiving pressure support from any injector:</p>
<ul class="list-disc list-inside text-sm text-purple-700 mt-2 ml-2">
${isolatedProdWells.map(well =>
`<li>${well.name}</li>`
).join('')}
</ul>
<p class="text-sm text-purple-700 mt-2">Consider adding new injectors or adjusting existing ones to provide pressure support to these wells.</p>
</div>
`;
}
}
document.getElementById('mitigationRecommendations').innerHTML = recommendationsHTML || `
<p class="text-gray-700">No specific mitigation recommendations based on current simulation parameters.</p>
`;
}
function toggleConnections() {
const isVisible = connections.length > 0 && map.hasLayer(connections[0].line);
if (isVisible) {
connections.forEach(conn => {
map.removeLayer(conn.line);
});
showConnectionsBtn.textContent = 'Show Connections';
showConnectionsBtn.className = 'bg-green-500 hover:bg-green-600 text-white text-sm py-1 px-2 rounded';
} else {
connections.forEach(conn => {
conn.line.addTo(map);
});
showConnectionsBtn.textContent = 'Hide Connections';
showConnectionsBtn.className = 'bg-gray-500 hover:bg-gray-600 text-white text-sm py-1 px-2 rounded';
}
}
function exportData() {
// Prepare data for export
const data = {
simulationParameters: {
productionWellCount: parseInt(document.getElementById('prodWellCount').value),
injectionWellCount: parseInt(document.getElementById('injWellCount').value),
maxDistance: parseInt(document.getElementById('maxDistance').value),
injectionRate: parseInt(document.getElementById('injectionRate').value),
duration: parseInt(document.getElementById('simDuration').value)
},
productionWells: productionWells,
injectionWells: injectionWells,
pairAnalysis: connections.map(conn => {
const pair = productionWells.find(p => p.id === conn.prodWell.id);
const inj = injectionWells.find(i => i.id === conn.injWell.id);
const distance = calculateDistance(pair, inj);
return {
productionWell: pair.name,
injectionWell: inj.name,
distance: distance,
pressureImpact: pair.totalPressureImpact,
productionRateChange: pair.totalProdRateChange,
waterCutChange: pair.totalWaterCutChange
};
})
};
// Create download link
const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", "well_injection_simulation.json");
document.body.appendChild(downloadAnchorNode);
downloadAnchorNode.click();
downloadAnchorNode.remove();
// Show notification
alert('Simulation data exported successfully!');
}
function resetSimulation() {
// Clear connections
connections.forEach(conn => {
if (conn.line) map.removeLayer(conn.line);
});
connections = [];
// Reset UI
document.getElementById('prodWellSummary').innerHTML = '<p class="text-gray-600">Run simulation to see results</p>';
document.getElementById('injWellSummary').innerHTML = '<p class="text-gray-600">Run simulation to see results</p>';
document.getElementById('pairAnalysisTable').innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">No simulation data available</td></tr>';
document.getElementById('mitigationRecommendations').innerHTML = '<p class="text-gray-700">Based on the simulation results, recommendations will appear here for optimizing injection patterns and mitigating negative impacts on production wells.</p>';
// Destroy chart if exists
if (impactChart) {
impactChart.destroy();
impactChart = null;
}
// Recreate wells with current parameters
createInitialWells();
// Reset connection button
showConnectionsBtn.textContent = 'Show Connections';
showConnectionsBtn.className = 'bg-green-500 hover:bg-green-600 text-white text-sm py-1 px-2 rounded';
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alterzick/simulation-pair-analysis" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>