Refactor image captions and add new ones

[leandrumartin]

🎯 Goal / Objective

A clear and concise description of what this task aims to achieve. Why is this task important?

Background and Reasoning

The captions that appear under images in the main viewer are currently stored in the front-end. This is very bad design, considering that all of the rest of our data is stored in the back-end. I am at a loss as to why somebody approved this design.

This design makes our repository confusing to navigate and update—so much so, in fact, that I missed this file completely when planning out how to add new data into the app.

Goal

We should move this information from templates/js/imageCaptions.js into JSON files in our the same place where the rest of our data is stored. We should then restructure the data to make it easier to add in data that we had not added earlier, and add that data in. This will all require refactoring of the backend (to pull in the data and serve it to the frontend) and the part of the frontend that uses the data.

Restructuring

The data is currently structured as:

{
  "bone_id_1": {
    "image1": "Image Caption",
    "image2": "Image Caption"
  },
  "bone_id_2": {
    "image1": "Image Caption"
  },
  ...
}

Since many bones share the same representative images, we have many more bones and bone parts in our database than we do images. It would therefore be much more economical to associate captions with the image files themselves rather than with the bones. So, the data should instead be structured as:

{
  "image_filename_1": "Image Caption",
  "image_filename_2": "Image Caption",
  ...
}

---

✅ Tasks to be Completed

A checklist of the specific, actionable steps required to complete this issue. This helps track progress.

• Restructure data
• Refactor front-end to work with new data structure
• Move data to backend
• Refactor backend and frontend to pull the data in from its new location. The frontend should do so via a function in templates/js/api.js, as that is where we keep all functions the frontend uses to pull data in from the backend.
• Follow along with the PowerPoints we are using as our source of data to add captions for all the remaining images.

---

Acceptance Criteria

A checklist of conditions that must be met for this task to be considered complete. How will we verify that it's done correctly?

• The new feature is implemented as described.
• All related code passes the repository's workflow checks (linting, tests).
• The application runs without errors after the changes are made.
• (If applicable) New automated tests have been added to cover the changes.
• Any related documentation has been updated, including JSDoc comments or docstrings

---

Additional Context

Add any other context, notes, screenshots, or links that might be helpful for completing this task.

These are where the captions are in the app interface: