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

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,11 +120,17 @@ 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, "")
+            alias = ins_alias.get(lang, [])
             InstrumentName.objects.create(
                 instrument=instrument,
                 language=self.language_map[lang],
+                description=description,
+                alias=", ".join(alias),
                 name=name,
                 source_name="Wikidata",
             )

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

@@ -0,0 +1,26 @@
+# Generated by Django 4.2.5 on 2024-10-04 15:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("instruments", "0005_remove_language_wikidata_id"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="instrumentname",
+            name="alias",
+            field=models.CharField(
+                blank=True, help_text="Alternative name for the instrument"
+            ),
+        ),
+        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,9 @@ 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
+    alias = models.CharField(
+        blank=True, help_text="Alternative name for the instrument"
+    )  # Stand-in for alias

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;
 }