Ftr/dynamic annotation classification

CITATION.cff

@@ -37,12 +37,12 @@ identifiers:
     value: 10.5281/zenodo.17977921
     description: Edirom Online Frontend
 repository-code: https://github.com/Edirom/Edirom-Online-Frontend
-commit: 65d6487474bb360ba17c6c645cd4e2c2f73bb516
+commit: b265b241e4fe202ba5189c909390e95aba795b2c
 abstract: >-
   Edirom Online Frontend is the frontend for the Edirom 
   Online which is used for the presentation and
   analysis of critical musical editions in a digital format,
   particularly in the fields of musicology and philology.
 license: GPL-3.0
 version: v1.2.0
-date-released: 2026-01-19
+date-released: 2026-02-05

app/controller/window/AnnotationView.js

@@ -28,7 +28,9 @@ Ext.define('EdiromOnline.controller.window.AnnotationView', {
         this.control({
             'annotationView': {
                 afterlayout : this.onAfterLayout,
-                showAnnotation: this.onShowAnnotation
+                showAnnotation: this.onShowAnnotation,
+                loadAnnotations: this.onLoadAnnotations,
+                loadParticipantSingleContent: this.onLoadParticipantSingleContent
             },
             'annotationView  button[action=openAll]': {
                 click: this.onOpenAllParticipants
@@ -51,15 +53,10 @@ Ext.define('EdiromOnline.controller.window.AnnotationView', {
 
     onShowAnnotation: function(view, uri) {
 
-        var editionId = this.application.activeEdition;
-        var lang = getPreference('application_language');
-
         window.doAJAXRequest('data/xql/getAnnotationText.xql',
             'GET', 
             {
-                uri: uri,
-                lang: lang,
-                edition: EdiromOnline.getApplication().activeEdition
+                uri: uri
             },
             Ext.bind(function(response){
                 view.setContent(response.responseText);
@@ -69,9 +66,7 @@ Ext.define('EdiromOnline.controller.window.AnnotationView', {
         window.doAJAXRequest('data/xql/getAnnotationMeta.xql',
             'GET', 
             {
-                uri: uri,
-                lang: lang,
-                edition: EdiromOnline.getApplication().activeEdition
+                uri: uri
             },
 
             Ext.bind(function(response){
@@ -82,9 +77,7 @@ Ext.define('EdiromOnline.controller.window.AnnotationView', {
         window.doAJAXRequest('data/xql/getAnnotationPreviews.xql',
             'GET', 
             {
-                uri: uri,
-                lang: lang,
-                edition: EdiromOnline.getApplication().activeEdition
+                uri: uri
             },
             Ext.bind(function(response){
                 var data = Ext.JSON.decode(response.responseText);
@@ -140,5 +133,228 @@ Ext.define('EdiromOnline.controller.window.AnnotationView', {
         });
 
         btn.windows = null;
+    },
+
+    onLoadAnnotations: function(view) {
+        this.loadAnnotationsAndCreateComponents(view);
+    },
+
+    onLoadParticipantSingleContent: function(view) {
+        this.loadParticipantSingleContent(view);
+    },
+
+    loadAnnotationsAndCreateComponents: function(view) {
+        var me = this;
+
+        // Show loading mask while loading data
+        view.setLoading('Loading annotations...');
+
+        window.doAJAXRequest(
+            'data/xql/getAnnotations.xql',
+            'GET',
+            {
+                uri: view.uri
+            },
+            Ext.bind(function(response) {
+                var data = Ext.JSON.decode(response.responseText);
+
+                // Store the loaded data
+                view.data = data;
+                view.annotations = data.annotations;
+                view.annotationsLoaded = true;
+
+                if(typeof(debug) !== 'undefined' && debug !== null && debug) {
+                    console.log('view: AnnotationView: ajax callback');
+                    console.log(view);
+                    console.log(data);
+                    console.log(data.annotations);
+                    console.log(data.emptyFields);
+                }
+
+                // Now create the list and store that depend on the loaded data
+                me.createListAndStore(view, data.annotations, me.getStoreFieldsDefinition(view), data.emptyFields);
+
+                // Add the list to the card layout at index 0
+                view.insert(0, view.list);
+
+                // Set the list as the active item initially
+                view.getLayout().setActiveItem(view.list);
+
+                // Hide loading mask
+                view.setLoading(false);
+
+                // Fire the event to notify that annotations are loaded
+                view.fireEvent('annotationsLoaded', view, view.uri, data);
+
+                console.log('Annotations loaded and components created');
+                console.log(view);
+            }, me),
+            Ext.bind(function(response) {
+                // Error handling
+                view.setLoading(false);
+                Ext.Msg.alert('Error', 'Failed to load annotations');
+            }, me)
+        );
+    },
+
+    createStore: function(view) {
+        var me = this;
+
+        view.listStore = Ext.create('Ext.data.Store', {
+            //model: 'EdiromOnline.model.Annotation',
+            fields: me.getStoreFieldsDefinition(view),
+            proxy: {
+                reader: {
+                    type: 'json',
+                    useSimpleAccessors: false
+                }
+            },
+            autoLoad: false
+        });
+
+        view.listStore.getProxy().extraParams = {
+            uri: view.uri,
+            lang: getPreference('application_language'),
+            edition: EdiromOnline.getApplication().activeEdition
+        };
+
+        return view.listStore;
+    },
+
+    createListAndStore: function(view, annotations, storeFields, emptyFields) {
+        var me = this;
+
+        if(typeof(debug) !== 'undefined' && debug !== null && debug) {
+            console.log('view: AnnotationView: createListAndStore');
+            console.log(view.annotations);
+            console.log(storeFields);
+            console.log(emptyFields);
+        }
+
+        // Create list Store
+        view.listStore = Ext.create('Ext.data.Store', {
+            fields: storeFields,
+            autoLoad: false,
+            data: annotations
+        });
+
+        // Create the annotation list
+        view.list = Ext.create('Ext.grid.Panel', {
+            store: view.listStore,
+            title: getLangString('view.window.AnnotationView_Title'),
+            bodyBorder: false,
+            border: '0 0 0 0',
+            cls: 'annotationList',
+            features: [{
+                ftype: 'filters',
+                encode: false,
+                local: true,
+                filters: []
+            }],
+            columns: view.getColumns(storeFields, emptyFields)
+        });
+
+        // Add event listener for double click
+        view.list.on('itemdblclick', view.onItemDblClicked, view);
+
+        if(typeof(debug) !== 'undefined' && debug !== null && debug) {
+            console.log('view: AnnotationView: createList final');
+            console.log(view.list);
+        }
+    },
+
+    getStoreFieldsDefinition: function(view) {
+        var me = this;
+
+        if(typeof(debug) !== 'undefined' && debug !== null && debug) {
+            console.log('view: AnnotationView: getStoreFieldsDefinition:');
+            console.log(view);
+            console.log(view.data);
+            console.log(view.annotations);
+        }
+
+        // initialise fields variable, setting default fields
+        var fields = [
+            'id',
+            'sigla',
+            // create an integer field with the name pos for sorting in document-order
+            {
+                name: 'pos',
+                type: 'int'
+            }//,
+            //{name: "bazga.annotation", mapping: 'properties["bazga.annotation"]'}
+        ];
+
+        // Only proceed if data is loaded
+        if (!view.data || !view.data.fields) {
+            return fields; // Return default fields if data not loaded yet
+        }
+
+        // create fields config
+        // get the existing field names from the above fields array
+        var existingFieldNames = fields.map(field =>
+            typeof field === 'string' ? field : field.name
+        );
+
+        // Iterate over data.fields and add missing ones to fields variable
+        view.data.fields.forEach(fieldName => {
+            if (!existingFieldNames.includes(fieldName)) {
+                    var fieldDef = {
+                        name: fieldName,
+                        mapping: me.createFieldMapping(fieldName)
+                    };
+                    fields.push(fieldDef);
+            }
+        });
+
+        if(typeof(debug) !== 'undefined' && debug !== null && debug) {
+            console.log('view: AnnotationView: getStoreFieldsDefinition: return fields');
+            console.log(fields);
+        }
+
+        return fields;
+    },
+
+    createFieldMapping: function(fieldName) {
+        // Handle fields with dots by using a custom mapping function
+        // ExtJS interprets dots as nested object access, so we need bracket notation
+        if (fieldName.includes('.')) {
+            return function(data) {
+                return data[fieldName];
+            };
+        }
+        return fieldName;
+    },
+
+    loadStore: function(view) {
+        var me = this;
+        if(view.listStore) {
+            view.listStore.load();
+        }
+    },
+
+    loadParticipantSingleContent: function(view) {
+        var me = this;
+
+        var contEl = view.el.getById(view.id + '_annotationParticipantsSingle');
+        var previewTxtData = contEl.query('input.previewTxtData');
+
+        if (previewTxtData.length == 0) return;
+
+        var txtData = previewTxtData[0].value;
+        var uri = txtData.match(/uri:(.*)__\$\$__/)[1];
+        var id = txtData.match(/__\$\$__participantId:(.*)/)[1];
+
+        window.doAJAXRequest('data/xql/getReducedDocument.xql?uri=' + uri + '&selectionId=' + id + '&subtreeRoot=div&idPrefix=' + view.id + '_',
+            'GET',
+            {},
+            Ext.bind(function(response){
+                var contEl = view.el.getById(view.id + '_annotationParticipantsSingle');
+                var txtBox = new Ext.Element(contEl.query('div.txtBox')[0]);
+                txtBox.update(response.responseText);
+
+                contEl.query('#' + view.id + '_' + id)[0].scrollIntoView(txtBox);
+            }, me)
+        );
     }
 });