Handle Long Melismas + Add Musicologist Button

package.json

@@ -10,7 +10,8 @@
     "postcss": "^8.5.6",
     "svelte": "^5.41.2",
     "tailwindcss": "^3.4.18",
-    "vite": "^6.4.1"
+    "vite": "^6.4.1",
+    "patternomaly": "^1.3.2"
   },
   "private": true,
   "scripts": {

src/components/Download.svelte

@@ -0,0 +1,13 @@
+<a href="https://github.com/ECHOES-from-the-Past/PAM/blob/main/public/Test_PDF.pdf" target=_blank>For Musicologists</a>
+
+<style lang="postcss">
+    /* Default button styles */
+    a {
+        @apply border-0 rounded-lg text-white py-2 px-4 font-medium bg-pink-600;
+        @apply cursor-pointer transition ease-in-out duration-300;
+
+        @apply hover:bg-pink-400;
+        @apply active:bg-pink-500;
+        @apply disabled:bg-gray-400 disabled:cursor-not-allowed;
+    }
+</style>

src/components/NavBar.svelte

@@ -2,6 +2,7 @@
   import { env } from "@utility/utils";
   import Button from "./Button.svelte";
   import ExternalLink from "./ExternalLink.svelte";
+  import Download from "./Download.svelte";
 
   let clientVersion = $state();
   export function setVersion(version) {
@@ -26,6 +27,7 @@
   <ExternalLink href="https://github.com/ECHOES-from-the-Past/PAM">
     <Button>Source Code</Button>
   </ExternalLink>
+  <Download>For Musicologists</Download>
 
   <p id="client-version" class="text-base text-emerald-900 ml-auto">
     Version: {clientVersion}

src/search/AnalysisChart.svelte

@@ -11,6 +11,7 @@
   } from "@utility/components";
   import { Chart } from "chart.js/auto";
   import { onMount } from "svelte";
+  import { draw, generate } from "patternomaly";
 
   /**
    * @typedef {Object} Props
@@ -28,8 +29,10 @@
   const COLORS = {
     normalBg: "#10b98180",
     normalBorder: "#047857aa",
-    rhombusBg: "#67e8f980",
-    rhombusBorder: "#06b6d4aa",
+    rhombusBg: "#3c74f9aa",
+    rhombusBorder: "#1310f9aa",
+    ncBg: "#9270f6aa",
+    ncBorder: "#9253f2aa"
   };
 
   /**
@@ -86,7 +89,7 @@
       {
         label: "Rhombus",
         data: sortedKeys.map((key) => rhombus[key]),
-        backgroundColor: new Array(sortedKeys.length).fill(COLORS.rhombusBg),
+        backgroundColor: new Array(sortedKeys.length).fill(draw('diamond', COLORS.rhombusBg)),
         borderColor: new Array(sortedKeys.length).fill(COLORS.rhombusBorder),
         borderWidth: 1,
       },
@@ -153,7 +156,9 @@
    */
   function getChantDataOldHispanic(chantSyls) {
     const labels = [];
-    const data = [];
+    const ncData = [];
+    const ncData20 = [];
+    let has20Plus = false;
 
     for (let i = 0; i < chantSyls.length; i++) {
       const curSyl = chantSyls[i];
@@ -164,26 +169,73 @@
         const position = prevSyl.syllableWord.position;
         if (position === "t" || position === "s") {
           labels.push(" ");
-          data.push(0);
+          ncData.push(0);
+          ncData20.push(0);
         }
       }
 
+      const ncLen = curSyl.neumeComponents.length;
       labels.push(curSyl.syllableWord.text);
-      data.push(curSyl.neumeComponents.length);
+      if (ncLen >= 20){
+        has20Plus = true;
+        ncData20.push(ncLen);
+        ncData.push(0);
+      }
+      else{
+        ncData.push(ncLen);
+        ncData20.push(0);
+      }
     }
 
-    return {
-      labels,
-      datasets: [
-        {
-          label: "Number of notes",
-          data,
-          backgroundColor: new Array(labels.length).fill(COLORS.normalBg),
-          borderColor: new Array(labels.length).fill(COLORS.normalBorder),
-          borderWidth: 1,
-        },
-      ],
-    };
+    if (has20Plus){
+      return {
+        labels,
+        datasets: [
+          {
+            label: "Number of NCs",
+            data: ncData,
+            backgroundColor: new Array(ncData.length).fill(COLORS.normalBg),
+            borderColor: new Array(ncData.length).fill(COLORS.normalBorder),
+            borderWidth: 1,
+          },
+          {
+            label: "Number of NCs (20+)",
+            data: ncData20,
+            backgroundColor: new Array(ncData20.length).fill(draw('plus', COLORS.ncBg)),
+            borderColor: new Array(ncData20.length).fill(COLORS.ncBorder),
+            borderWidth: 1,
+          },
+        ],
+      };
+    }
+    else{
+      return {
+        labels,
+        datasets: [
+          {
+            label: "Number of NCs",
+            data: ncData,
+            backgroundColor: new Array(ncData.length).fill(COLORS.normalBg),
+            borderColor: new Array(ncData.length).fill(COLORS.normalBorder),
+            borderWidth: 1,
+          }
+        ]
+      };
+    }
+  }
+
+  function getMaxNCs(chantSyls){
+    let max = -1;
+    for (let i = 0; i < chantSyls.length; i++) {
+      const curSyl = chantSyls[i];
+      const ncLen = curSyl.neumeComponents.length;
+      if (ncLen > max){
+        max = ncLen;
+      }
+    }
+    if (max >= 20)
+      return 20;
+    return max;
   }
 
   onMount(() => {
@@ -193,13 +245,11 @@
 
     if (isOldHispanic) {
       chantData = getChantDataOldHispanic(chant.syllables);
-
+      let maxNcs = getMaxNCs(chant.syllables);
       config = {
         titleText: "Number of Neume Components Across Chant",
         xText: "Text",
         yText: "Number of Neume Components",
-        xTick: 12,
-        chartLegend: false,
       };
     } else {
       const notes = getNeumeComponentList(chant.syllables);
@@ -212,13 +262,6 @@
         titleText: "Frequency of the notes across the chant ambitus",
         xText: "Ambitus",
         yText: "Frequency",
-        xTick: 14,
-        chartLegend: {
-          labels: {
-            display: true,
-            font: { size: 14 },
-          },
-        },
       };
     }
 
@@ -234,7 +277,7 @@
     }
 
     // Create the chart
-    new Chart(chart, {
+    const chartSettings = {
       type: "bar",
       data: chantData,
       options: {
@@ -250,14 +293,16 @@
             },
             padding: 14,
           },
-          legend: config.chartLegend ? {
-            ...config.chartLegend,
+          legend: {
             labels: {
-              ...config.chartLegend.labels,
-              font: { size: 15, weight: "bold" },
+              display: true,
+              font: { 
+                size: 15,
+                weight: "bold" 
+              },
               padding: 8,
             },
-          } : config.chartLegend,
+          }
         },
         scales: {
           x: {
@@ -290,6 +335,13 @@
               padding: 2,
             },
             ticks: {
+              //Chart cuts off at max of 20, so use 20+ for clarity when there's more than 20 NCs
+              callback: function(val, index) {
+                if (val == 20 && chant.notationType == "old_hispanic"){
+                  return "20+"
+                }
+                return val;
+              },
               font: {
                 size: 13,
               },
@@ -302,8 +354,13 @@
           margin: 0,
         },
       },
-    });
+    };
+    if (chant.notationType == "old_hispanic" && (getMaxNCs(chant.syllables) >= 20)){
+      chartSettings.options.scales.y.max = 20;
+    }
+    new Chart(chart, chartSettings);
   });
+
 </script>
 
 <div

src/search/ChantDetails.svelte

@@ -68,13 +68,22 @@
                 }
             } else if (info == "MEI File") {  // Links to the GitHub MEI files
                 p.innerHTML = `<b>${info}</b>: `;
-                const rootGABCtoMEI =
-                    "https://github.com/ECHOES-from-the-Past/GABCtoMEI/blob/main/";
+                const rootPamMeiDatabase =
+                    "https://github.com/ECHOES-from-the-Past/PAM-MEI-Database/blob/main/";
 
                 let fileName = chant.fileName;
                 let a = document.createElement("a");
-
-                a.href = rootGABCtoMEI + fileName;
+                let chantLink;
+                if (chant.notationType == "square"){
+                    chantLink = "Square_MEIs/";
+                }
+                else if (chant.notationType == "aquitanian"){
+                    chantLink = "Aquitanian_MEIs/";
+                }
+                else if (chant.notationType == "old_hispanic"){
+                    chantLink = "Old_Hispanic_MEIs/";
+                }
+                a.href = rootPamMeiDatabase + chantLink + fileName;
                 a.target = "_blank";
                 a.innerText = `${fileName.split("/").pop()} (GitHub)`; // showing the file name only
                 p.appendChild(a);