On this page:

• Local development
• npm scripts
• Dependencies & documentation
• Abstraction: Class diagram of components
• Architecture
• Interface Design
• Wildcard Regex Implementation

Local Development

• Prerequisite knowledge: HTML, JavaScript, git, GitHub
• Prerequisite packages: git, nodejs, npm (or deno (v2), bun, yarn)
• Clone the repository and change directory to the folder

git clone https://github.com/ECHOES-from-the-Past/mei-analyser.git
cd mei-analyser

• Install dependencies

npm i

• Update the local "database" to retrive interested MEI files from GABCtoMEI

npm run database

• Run local development website as follow. By default, the local development website should be available at address http://localhost:5173

npm run dev

• Edit the source code using any text/code editor of choice. Once the file is saved and the localhost development website is still up, the page will automatically be reloaded with the changes (thanks to Vite).

npm scripts

• npm run dev - Start development server at http://localhost:5173
• npm run database: runs the src/database/database.mjs to update the list of MEI files in the src/database/database.json (git ignored!)
• npm run build - Production build, including processing the "database" with NODE_ENV=production
• npm run preview - Serve the production build with root path /mei-analyser/, similar to the GitHub Pages page path

Dependencies & documentation

• Vite for development and build (MIT)
• Verovio for MEI rendering (LGPL 3.0)
• Octokit to obtain MEI files' content from GABCtoMEI (MIT)
• Svelte for web components design (MIT)
• TailwindCSS for styling class & bits-ui for styling components (MIT)
• node-xml2js to parse XML to JSON on the backend/database (MIT)

Abstraction: Class diagram

• The components extracted from the MEI files are abstracted using OOP principles.

Architecture

Starting from version 0.4.0, the new architecture is introduced with a backend process and a JSON file as database. It is visualized in the graph below. The main stages for the backend/server-side rendering are:

1. Use GitHub API to retrieve a list of files from GABCtoMEI repository
2. Process XML document into JSON, and to use and to analyse the JSON data to obtain metadata and other characteristics of the chant
3. Save all of the information as Chant object to database.json file
4. Put the database.json file into the web application build folder and treat is as an "API endpoint", accessible via "./database.json"

On the client side, the application uses localStorage API to save search options (query, checkboxes, etc.).

Interface Design

The main layout of the web application is as followed:

Search Panel

• The search panel is a div element with an identifier #search-panel and a CSS class .panel
• The layout of the search panel is divided using grid template. This was intentionally designed for desktop use, mobile interface design will differ in the future.

• Search elements of the panel are named and displayed as follow. Note that .section is a CSS class that creates a bounding box with rounded corners and shadow, with extra padding to separate a div from another.

Wildcard Regex Implementation