Max-Flow-Explorer/index.html at main · SimoneRemoli/Max-Flow-Explorer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Max Flow Explorer</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="page-shell">
      <header class="hero">
        <div class="hero-copy-wrap">
          <p class="eyebrow">TypeScript App</p>
          <h1>Max Flow Explorer</h1>
          <p class="hero-copy">
            Crea un grafo orientato, imposta capacita e flusso iniziale, poi
            calcola il flusso massimo visualizzando i cammini augmenting e la
            decomposizione finale del flusso.
          </p>
        </div>
        <div class="hero-actions">
          <button id="load-example-btn" type="button">Carica esempio</button>
          <button id="reset-flow-btn" type="button" class="secondary">
            Azzera flussi
          </button>
          <button id="clear-graph-btn" type="button" class="danger">
            Elimina grafo
          </button>
        </div>
      </header>

      <main class="layout">
        <section class="panel controls">
          <div class="section-head">
            <h2>Costruzione del grafo</h2>
            <p>Inserisci nodi, archi e valori iniziali.</p>
          </div>

          <form id="node-form" class="inline-form">
            <label>
              Nodo
              <input id="node-name" name="nodeName" type="text" placeholder="Es. A" maxlength="12" required />
            </label>
            <button type="submit">Aggiungi nodo</button>
          </form>

          <form id="edge-form" class="grid-form">
            <label>
              Da
              <select id="edge-from" name="from" required></select>
            </label>
            <label>
              A
              <select id="edge-to" name="to" required></select>
            </label>
            <label>
              Capacita
              <input id="edge-capacity" name="capacity" type="number" min="0" step="1" value="1" required />
            </label>
            <label>
              Flusso iniziale
              <input id="edge-flow" name="flow" type="number" min="0" step="1" value="0" required />
            </label>
            <button type="submit">Aggiungi arco</button>
          </form>

          <div class="grid-form source-sink-row">
            <label>
              Sorgente
              <select id="source-select"></select>
            </label>
            <label>
              Pozzo
              <select id="sink-select"></select>
            </label>
          </div>

          <div class="lists">
            <div>
              <h3>Nodi</h3>
              <ul id="node-list" class="chip-list"></ul>
            </div>
            <div>
              <h3>Archi</h3>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <th>Arco</th>
                      <th>Capacita / Flusso</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody id="edge-table-body"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="action-row">
            <button id="compute-btn" type="button" class="primary">
              Calcola flusso massimo
            </button>
            <p id="status-message" class="status-message"></p>
          </div>

          <div class="validation-panel">
            <h3>Verifica dei flussi</h3>
            <div id="flow-validation" class="summary-card empty">
              Nessun nodo da verificare.
            </div>
          </div>
        </section>

        <section class="panel visualization">
          <div class="section-head">
            <h2>Visualizzazione del grafo</h2>
            <p>Gli archi mostrano capacita/flusso nel grafo corrente.</p>
          </div>
          <div class="graph-toolbar">
            <button id="enter-graph-focus-btn" type="button" class="secondary">
              Focus graph
            </button>
            <button id="exit-graph-focus-btn" type="button" class="danger graph-focus-exit">
              Close focus
            </button>
            <p class="graph-hint">On mobile, use focus mode to drag nodes on a fixed screen.</p>
          </div>
          <svg id="graph-svg" viewBox="0 0 860 520" aria-label="Grafo orientato"></svg>
        </section>
      </main>

      <section class="results-grid">
        <article class="panel">
          <div class="section-head">
            <h2>Risultato</h2>
            <p>Valore del flusso e verifiche di base.</p>
          </div>
          <div id="result-summary" class="summary-card empty">
            Nessun calcolo eseguito.
          </div>
        </article>

        <article class="panel">
          <div class="section-head">
            <h2>Cammini augmenting</h2>
            <p>I cammini trovati durante Edmonds-Karp.</p>
          </div>
          <ol id="augmenting-paths" class="path-list"></ol>
        </article>

        <article class="panel">
          <div class="section-head">
            <h2>Decomposizione finale</h2>
            <p>I cammini sorgente-pozzo presenti nel flusso finale.</p>
          </div>
          <ol id="flow-decomposition" class="path-list"></ol>
        </article>

        <article class="panel">
          <div class="section-head">
            <h2>Minimo taglio</h2>
            <p>Certificato: capacita del taglio uguale al flusso massimo.</p>
          </div>
          <div id="min-cut-summary" class="summary-card empty">
            Nessun minimo taglio disponibile.
          </div>
        </article>
      </section>
    </div>

    <script src="./app.js"></script>
  </body>
</html>