Support "Add new instrument name"; Initialize "Upload image";

.github/workflows/frontend_format.yml

@@ -5,6 +5,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Install Prettier
+        run: npm install prettier@3.1.0
       - name: Run Prettier
         run: npx prettier --check "**/*.css" "**/*.js" --trailing-comma es5
       - name: Install djlint

.pre-commit-config.yaml

@@ -5,10 +5,10 @@ repos:
       - id: black
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.3.2
+    rev: v3.1.0
     hooks:
       - id: prettier
-        additional_dependencies: ["prettier@2.3.2"]
+        additional_dependencies: ["prettier@3.1.0"]
         files: "\\.(js|jsx|ts|tsx|css|scss|less|json|yaml|yml|md)$"
 
   - repo: https://github.com/djlint/djLint

web-app/django/VIM/apps/instruments/management/commands/download_imgs.py

@@ -16,7 +16,7 @@ class Command(BaseCommand):
     OUTPUT_DIR = os.path.join(
         settings.STATIC_ROOT, "instruments", "images", "instrument_imgs"
     )
-    CSV_PATH = "startup_data/all_instruments_16aug_2024.csv"
+    CSV_PATH = "startup_data/all_instruments_11oct_2024.csv"
 
     help = "Download images and create thumbnails for instruments"
 

web-app/django/VIM/apps/instruments/management/commands/import_instruments.py

@@ -15,7 +15,7 @@ class Command(BaseCommand):
 
     NOTE: For now, this script only imports instrument names in English and French. It
     also only imports a set of previously-curated instruments that have images available.
-    This list of instruments is stored in startup_data/vim_instruments_with_images-15sept.csv
+    This list of instruments is stored in startup_data/all_instruments_with_16aug_2024.csv
     """
 
     help = "Imports instrument objects"
@@ -48,6 +48,20 @@ def parse_instrument_data(
         ins_names: dict[str, str] = {
             value["language"]: value["value"] for key, value in ins_labels.items()
         }
+
+        # Get available instrument descriptions
+        ins_descriptions: dict = instrument_data["descriptions"]
+        ins_descs: dict[str, str] = {
+            value["language"]: value["value"] for key, value in ins_descriptions.items()
+        }
+
+        # Get available instrument aliases
+        ins_aliases: dict = instrument_data["aliases"]
+        ins_alias: dict[str, list[str]] = {
+            key: [value["value"] for value in values]
+            for key, values in ins_aliases.items()
+        }
+
         # Get Hornbostel-Sachs and MIMO classifications, if available
         ins_hbs: Optional[list[dict]] = instrument_data["claims"].get("P1762")
         ins_mimo: Optional[list[dict]] = instrument_data["claims"].get("P3763")
@@ -62,6 +76,8 @@ def parse_instrument_data(
         parsed_data: dict[str, str | dict[str, str]] = {
             "wikidata_id": instrument_id,
             "ins_names": ins_names,
+            "ins_descs": ins_descs,
+            "ins_alias": ins_alias,
             "hornbostel_sachs_class": hbs_class,
             "mimo_class": mimo_class,
         }
@@ -80,7 +96,7 @@ def get_instrument_data(self, instrument_ids: list[str]) -> list[dict]:
         ins_ids_str: str = "|".join(instrument_ids)
         url = (
             "https://www.wikidata.org/w/api.php?action=wbgetentities&"
-            f"ids={ins_ids_str}&format=json&props=labels|descriptions|"
+            f"ids={ins_ids_str}&format=json&props=labels|descriptions|aliases|"
             "claims&languages=en|fr"
         )
         response = requests.get(url, timeout=10)
@@ -104,14 +120,28 @@ def create_database_objects(
         thumbnail_img_path [str]: Path to the thumbnail of the instrument image
         """
         ins_names = instrument_attrs.pop("ins_names")
+        ins_descs = instrument_attrs.pop("ins_descs")
+        ins_alias = instrument_attrs.pop("ins_alias")
         instrument = Instrument.objects.create(**instrument_attrs)
         for lang, name in ins_names.items():
+            description = ins_descs.get(lang, "")
+            # Create InstrumentName object for "name" in "lang" with "description"
             InstrumentName.objects.create(
                 instrument=instrument,
                 language=self.language_map[lang],
+                description=description,
                 name=name,
                 source_name="Wikidata",
             )
+            alias = ins_alias.get(lang, [])
+            # Create InstrumentName object for "alias" in language "lang"
+            for alias_name in alias:
+                InstrumentName.objects.create(
+                    instrument=instrument,
+                    language=self.language_map[lang],
+                    name=alias_name,
+                    source_name="Wikidata",
+                )
         img_obj = AVResource.objects.create(
             instrument=instrument,
             type="image",
@@ -130,7 +160,7 @@ def create_database_objects(
 
     def handle(self, *args, **options) -> None:
         with open(
-            "startup_data/all_instruments_16aug_2024.csv",
+            "startup_data/all_instruments_11oct_2024.csv",
             encoding="utf-8-sig",
         ) as csvfile:
             reader = csv.DictReader(csvfile)

web-app/django/VIM/apps/instruments/migrations/0006_instrumentname_description.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2024-10-21 15:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("instruments", "0005_remove_language_wikidata_id"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="instrumentname",
+            name="description",
+            field=models.CharField(
+                blank=True, help_text="Description of the instrument name"
+            ),
+        ),
+    ]

web-app/django/VIM/apps/instruments/models/instrument_name.py

@@ -8,3 +8,6 @@ class InstrumentName(models.Model):
     source_name = models.CharField(
         max_length=50, blank=False, help_text="Who or what called the instrument this?"
     )  # Stand-in for source data; format TBD
+    description = models.CharField(
+        blank=True, help_text="Description of the instrument name"
+    )  # Stand-in for description

web-app/django/VIM/apps/instruments/static/instruments/css/index.css

@@ -91,6 +91,83 @@ hr {
   background-color: #faf1e4;
 }
 
+.instrument-img-container:hover .instrument-img {
+  opacity: 0.3;
+}
+
+.instrument-img {
+  opacity: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  transition: 0.5s ease;
+  backface-visibility: hidden;
+}
+
+.instrument-img-container:hover .middle-button-group {
+  opacity: 1;
+}
+
+.middle-button-group {
+  transition: 0.5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  width: max-content;
+}
+
+.middle-button-group .btn {
+  background-color: #435334;
+  border: 1px solid #435334;
+  color: white;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.middle-button-group .btn:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+  color: white;
+}
+
+.modal-btn {
+  background-color: #435334;
+  border: 1px solid #435334;
+}
+
+.modal-btn:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+}
+
+#instrumentNameInModal {
+  font-weight: bold;
+  color: #435334;
+}
+
+#previewImages {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#previewImages .col-3 {
+  margin-bottom: 15px;
+}
+
+#previewImages img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+}
+
 .card-title {
   color: #435334;
 }