[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68dfd15831208191903413011e34bca8","versionInt","title","Directional Well Path – Interactive Designer (kop / Dls / Inc / Azi / Target)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * Directional Well Path – Interactive Designer (Theme + Visual Enhancements)\n * -------------------------------------------------------------------------\n * Additions for Adriano:\n * - Thicker, glow-enhanced well path while drawing; adaptive stroke width.\n * - Target improved (bullseye rings, clearer label).\n * - Light/Dark theme selector affecting panels, texts, and SVG colors.\n * - Keeps: Auto‑adapt DLS with KOP, NO PERMITTED banner, tolerance logic,\n * KOP badge, grid, formation bands (ARENITO at target interval), self‑tests.\n *\n * NOTE: Use {\">\"} inside JSX text nodes where needed.\n */\n\n// ----------------------------- Utilities -----------------------------\nconst clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));\nconst rad = (deg: number) => (deg * Math.PI) / 180;\nconst fmt1 = (n: number) => n.toFixed(1);\nconst fmt2 = (n: number) => n.toFixed(2);\n\n// Convert DLS in deg/30m to deg/m\nconst dlsDegPerMeter = (dls30m: number) => dls30m / 30;\n\n// Suggested DLS to hit finalInc by target TVD given KOP\nfunction suggestDLSDeg30m(kopMD: number, targetTVD: number, finalInc: number) {\n const avail = Math.max(1, targetTVD - kopMD); // available MD for build (approx with TVD)\n return (finalInc / avail) * 30; // deg/30m\n}\n\n// Easing for stroke width ramp\nconst easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);\n\n// ---------------------------- Trajectory -----------------------------\nexport type Params = {\n kopMD: number; // m\n buildRate30m: number; // deg/30m\n finalInc: number; // deg\n azimuth: number; // deg (0 = North, 90 = East)\n targetN: number; // m\n targetE: number; // m\n targetTVD: number; // m\n tolRadius: number; // m\n stepMD: number; // m step for integration\n maxMD: number; // safety cap for plotting\n};\n\nexport type TrajectoryNode = {\n md: number; // measured depth\n tvd: number; // true vertical depth (down is +)\n n: number; // northing (+N)\n e: number; // easting (+E)\n inc: number; // inclination (deg)\n azi: number; // azimuth (deg)\n dls: number; // dogleg severity (deg per 30 m) instantaneous approximation\n};\n\nfunction generateTrajectory(p: Params): TrajectoryNode[] {\n const nodes: TrajectoryNode[] = [];\n const step = clamp(p.stepMD, 0.25, 5);\n const aziRad = rad(p.azimuth);\n const dlsPerM = dlsDegPerMeter(Math.max(0, p.buildRate30m)); // deg per m\n const totalBuildDeg = clamp(p.finalInc, 0, 180);\n const buildLen = dlsPerM > 0 ? totalBuildDeg / dlsPerM : 0; // handle DLS=0 safely\n\n // PHASE 1: Vertical (0 → KOP)\n let md = 0; let tvd = 0; let n = 0; let e = 0; let inc = 0; const azi = p.azimuth; // azi fixed\n nodes.push({ md, tvd, n, e, inc, azi, dls: 0 });\n while (md < p.kopMD && md < p.maxMD) {\n const s = Math.min(step, p.kopMD - md);\n tvd += s; md += s; // vertical section\n nodes.push({ md, tvd, n, e, inc, azi, dls: 0 });\n }\n\n // PHASE 2: Build (increase INC linearly with DLS until finalInc)\n let buildTraveled = 0;\n while (buildTraveled < buildLen && md < p.maxMD) {\n const s = Math.min(step, buildLen - buildTraveled);\n const incNext = clamp(inc + dlsPerM * s, 0, p.finalInc);\n const incAvgRad = rad((inc + incNext) / 2);\n const dTVD = s * Math.cos(incAvgRad);\n const dH = s * Math.sin(incAvgRad);\n const dN = dH * Math.cos(aziRad);\n const dE = dH * Math.sin(aziRad);\n tvd += dTVD; n += dN; e += dE; md += s; inc = incNext; buildTraveled += s;\n nodes.push({ md, tvd, n, e, inc, azi, dls: p.buildRate30m });\n }\n\n // PHASE 3: Hold (constant INC) until target TVD or maxMD\n while (tvd < p.targetTVD && md < p.maxMD) {\n const s = step;\n const incRad = rad(inc);\n const dTVD = s * Math.cos(incRad);\n const dH = s * Math.sin(incRad);\n const dN = dH * Math.cos(aziRad);\n const dE = dH * Math.sin(aziRad);\n tvd += dTVD; n += dN; e += dE; md += s;\n nodes.push({ md, tvd, n, e, inc, azi, dls: 0 });\n if (tvd >= p.targetTVD) break;\n }\n\n return nodes;\n}\n\nfunction computeStats(nodes: TrajectoryNode[], targetN: number, targetE: number, targetTVD: number) {\n if (!nodes.length) return null as any;\n const last = nodes[nodes.length - 1];\n const hd = Math.hypot(last.n, last.e);\n const avgDLS = nodes.reduce((a, b) => a + b.dls, 0) / nodes.length;\n const missHoriz = Math.hypot(targetN - last.n, targetE - last.e);\n const missVert = Math.abs(targetTVD - last.tvd);\n const miss = Math.hypot(missHoriz, missVert);\n return { end: last, hd, avgDLS, miss, missHoriz, missVert };\n}\n\n// Fit SVG to trajectory extents with padding and aspect control\nfunction useViewBox(nodes: TrajectoryNode[]) {\n const pad = 50; // px padding\n const minX = Math.min(0, ...nodes.map((p) => p.e));\n const maxX = Math.max(0, ...nodes.map((p) => p.e));\n const minY = 0; // surface\n const maxY = Math.max(1, ...nodes.map((p) => p.tvd));\n const width = maxX - minX || 1;\n const height = maxY - minY || 1;\n const aspect = 16 / 9;\n let vbW = width, vbH = height;\n if (vbW / vbH < aspect) {\n const newW = vbH * aspect; vbW = newW;\n const center = (minX + maxX) / 2;\n return `${center - vbW / 2 - pad} ${minY - pad} ${vbW + 2 * pad} ${vbH + 2 * pad}`;\n } else {\n const newH = vbW / aspect; vbH = newH;\n return `${minX - pad} ${minY - pad} ${vbW + 2 * pad} ${vbH + 2 * pad}`;\n }\n}\n\n// ------------------------------ UI ----------------------------------\nexport default function DirectionalWellDesigner() {\n const [params, setParams] = useState({\n kopMD: 1200,\n buildRate30m: 3.0,\n finalInc: 60,\n azimuth: 90,\n targetN: 1200,\n targetE: 1800,\n targetTVD: 2800,\n tolRadius: 50,\n stepMD: 2,\n maxMD: 12000,\n });\n\n const [playing, setPlaying] = useState(true);\n const [drawCount, setDrawCount] = useState(0);\n const [suggestedDLS, setSuggestedDLS] = useState(() => suggestDLSDeg30m(1200, 2800, 60));\n const [themeName, setThemeName] = useState<'dark' | 'light'>('dark');\n const lastKOP = useRef(params.kopMD);\n\n const nodes = useMemo(() => generateTrajectory(params), [params]);\n const stats = useMemo(() => computeStats(nodes, params.targetN, params.targetE, params.targetTVD), [nodes, params]);\n const viewBox = useViewBox(nodes);\n\n // Theme palette for SVG and class helpers for panels\n const palette = useMemo(() => {\n if (themeName === 'light') {\n return {\n pageBg: 'bg-white', pageText: 'text-slate-900', panelBg: 'bg-slate-50', panelBorder: 'border-slate-200', titleText: 'text-slate-800',\n grid: 'rgba(100,116,139,0.12)', axis: 'rgba(100,116,139,0.45)', surfaceText: '#475569',\n path: 'rgba(29,78,216,0.95)', glow: '#1d4ed8',\n targetFill: 'rgba(16,185,129,0.12)', targetStroke: 'rgba(5,150,105,0.9)',\n reach: 'rgba(217,119,6,0.95)', // amber-600\n missOk: 'rgba(16,185,129,0.6)', missBad: 'rgba(244,63,94,0.7)'\n } as const;\n }\n return {\n pageBg: 'bg-slate-900', pageText: 'text-slate-100', panelBg: 'bg-slate-800', panelBorder: 'border-slate-700', titleText: 'text-slate-200',\n grid: 'rgba(148,163,184,0.15)', axis: 'rgba(148,163,184,0.35)', surfaceText: '#94a3b8',\n path: 'rgba(59,130,246,0.98)', glow: '#3b82f6',\n targetFill: 'rgba(34,197,94,0.12)', targetStroke: 'rgba(16,185,129,0.9)',\n reach: 'rgba(234,179,8,0.95)',\n missOk: 'rgba(16,185,129,0.6)', missBad: 'rgba(244,63,94,0.7)'\n } as const;\n }, [themeName]);\n\n // Animation loop\n useEffect(() => {\n let raf: number; let start: number | null = null;\n const speed = 260; // nodes/second visual speed\n const step = (t: number) => {\n if (!playing) return;\n if (start === null) start = t;\n const dt = (t - start) / 1000; // s\n const next = Math.min(nodes.length, Math.floor(dt * speed));\n setDrawCount(next);\n if (next < nodes.length) raf = requestAnimationFrame(step);\n };\n if (playing) raf = requestAnimationFrame(step);\n return () => cancelAnimationFrame(raf);\n }, [nodes, playing]);\n\n // Reset animation on any param change\n useEffect(() => { setDrawCount(0); setPlaying(true); }, [params]);\n\n // Auto‑adapt when KOP changes: recompute suggested DLS and set buildRate (cap at 10)\n useEffect(() => {\n if (params.kopMD !== lastKOP.current) {\n const sDLS = suggestDLSDeg30m(params.kopMD, params.targetTVD, params.finalInc);\n setSuggestedDLS(sDLS);\n const capped = Math.min(sDLS, 10);\n setParams((pr) => ({ ...pr, buildRate30m: parseFloat(fmt2(capped)) }));\n lastKOP.current = params.kopMD;\n }\n }, [params.kopMD, params.targetTVD, params.finalInc]);\n\n // ----------------------------- Self-tests (console) -----------------------------\n useEffect(() => {\n const approx = (a: number, b: number, eps = 1e-6) => Math.abs(a - b) <= eps;\n // Test 1: With DLS=0, inclination should remain ~0\n const p1: Params = { ...params, buildRate30m: 0, finalInc: 60, kopMD: 500, targetTVD: 1000 };\n const n1 = generateTrajectory(p1);\n const end1 = n1[n1.length - 1];\n console.log(\"TEST 1 (DLS=0 → INC≈0):\", approx(end1.inc, 0));\n\n // Test 2: Build length sanity (DLS=3°/30m, finalInc=60° → ~600 m build)\n const p2: Params = { ...params, buildRate30m: 3, finalInc: 60, kopMD: 1000, targetTVD: 2000 };\n const n2 = generateTrajectory(p2);\n const incMax = n2.reduce((m, v) => Math.max(m, v.inc), 0);\n console.log(\"TEST 2 (reach ~60° INC):\", Math.abs(incMax - 60) < 1.0);\n\n // Test 3: Stats present & finite\n const s2 = computeStats(n2, p2.targetN, p2.targetE, p2.targetTVD);\n console.log(\"TEST 3 (stats finite):\", Number.isFinite(s2.hd) && Number.isFinite(s2.missHoriz));\n\n // Test 4: Suggested DLS increases if KOP deeper (less available length)\n const sA = suggestDLSDeg30m(1000, 3000, 60);\n const sB = suggestDLSDeg30m(1500, 3000, 60);\n console.log(\"TEST 4 (suggested DLS grows when KOP deepens):\", sB > sA);\n\n // Test 5: Boundary suggestedDLS == 10 at avail = 3*finalInc (e.g., finalInc=60 → avail=180)\n const sBoundary = suggestDLSDeg30m(2820, 3000, 60); // 3000-2820=180 → 60/180*30 = 10\n console.log(\"TEST 5 (boundary == 10):\", approx(sBoundary, 10, 1e-9));\n\n // Test 6: Over-limit suggestedDLS > 10 when avail smaller than boundary\n const sOver = suggestDLSDeg30m(2900, 3000, 60); // avail=100 → 60/100*30 = 18\n console.log('TEST 6 (over limit > 10):', sOver > 10);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const drawNodes = nodes.slice(0, Math.max(1, drawCount));\n\n // SVG path string\n const pathD = useMemo(() => {\n if (!drawNodes.length) return \"\";\n return drawNodes.map((p, i) => `${i === 0 ? \"M\" : \"L\"} ${p.e.toFixed(2)} ${p.tvd.toFixed(2)}`).join(\" \");\n }, [drawNodes]);\n\n const end = stats?.end as TrajectoryNode | undefined;\n const missOk = !!stats && (stats.missHoriz <= params.tolRadius) && (stats.missVert <= params.tolRadius);\n const notPermitted = suggestedDLS > 10 + 1e-6; // strict > 10\n\n const setP = (k: keyof Params, v: number) => setParams((pr) => ({ ...pr, [k]: v }));\n\n // Formation bands (simple synthetic column ending with Arenito at target)\n const formations = useMemo(() => {\n const t = Math.max(500, params.targetTVD);\n const bands = [\n { from: 0, to: Math.min(0.25 * t, t), color: \"rgba(148,163,184,0.06)\", label: \"Overburden / Shale\" },\n { from: Math.min(0.25 * t, t), to: Math.min(0.5 * t, t), color: \"rgba(96,165,250,0.06)\", label: \"Calcário\" },\n { from: Math.min(0.5 * t, t), to: Math.min(0.8 * t, t), color: \"rgba(244,114,182,0.06)\", label: \"Folhelho\" },\n { from: Math.min(0.8 * t, t), to: t, color: \"rgba(234,179,8,0.10)\", label: \"ARENITO\" },\n ];\n return bands;\n }, [params.targetTVD]);\n\n // Stroke width adapts with draw progress (thicker as it completes)\n const progress = drawNodes.length / Math.max(1, nodes.length);\n const strokeW = 4 + 4 * easeInOut(progress); // 4 → 8 px\n\n return (\n

\n {/* Left – Controls */}\n

\n \n \n setP('kopMD', v)} />\n setP('buildRate30m', v)} />\n setP('finalInc', v)} />\n setP('azimuth', v)} />\n \n \n setP('targetTVD', v)} />\n setP('targetN', v)} />\n setP('targetE', v)} />\n setP('tolRadius', v)} />\n \n \n setP('stepMD', v)} />\n

\n \n \n {/* Theme selector */}\n

\n Theme:\n

\n \n \n

\n \n \n\n \n {stats && end ? (\n

\n \n \n \n \n \n \n \n \n \n

\n {missOk ? 'WITHIN TOLERANCE' : 'OUT OF TOLERANCE'}\n

\n {notPermitted && (\n

\n NO PERMITTED — DLS {\">\"} 10°/30m (Risk of BHA failure)\n

\n )}\n

\n ) : (\n

Adjust parameters to compute…

\n )}\n \n

\n\n {/* Right – Visualization */}\n

\n {/* NO PERMITTED banner overlay */}\n {notPermitted && (\n

\n NO PERMITTED — Suggested DLS exceeds 10°/30m\n

\n )}\n

\n \n\n {/* Compass Rose (overlay) */}\n

AZI: {fmt1(params.azimuth)}°

\n \n

\n\n {/* Legend */}\n

Planned Path

Target Window

Miss Vector

Horizontal Reach

Arenito

\n );\n}\n\n// ------------------------ Small UI Primitives ------------------------\nfunction Card({ title, children, panelBgClass, panelBorderClass, titleTextClass }: { title: string; children: React.ReactNode; panelBgClass: string; panelBorderClass: string; titleTextClass: string; }) {\n return (\n

{title}

\n {children}\n

\n );\n}\n\nfunction Group({ label, children }: { label: string; children: React.ReactNode }) {\n return (\n

{label}

{children}

\n );\n}\n\nfunction Metric({ k, v }: { k: string; v: string }) {\n return (\n

\n {k}\n {v}\n

\n );\n}\n\nfunction SliderInput({ label, min, max, step, value, onChange }: { label: string; min: number; max: number; step: number; value: number; onChange: (v:number)=>void }) {\n const [local, setLocal] = useState(value);\n useEffect(()=>setLocal(value), [value]);\n return (\n

\n {label}\n {fmt2(value)}\n

\n { const v = parseFloat(e.target.value); setLocal(v); onChange(v); }}\n className=\"w-full accent-blue-500\"\n />\n

\n { const v = Number(e.target.value); setLocal(v); }} />\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","9116049565131750589","traceTime",1776439212454]