codegraph-viewer/index.html at main · hygeos/codegraph-viewer · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GEXF Graph Viewer</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js"></script>
    <script src="scripts/GroupProvider.js"></script>
    <script src="scripts/GexfParser.js"></script>
    <script src="scripts/GraphForce.js"></script>
    <!-- New modular components -->
    <script src="scripts/GraphState.js"></script>
    <script src="scripts/RenderManager.js"></script>
    <script src="scripts/SearchManager.js"></script>
    <script src="scripts/FilterManager.js"></script>
    <script src="scripts/LayoutManager.js"></script>
    <script src="scripts/ThemeManager.js"></script>
    <script src="scripts/FileManager.js"></script>
    <!-- Main orchestrator -->
    <script src="scripts/GraphViewer.js"></script>
  </head>
  <body>
    <div id="tooltip"></div>
    <div id="ping-indicator">🎯</div>
    <div class="main-container">
      <div class="controls">
        <button id="load-file">Load Graph</button>
        <button id="start-layout">Start</button>
        <button id="reset-layout">Reset</button>
        <label>Iterations: <input type="number" id="max-iterations" min="10" max="5000" step="10" value="300" title="Number of total iterations for the force layout algorithm"/></label>
        <label>IPF: <input type="number" id="ipf" min="1" max="100" step="1" value="3" title="Iterations per frame - higher = faster but less smooth" to/></label>
        <button id="center-view" title="Center view on graph">🎯</button>
        <button id="zoom-in">🔍+</button>
        <button id="zoom-out">🔍−</button>
        <button id="theme-toggle" title="Toggle Dark/Light Mode">🌙</button>
        <input type="file" id="file-input" accept=".gexf" style="display: none;" />
        <span id="filename-display"></span>
        <span id="iteration-counter">No file loaded</span>
      </div>
      <div class="left-column">
        <div id="header-sidebar">
          <div class="sidebar-header">
            <img src="assets/codegraph-logo.svg" alt="Codegraph" class="sidebar-logo" />
            <h2 class="app-title">Codegraph Viewer</h2>
            <em class="app-description">A dynamic platform for analyzing and understanding complex codebases</em>
          </div>
          <!-- <div class="sidebar-footer"> -->
            <!-- <p class="app-credit">Developed for the CAMS2_3bis project</p> -->
          <!-- </div> -->
        </div>
        <div id="search-sidebar">
          <h3>Search</h3>
        <div class="search-box">
          <input type="text" id="search-input" placeholder="Search nodes..." />
          <button id="search-clear" title="Clear search">×</button>
        </div>
        <div class="search-sort">
          <label>
            <input type="radio" name="search-sort" value="alpha" checked />
            Alphabetical
          </label>
          <label>
            <input type="radio" name="search-sort" value="parent" />
            By Parent
          </label>
        </div>
        <div id="search-results"></div>
        </div>
      </div>
      <div id="sigma-container"></div>
      <div class="bottom-right-credits">
        <img id="hygeos-logo" src="assets/logo-hygeos-white.svg" alt="Hygeos" />
        <div class="project-credit">Developed for the CAMS2_3bis project</div>
      </div>
      <div id="parent-sidebar">
        <h3>Filters</h3>
        <div class="preset-controls">
          <select id="preset-select">
            <option value="">-- Select Preset --</option>
          </select>
          <input type="text" id="preset-name" placeholder="Preset name..." />
          <div>
            <button id="save-preset" title="Save current filter as preset">Save</button>
            <button id="delete-preset" title="Delete selected preset">Delete</button>
          </div>
        </div>
        <div class="grouping-mode-controls">
          <div class="grouping-mode-header">
            <span class="grouping-label">Group by:</span>
            <label class="grouping-radio">
              <input type="radio" name="grouping-mode" value="parent" checked />
              Parent
            </label>
            <label class="grouping-radio">
              <input type="radio" name="grouping-mode" value="prefix" />
              Prefix
            </label>
          </div>
          <div class="grouping-params">
            <div class="param-item" id="prefix-controls">
              <label>Prefix:</label>
              <input type="number" id="prefix-length" min="1" max="5" value="3" />
            </div>
            <div class="param-item" id="threshold-controls">
              <label>Min size:</label>
              <input type="number" id="group-threshold" min="1" max="100" value="5" />
            </div>
            <button id="apply-prefix" class="apply-btn">Apply</button>
          </div>
        </div>
        <div class="select-all-controls">
          <button id="select-all-parents" title="Show all parent groups">Select All</button>
          <button id="deselect-all-parents" title="Hide all parent groups">Deselect All</button>
        </div>
        <label class="isolated-filter">
          <input type="checkbox" id="remove-isolated" checked />
          Remove isolated nodes
        </label>
        <div id="parent-list"></div>
      </div>
    </div>

    <div class="disclaimer-banner">
      ⚠️ Early version prototype - subject to bugs: contact: <a href="mailto:joackim.orciere@hygeos.com">joackim.orciere@hygeos.com</a>
    </div>

    <script>
      // Initialize viewer after DOM is loaded
      const viewer = new GraphViewer();
    </script>
  </body>
</html>