1 · Drop the JSX
Save the file in /root/skyfrac-vps/design-source/ and copy it into app/static/design/ so the browser can fetch it.
Use cases
Operator workflows, rendered from the same source you design with
Each module below is rendered live from a React component in app/static/design/—the same .jsx file used to produce the reference figures. Add a partial, drop in the JSX, mount it; no PNG round-trip.
Module 1 · Landing depth (V2 — dark technical)
Module 2 · Montney R² vs industry methods
R² vs industry methods
+20 pts over RTA class
R² — production correlation
Job-size indicators
Lateral ft · fluid · proppant
RTA ceiling
Rate transient analysis class
CFrac → PnP
Six-month production, post-job
CFrac → NCS
Normalized cumulative saturation
+20 pts
↔
Sensor quality
↔
Higher-frequency, cleaner surface data widens the gap from PnP (0.85) to NCS (0.96).
This module is a placeholder rendered from CSS until the canonical .jsx for it lands in design-source/.
Adding more designs
Integration pattern
2 · Add a mount
Create partials/use_case_<name>.html with one <div id="...mount">. Include it from this page.
3 · Wire the script
Add the <script type="text/babel" src="..."> in the scripts block below, then a one-line ReactDOM.createRoot(...).render(...).
Canonical inputs live in /root/skyfrac-vps/design-source/. See its README.md for the workflow when you generate a new variation.