# osaftari-source/pipe-support-span architecture

> Architecture diagram of the GitHub repository osaftari-source/pipe-support-span, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/osaftari-source/pipe-support-span
- Repository: https://github.com/osaftari-source/pipe-support-span

## Overview

Pipe Support Span is a mobile-first browser PWA for preliminary steel pipe-support screening. Users select a verified PIM-2 class or enter pipe details manually, then adjust fluid density, insulation and hydrotest inclusion; changes trigger live calculation of recommended span, load cases and intermediate/end reactions. The code separates input orchestration and calculation in js/app.js from dimensional and reference data in js/data.js, while sw.js caches the app offline and handles updates. README capabilities guide the map; sampled excerpts do not show every calculation detail or all UI wiring.

Main entry points: [`index.html`](https://github.com/osaftari-source/pipe-support-span/blob/main/index.html) (Input and Results UI), [`js/app.js`](https://github.com/osaftari-source/pipe-support-span/blob/main/js/app.js) (Input and Calculation), [`sw.js`](https://github.com/osaftari-source/pipe-support-span/blob/main/sw.js) (Offline Cache and Updates), [`js/data.js`](https://github.com/osaftari-source/pipe-support-span/blob/main/js/data.js) (PIM-2 Seed Classes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_inputs["Pipe Inputs"]
  node_ui["Input and Results UI<br/>[index.html]"]
  node_classdata["PIM-2 Seed Classes<br/>[data.js]"]
end

subgraph group_engineering["Span Assessment"]
  node_app["Input and Calculation<br/>[app.js]"]
  node_basis["Pipe and Span Basis<br/>[data.js]"]
  node_results["Span and Reactions<br/>[index.html]"]
end

subgraph group_delivery["PWA Delivery"]
  node_manifest["Install Metadata"]
  node_worker["Offline Cache and Updates<br/>[sw.js]"]
  node_browser[("Browser Cache")]
end

node_surveyor(("Site Surveyor"))

node_surveyor -->|"enters inputs"| node_ui
node_ui -->|"input events"| node_app
node_app -->|"reads classes"| node_classdata
node_app -->|"reads dimensions and spans"| node_basis
node_app -->|"updates live results"| node_results
node_ui -.->|"offers installation"| node_manifest
node_ui -->|"registers worker"| node_worker
node_worker -->|"caches assets"| node_browser
node_browser -->|"serves cached requests"| node_worker
node_worker -->|"refreshes clients"| node_ui

click node_ui "https://github.com/osaftari-source/pipe-support-span/blob/main/index.html"
click node_app "https://github.com/osaftari-source/pipe-support-span/blob/main/js/app.js"
click node_classdata "https://github.com/osaftari-source/pipe-support-span/blob/main/js/data.js"
click node_basis "https://github.com/osaftari-source/pipe-support-span/blob/main/js/data.js"
click node_results "https://github.com/osaftari-source/pipe-support-span/blob/main/index.html"
click node_manifest "https://github.com/osaftari-source/pipe-support-span/blob/main/manifest.webmanifest"
click node_worker "https://github.com/osaftari-source/pipe-support-span/blob/main/sw.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui,node_classdata toneBlue
class node_app,node_basis,node_results toneAmber
class node_manifest,node_worker,node_browser toneMint
class node_surveyor toneIndigo
```

## Components

### Pipe Inputs

- [Input and Results UI](https://github.com/osaftari-source/pipe-support-span/blob/main/index.html): `index.html`
- [PIM-2 Seed Classes](https://github.com/osaftari-source/pipe-support-span/blob/main/js/data.js): `js/data.js`

### Span Assessment

- [Input and Calculation](https://github.com/osaftari-source/pipe-support-span/blob/main/js/app.js): `js/app.js`
- [Pipe and Span Basis](https://github.com/osaftari-source/pipe-support-span/blob/main/js/data.js): `js/data.js`
- [Span and Reactions](https://github.com/osaftari-source/pipe-support-span/blob/main/index.html): `index.html`

### PWA Delivery

- [Install Metadata](https://github.com/osaftari-source/pipe-support-span/blob/main/manifest.webmanifest): `manifest.webmanifest`
- [Offline Cache and Updates](https://github.com/osaftari-source/pipe-support-span/blob/main/sw.js): `sw.js`
- **Browser Cache**

### Other components

- **Site Surveyor**

## Connections

- Site Surveyor → Input and Results UI: enters inputs
- Input and Results UI → Input and Calculation: input events
- Input and Calculation → PIM-2 Seed Classes: reads classes
- Input and Calculation → Pipe and Span Basis: reads dimensions and spans
- Input and Calculation → Span and Reactions: updates live results
- Input and Results UI → Install Metadata: offers installation
- Input and Results UI → Offline Cache and Updates: registers worker
- Offline Cache and Updates → Browser Cache: caches assets
- Browser Cache → Offline Cache and Updates: serves cached requests
- Offline Cache and Updates → Input and Results UI: refreshes clients