From a57eb8a8cbbe51443133aea314a0e9b78ddaba17 Mon Sep 17 00:00:00 2001
From: PouyaMohseni <pouyamohseniii@gmail.com>
Date: Sun, 5 Apr 2026 14:57:54 -0400
Subject: [PATCH] fix: prevent the  source from overflow

- increase the lenght of the source to 255 (max in CharField)
- truncate source when displayed
- add charecter count

ref #455
---
 .../0014_alter_instrument_source_and_more.py  | 29 ++++++++++++++++++
 .../VIM/apps/instruments/models/instrument.py |  2 +-
 .../instruments/models/instrument_name.py     |  2 +-
 .../instruments/views/create_instrument.py    |  6 ++--
 .../VIM/templates/instruments/create.html     |  8 +++--
 .../VIM/templates/instruments/detail.html     |  4 +--
 .../helpers/CreateInstrumentManager.ts        | 30 +++++++++++++++++--
 .../helpers/CreateInstrumentValidator.ts      | 18 +++++++++--
 .../src/instruments/helpers/NameRowManager.ts | 28 +++++++++++++++--
 .../src/instruments/helpers/NameValidator.ts  | 12 ++++++--
 10 files changed, 121 insertions(+), 18 deletions(-)
 create mode 100644 web-app/django/VIM/apps/instruments/migrations/0014_alter_instrument_source_and_more.py

diff --git a/web-app/django/VIM/apps/instruments/migrations/0014_alter_instrument_source_and_more.py b/web-app/django/VIM/apps/instruments/migrations/0014_alter_instrument_source_and_more.py
new file mode 100644
index 00000000..78d5781e
--- /dev/null
+++ b/web-app/django/VIM/apps/instruments/migrations/0014_alter_instrument_source_and_more.py
@@ -0,0 +1,29 @@
+# Generated by Django 4.2.5 on 2026-04-05 18:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("instruments", "0013_alter_avresource_format_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="instrument",
+            name="source",
+            field=models.CharField(
+                blank=True,
+                help_text="Source/reference for this instrument entry",
+                max_length=255,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="instrumentname",
+            name="source_name",
+            field=models.CharField(
+                help_text="Who or what called the instrument this?", max_length=255
+            ),
+        ),
+    ]
diff --git a/web-app/django/VIM/apps/instruments/models/instrument.py b/web-app/django/VIM/apps/instruments/models/instrument.py
index 7c8e432f..377895df 100644
--- a/web-app/django/VIM/apps/instruments/models/instrument.py
+++ b/web-app/django/VIM/apps/instruments/models/instrument.py
@@ -45,7 +45,7 @@ class Instrument(models.Model):
         help_text="User who created this instrument (null for Wikidata imports)",
     )
     source = models.CharField(
-        max_length=200,
+        max_length=255,
         blank=True,
         help_text="Source/reference for this instrument entry",
     )
diff --git a/web-app/django/VIM/apps/instruments/models/instrument_name.py b/web-app/django/VIM/apps/instruments/models/instrument_name.py
index b31af750..cef40451 100644
--- a/web-app/django/VIM/apps/instruments/models/instrument_name.py
+++ b/web-app/django/VIM/apps/instruments/models/instrument_name.py
@@ -6,7 +6,7 @@ class InstrumentName(models.Model):
     language = models.ForeignKey("Language", on_delete=models.PROTECT)
     name = models.CharField(max_length=100, blank=False)
     source_name = models.CharField(
-        max_length=50, blank=False, help_text="Who or what called the instrument this?"
+        max_length=255, blank=False, help_text="Who or what called the instrument this?"
     )  # Stand-in for source data; format TBD
     verification_status = models.CharField(
         max_length=50,
diff --git a/web-app/django/VIM/apps/instruments/views/create_instrument.py b/web-app/django/VIM/apps/instruments/views/create_instrument.py
index d53be56a..f1813501 100644
--- a/web-app/django/VIM/apps/instruments/views/create_instrument.py
+++ b/web-app/django/VIM/apps/instruments/views/create_instrument.py
@@ -110,11 +110,11 @@ def create_instrument(request: HttpRequest) -> JsonResponse:
             )
 
         # Validate instrument source length
-        if len(instrument_source) > 200:
+        if len(instrument_source) > 255:
             raise ValidationException(
                 ErrorCode.FIELD_TOO_LONG,
-                "Instrument source must be 200 characters or less",
-                details={"field": "instrument_source", "max_length": 200},
+                "Instrument source must be 255 characters or less",
+                details={"field": "instrument_source", "max_length": 255},
             )
 
         if not validate_hbs_classification(hbs_class):
diff --git a/web-app/django/VIM/templates/instruments/create.html b/web-app/django/VIM/templates/instruments/create.html
index e070ae3b..a90fa8fc 100644
--- a/web-app/django/VIM/templates/instruments/create.html
+++ b/web-app/django/VIM/templates/instruments/create.html
@@ -38,12 +38,16 @@ <h5>Instrument Information</h5>
                          id="instrumentSource"
                          name="instrument_source"
                          placeholder="Enter instrument source"
+                         maxlength="255"
                          required />
                   <div class="form-text">
                     The primary source or reference for this instrument's existence.
                   </div>
-                  <div class="valid-feedback"></div>
-                  <div class="invalid-feedback"></div>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div class="valid-feedback"></div>
+                    <div class="invalid-feedback"></div>
+                    <small class="text-muted ms-auto"><span id="instrumentSourceCounter">0</span> / 255</small>
+                  </div>
                 </div>
                 <div class="col-md-6">
                   <label for="hornbostelSachsClass" class="form-label">
diff --git a/web-app/django/VIM/templates/instruments/detail.html b/web-app/django/VIM/templates/instruments/detail.html
index e2e77c03..d500454d 100644
--- a/web-app/django/VIM/templates/instruments/detail.html
+++ b/web-app/django/VIM/templates/instruments/detail.html
@@ -149,7 +149,7 @@ <h2 class="notranslate mb-0">{{ active_instrument_label.name }}</h2>
                           </td>
                           <td>
                             <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container">
-                              <span class="view-field flex-grow-1">{{ names.label.source_name }}</span>
+                              <span class="view-field flex-grow-1">{{ names.label.source_name|truncatechars:40 }}</span>
                             </div>
                           </td>
                           {% if user.is_authenticated %}
@@ -221,7 +221,7 @@ <h2 class="notranslate mb-0">{{ active_instrument_label.name }}</h2>
                       <!-- Source -->
                       <div class="mb-1">
                         <div class="fw-bold text-muted small">Source</div>
-                        <span class="view-field">{{ names.label.source_name }}</span>
+                        <span class="view-field">{{ names.label.source_name|truncatechars:40 }}</span>
                       </div>
                       {% if user.is_authenticated %}
                         <!-- Status column -->
diff --git a/web-app/frontend/src/instruments/helpers/CreateInstrumentManager.ts b/web-app/frontend/src/instruments/helpers/CreateInstrumentManager.ts
index 5b1e51e7..a71a4724 100644
--- a/web-app/frontend/src/instruments/helpers/CreateInstrumentManager.ts
+++ b/web-app/frontend/src/instruments/helpers/CreateInstrumentManager.ts
@@ -24,10 +24,11 @@ export class CreateInstrumentManager {
   }
 
   /**
-   * Initializes the form with one required row
+   * Initializes the form with one required row and sets up the source counter
    */
   initializeForm(): void {
     this.nameRowManager.resetRows(true);
+    this.setupInstrumentSourceCounter();
   }
 
   /**
@@ -53,6 +54,28 @@ export class CreateInstrumentManager {
     }
   }
 
+  /**
+   * Sets up the live character counter for the Instrument Source input field.
+   */
+  setupInstrumentSourceCounter(): void {
+    const sourceInput = document.getElementById(
+      'instrumentSource',
+    ) as HTMLInputElement;
+    const counterSpan = document.getElementById('instrumentSourceCounter');
+    if (!sourceInput || !counterSpan) return;
+
+    const updateCounter = () => {
+      const length = sourceInput.value.length;
+      counterSpan.textContent = length.toString();
+    };
+
+    // Listen to input events and update counter immediately
+    sourceInput.addEventListener('input', updateCounter);
+
+    // Initialize counter on page load in case of prefilled value
+    updateCounter();
+  }
+
   /**
    * Toggles image source field visibility based on image selection
    */
@@ -437,7 +460,7 @@ export class CreateInstrumentManager {
   }
 
   /**
-   * Sets up form submission handling
+   * Sets up form submission handling and instrument source counter
    */
   setupFormSubmission(): void {
     const form = document.getElementById('createInstrumentForm');
@@ -454,5 +477,8 @@ export class CreateInstrumentManager {
         this.submitInstrument();
       });
     }
+
+    // Ensure the instrument source counter is set up on form activation as well
+    this.setupInstrumentSourceCounter();
   }
 }
diff --git a/web-app/frontend/src/instruments/helpers/CreateInstrumentValidator.ts b/web-app/frontend/src/instruments/helpers/CreateInstrumentValidator.ts
index 6534562b..2015d9ce 100644
--- a/web-app/frontend/src/instruments/helpers/CreateInstrumentValidator.ts
+++ b/web-app/frontend/src/instruments/helpers/CreateInstrumentValidator.ts
@@ -160,7 +160,7 @@ export class CreateInstrumentValidator {
   }
 
   /**
-   * Validates source field
+   * Validates source field (must be filled and under 255 characters)
    */
   validateSource(source: string): ValidationResult {
     if (!source || source.trim() === '') {
@@ -170,7 +170,13 @@ export class CreateInstrumentValidator {
         type: 'error',
       };
     }
-
+    if (source.trim().length > 255) {
+      return {
+        isValid: false,
+        message: 'Source must be 255 characters or less.',
+        type: 'error',
+      };
+    }
     return {
       isValid: true,
       message: '',
@@ -385,6 +391,7 @@ export class CreateInstrumentValidator {
             });
           }
 
+          // Validate source required and under 255 chars for each entry
           if (!entry.source?.trim()) {
             isValid = false;
             errors.set(`source${rowIndex}`, {
@@ -392,6 +399,13 @@ export class CreateInstrumentValidator {
               message: 'Source is required for this entry',
               type: 'error',
             });
+          } else if (entry.source.trim().length > 255) {
+            isValid = false;
+            errors.set(`source${rowIndex}`, {
+              isValid: false,
+              message: 'Source must be 255 characters or less.',
+              type: 'error',
+            });
           }
         }
       }
diff --git a/web-app/frontend/src/instruments/helpers/NameRowManager.ts b/web-app/frontend/src/instruments/helpers/NameRowManager.ts
index 1d5a8bc1..64849682 100644
--- a/web-app/frontend/src/instruments/helpers/NameRowManager.ts
+++ b/web-app/frontend/src/instruments/helpers/NameRowManager.ts
@@ -53,6 +53,9 @@ export class NameRowManager {
     const requiredAttr = config.isRequired ? 'required' : '';
     const deleteButtonStyle = config.isRequired ? 'visibility: hidden;' : '';
 
+    // Max length for source input (as enforced by validation logic)
+    const maxSourceLen = 255;
+
     row.innerHTML = `
       <div class="col-md-3 col-12 language-input mb-2 mb-md-0">
         <label for="language${index}" class="form-label">Language ${requiredMark}</label>
@@ -74,9 +77,12 @@ export class NameRowManager {
       <div class="col-md-3 col-12 source-input mb-2 mb-md-0">
         <label for="source${index}" class="form-label">Source ${requiredMark}</label>
         <input type="text" class="form-control" id="source${index}"
-               name="source[]" placeholder="Enter source" ${requiredAttr} />
-        <div class="valid-feedback"></div>
-        <div class="invalid-feedback"></div>
+               name="source[]" placeholder="Enter source" maxlength="${maxSourceLen}" ${requiredAttr} />
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="valid-feedback"></div>
+          <div class="invalid-feedback"></div>
+          <small class="text-muted ms-auto"><span id="source${index}Counter">0</span> / ${maxSourceLen}</small>
+        </div>
       </div>
       <div class="col-md-2 col-12 mb-2 mb-md-0 align-self-end d-flex justify-content-center">
         <button type="button" class="btn btn-outline-danger remove-row-btn w-50" title="Remove this row" style="${deleteButtonStyle}">
@@ -113,6 +119,22 @@ export class NameRowManager {
       }
     });
 
+    // Add character counter functionality to the source input
+    const sourceInput = row.querySelector(
+      `#source${index}`,
+    ) as HTMLInputElement;
+    const sourceCounter = row.querySelector(
+      `#source${index}Counter`,
+    ) as HTMLElement;
+
+    if (sourceInput && sourceCounter) {
+      // Set initial count
+      sourceCounter.textContent = String(sourceInput.value.length);
+      sourceInput.addEventListener('input', () => {
+        sourceCounter.textContent = String(sourceInput.value.length);
+      });
+    }
+
     return row;
   }
 
diff --git a/web-app/frontend/src/instruments/helpers/NameValidator.ts b/web-app/frontend/src/instruments/helpers/NameValidator.ts
index 88e9e6d1..817418e8 100644
--- a/web-app/frontend/src/instruments/helpers/NameValidator.ts
+++ b/web-app/frontend/src/instruments/helpers/NameValidator.ts
@@ -88,16 +88,24 @@ export class NameValidator {
   }
 
   /**
-   * Validates that the source field is not empty
+   * Validates that the source field is not empty and under 255 characters
    */
   validateSource(sourceInput: string): ValidationResult {
-    if (sourceInput.trim() === '') {
+    const trimmed = sourceInput.trim();
+    if (trimmed === '') {
       return {
         isValid: false,
         message: 'Please enter the source of this name.',
         type: 'error',
       };
     }
+    if (trimmed.length > 255) {
+      return {
+        isValid: false,
+        message: 'Source must be 255 characters or less.',
+        type: 'error',
+      };
+    }
 
     return {
       isValid: true,