5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" href="applist_styles.css">
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
10 ----------------------------------------------------
11 TABLE OF COMIN APPLICATIONS
12 ----------------------------------------------------
16 const data = jsyaml.load(`
17 - name: simple_fortran
23 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
27 - name: calc_water_column
32 description: Simple diagnostic application, calculating the liquid water path, the ice water path, and the total water column.
33 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
42 description: Example plugin to demonstrate the usage of the YAXT communication library.
43 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
53 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
62 description: Plugin written in C which encapsulates a YAC coupling inside a ComIn plugin.
63 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
72 description: Plugin written in C to demonstrate using the YAXT communication library.
73 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
77 - name: simple_python_plugin
83 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
92 description: Test plugin requesting a tracer that participates in ICON’s turbulence and convection scheme. This plugin also shows how a grid point search in Python using <a href="https://scipy.org/">SciPy</a> can be done.
93 url: https://gitlab.dkrz.de/icon-comin/comin/-/tree/master/plugins
97 - name: Hands-On Exercises
98 language: Python, Jupyter Notebooks
102 description: Example plugins including the use of matplotlib, mpi4py
103 url: https://gitlab.dkrz.de/icon-comin/comin-training-exercises
107 - name: MESSy Adapter
109 type: Framework Adapter
112 description: Adapter for the Modular Earth Submodel System (MESSy)
117 - name: Prometheus Exporter
122 description: Online monitoring within Grafana/Prometheus
125 cominversion: pre-0.1.0
127 - name: Catalyst Adapter
132 description: In situ visualization with Paraview/Catalyst
133 url: https://gitlab.dkrz.de/icon-comin/catalyst_adapter
137 - name: Solar Eclipse
139 type: prognostic (prototype)
142 description: considering solar eclipse in the insolation
144 status: to be developed
150 author: CLM / UDAG project
152 description: Calculation of potential evapotranspiration
154 status: to be developed
157 - name: cell tracking
160 author: CLM / UDAG project
162 description: cell tracking based on 5min precipitation output
164 status: to be developed
167 - name: proimpact 5 min prec
170 author: ProImpact / Felipe Navarrete
172 description: 5min precipitation diagnostic
173 url: https://github.com/felipehnn/proimpact_comin
182 description: Model wakes of offshore wind farms
183 url: https://gitlab.dkrz.de/b381588/windwaker
188 const title_names = {
190 language : 'Programming Language',
194 description : 'Description',
197 cominversion: 'ComIn version',
203 ----------------------------------------------------
204 JAVASCRIPT PART - DO NOT MODIFY BELOW THIS LINE!
205 ----------------------------------------------------
209 <div id="tableContainer"></div>
211 // Function to create a table from the parsed YAML data
212 function createTable(data, header_mapping) {
213 if (!Array.isArray(data)) {
214 console.error('YAML data is not an array of objects');
218 const keys = [...new Set(data.flatMap(Object.keys))];
219 let tableHTML = '<table id="myTable" class="styled-table"><thead><tr>';
221 // Create table header
222 keys.forEach(key => {
223 tableHTML += `<th>${header_mapping[key] || key}</th>`;
225 tableHTML += '</tr></thead>';
228 const prekey = { url : '<a class="styled-link" " href="' };
229 const postkey = { url : '"></a>' };
230 data.forEach(item => {
232 keys.forEach(key => {
233 tableHTML += `<td>${prekey[key] || ''}${item[key] || ''}${postkey[key] || ''}</td>`;
235 tableHTML += '</tr>';
238 tableHTML += '</table>';
239 document.getElementById('tableContainer').innerHTML = tableHTML;
242 function setupTable() {
243 createTable(data, title_names);
245 // // fetch and parse the YAML file
246 // // (variant when no CORS restriction applies:)
247 // fetch('data.yaml')
248 // .then(response => response.text())
250 // const data = jsyaml.load(text);
251 // createTable(data);
253 // .catch(error => console.error('Error loading YAML file:', error));
255 document.addEventListener('DOMContentLoaded', function() {
256 const table = document.getElementById('myTable');
257 const headers = table.querySelectorAll('thead th');
258 const tbody = table.querySelector('tbody');
260 headers.forEach(header => {
261 header.addEventListener('click', () => {
262 const column = header.cellIndex;
263 const rows = Array.from(tbody.querySelectorAll('tr'));
265 const isAscending = header.classList.contains('sorted-asc');
267 rows.sort((a, b) => {
268 const aValue = a.cells[column].textContent.trim();
269 const bValue = b.cells[column].textContent.trim();
271 ? bValue.localeCompare(aValue, undefined, {numeric: true, sensitivity: 'base'})
272 : aValue.localeCompare(bValue, undefined, {numeric: true, sensitivity: 'base'});
275 headers.forEach(h => h.classList.remove('sorted-asc', 'sorted-desc'));
276 header.classList.toggle('sorted-asc', !isAscending);
277 header.classList.toggle('sorted-desc', isAscending);
279 tbody.append(...rows);
285 setupTable(); // function to create a table from the parsed YAML data