Dropdown keys

index.html

@@ -149,7 +149,6 @@
     <script type="text/javascript">
         const datasetFolder = "./dataset/"
         const fileNamesList = ['10 1', '10 10', '10 11', '10 12', '10 13', '10 14', '10 15', '10 2', '10 3', '10 4', '10 5', '10 6', '10 7', '10 8', '10 9', '11 1', '11 10', '11 11', '11 12', '11 13', '11 14', '11 15', '11 2', '11 3', '11 4', '11 5', '11 6', '11 7', '11 8', '11 9', '12 1', '12 12', '12 2', '12 3', '12 4', '12 5', '12 6', '13 1', '13 10', '13 11', '13 12', '13 13', '13 14', '13 15', '13 2', '13 3', '13 4', '13 5', '13 6', '13 7', '13 8', '13 9', '14 1', '14 10', '14 11', '14 12', '14 13', '14 14', '14 15', '14 2', '14 3', '14 4', '14 5', '14 6', '14 7', '14 8', '14 9', '15 1', '15 10', '15 11', '15 12', '15 13', '15 14', '15 15', '15 2', '15 3', '15 4', '15 5', '15 6', '15 7', '15 8', '15 9', '16 1', '16 10', '16 11', '16 12', '16 13', '16 14', '16 15', '16 16', '16 2', '16 3', '16 4', '16 5', '16 6', '16 7', '16 8', '16 9', '17 1', '17 10', '17 11', '17 12', '17 13', '17 14', '17 15', '17 16', '17 17', '17 2', '17 3', '17 4', '17 5', '17 6', '17 7', '17 8', '17 9', '18 1', '18 18', '18 2', '18 3', '18 4', '18 5', '18 6', '18 7', '19 1', '19 19', '20 1', '20 20', '21 1', '21 21', '22 1', '22 22', '23 1', '23 23', '24 1', '24 24', '25 1', '25 25', '26 1', '26 26', '27 1', '27 27', '28 1', '28 28', '29 1', '29 29', '3 1', '3 3', '30 1', '30 30', '31 1', '31 31', '32 1', '32 32', '33 1', '33 33', '34 1', '34 34', '35 1', '35 35', '36 1', '36 36', '37 1', '37 37', '38 1', '38 38', '39 1', '39 39', '4 1', '4 4', '40 1', '40 40', '41 1', '41 41', '42 1', '42 42', '43 1', '43 43', '44 1', '44 44', '45 1', '45 45', '46 1', '46 46', '47 1', '47 47', '48 1', '48 48', '49 1', '5 1', '5 10', '5 11', '5 12', '5 13', '5 14', '5 15', '5 2', '5 3', '5 4', '5 5', '5 6', '5 7', '5 8', '5 9', '6 1', '6 10', '6 11', '6 12', '6 13', '6 14', '6 15', '6 2', '6 3', '6 4', '6 5', '6 6', '6 7', '6 8', '6 9', '7 1', '7 10', '7 11', '7 12', '7 13', '7 14', '7 15', '7 2', '7 3', '7 4', '7 5', '7 6', '7 7', '7 8', '7 9', '8 1', '8 10', '8 11', '8 12', '8 13', '8 14', '8 15', '8 2', '8 3', '8 4', '8 5', '8 6', '8 7', '8 8', '8 9', '9 1', '9 10', '9 11', '9 12', '9 13', '9 14', '9 15', '9 2', '9 3', '9 4', '9 5', '9 6', '9 7', '9 8', '9 9'];
-        fileNamesList.sort((a, b) => a.split(" ")[0] - b.split(" ")[0] || a.split(" ")[1] - b.split(" ")[1]);
         const dropdown = document.getElementById("keyDropdown");
         const mediaCheckbox = document.getElementById("mediaCheckbox");
         const distributionCheckbox = document.getElementById("distributionCheckbox");
@@ -158,12 +157,21 @@
         const barsSlider = document.getElementById("barsSlider");
         const barsCountValue = document.getElementById("barsCountValue");
 
-        var key = fileNamesList[107];
+        var key = null;
         var animationTime = 600;
         var bins = 10;
         var currentData = null;
         var currentKey = null;
 
+        async function checkFileExists(fileName) {
+            try {
+                const response = await fetch(datasetFolder + fileName + ".json", { method: 'HEAD' });
+                return response.ok;
+            } catch (error) {
+                return false;
+            }
+        }
+
         async function getData(key) {
             try {
                 const response = await fetch(datasetFolder + key + ".json");
@@ -178,7 +186,7 @@
             }
         }
 
-        async function start() {
+        async function crearHistogramas() {
             if (currentKey !== key) {
                 currentData = await getData(key);
                 currentKey = key;
@@ -366,15 +374,15 @@
         //Funciones que se ejecutan al ocurrir eventos
         function onDropdownChange() {
             key = dropdown.value;
-            start();
+            crearHistogramas();
         }
 
         function onCheckboxMediaChange() {
-            start();
+            crearHistogramas();
         }
 
         function onCheckboxDistributionChange() {
-            start();
+            crearHistogramas();
         }
 
         function onSliderChange() {
@@ -383,7 +391,7 @@
 
         function onBarsSliderChange() {
             updateBarsCount(parseInt(barsSlider.value));
-            start();
+            crearHistogramas();
         }
 
         function updateAnimationTime(newAnimationTime) {
@@ -406,13 +414,23 @@
         }
 
         //Inicializar documento
-        fileNamesList.forEach((fileName) => {
+        async function iniciarWeb() {
+            const availableFiles = [];
+            for (const fileName of fileNamesList) {
+                if (await checkFileExists(fileName)) {
+                    availableFiles.push(fileName);
+                }
+            }
+            availableFiles.sort((a, b) => a.split(" ")[0] - b.split(" ")[0] || a.split(" ")[1] - b.split(" ")[1]);
+
+            availableFiles.forEach(fileName => {
                 const option = document.createElement("option");
                 option.value = fileName;
                 option.textContent = fileName;
                 dropdown.appendChild(option);
             });
 
+            key = availableFiles[6];
             dropdown.value = key;
             mediaCheckbox.checked = true;
             distributionCheckbox.checked = false;
@@ -420,7 +438,9 @@
             updateAnimationTime(600);
             updateBarsCount(20);
             barsSlider.value = 10;
-        start();        
+            crearHistogramas();
+        }
+        iniciarWeb();        
     </script>
 </body>