Merge branch 'f-lazy-edit-mode-dropdowns' into 'dev'

F lazy edit mode dropdowns

See merge request !141

CHANGELOG.md

@@ -8,8 +8,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added ###
 
+* `BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING` build variable that
+  determines whether reference dropdowns in the edit mode are filled
+  automatically or only after manually clicking on "edit this
+  property". Default is `ENABLED`, i.e., don't load the dropdown
+  automatically.
+* `caosdb-v-property-not-yet-lazy-loaded` class for reference
+  properties in the edit mode, the reference dropdown menu of which
+  hasn't been initialized yet.
+
 ### Changed ###
 
+* [#262](https://gitlab.com/linkahead/linkahead-webui/-/issues/262)
+  Reference dropdowns in the edit mode don't load automatically by
+  default anymore but have to be initialized manually and per property
+  by default. Set `BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING=DISABLED` to
+  restore the previous behavior.
+
 ### Deprecated ###
 
 ### Removed ###

build.properties.d/00_default.properties

@@ -158,6 +158,12 @@ BUILD_MODULE_EXT_TRIGGER_CRAWLER_FORM_TOOLBOX="Tools"
 ##############################################################################
 BUILD_MAX_EDIT_MODE_DROPDOWN_OPTIONS=-1
 
+##############################################################################
+# Toggle lazy-loading of reference dropdowns. ENABLED is especially
+# recommended in case of instances with a lot of entities.
+##############################################################################
+BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING=ENABLED
+
 ##############################################################################
 # Build a dist file containing all JS code from the files in the
 # MODULE_DEPENDENCIES array.

src/core/js/fileupload.js

@@ -261,18 +261,29 @@ var fileupload = new function() {
     }
 
     this.init = function() {
-        // add global listener for start_edit event
-        document.body.addEventListener(edit_mode.start_edit.type, function(e) {
-            $(e.target).find(".caosdb-properties .caosdb-f-entity-property").each(function(idx) {
-                fileupload.create_upload_app(this);
-            });
-        }, true);
-
-        // add global listener for property_added event
-        document.body.addEventListener(edit_mode.property_added.type, function(e) {
-            fileupload.create_upload_app(e.target);
-        }, true);
+        if ("${BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING}" == "ENABLED") {
+            // If we have to manually enable editting of reference
+            // properties, we only want to add the file-upload button
+            // **after** we started editing the particular
+            // property. So no global event listener and not
+            // immediatly after adding a new reference property.
+            document.body.addEventListener(edit_mode.property_edit_reference_value.type, function(e) {
+                fileupload.create_upload_app(e.target);
+            }, true);
+        } else {
+            // add global listener for start_edit event
+            document.body.addEventListener(edit_mode.start_edit.type, function(e) {
+                $(e.target).find(".caosdb-properties .caosdb-f-entity-property").each(function(idx) {
+                    fileupload.create_upload_app(this);
+                });
+            }, true);
+
+            // add global listener for property_added event
+            document.body.addEventListener(edit_mode.property_added.type, function(e) {
+                fileupload.create_upload_app(e.target);
+            }, true);
 
+        }
 
         // add global listener for data_type_changed event
         document.body.addEventListener(edit_mode.property_data_type_changed.type, function(e) {
@@ -296,7 +307,7 @@ var fileupload = new function() {
     this.create_upload_app = function(target) {
         const non_file_datatypes = ["TEXT", "DOUBLE", "BOOLEAN", "INTEGER", "DATETIME"];
         var par = getPropertyDatatype(target);
-        var atom_par = par && par.startsWith("LIST<") && par.endsWith(">") ? par.substring(5, par.length-1) : par;
+        var atom_par = par && par.startsWith("LIST<") && par.endsWith(">") ? par.substring(5, par.length - 1) : par;
 
         if (non_file_datatypes.indexOf(atom_par) !== -1) {
             return;
@@ -338,7 +349,7 @@ var fileupload = new function() {
      */
     this.get_default_path = function() {
         var by = "unauthenticated/";
-        if(isAuthenticated()) {
+        if (isAuthenticated()) {
             by = getUserRealm() + "/" + getUserName() + "/";
         }
         return "/uploaded.by/" + by + fileupload.uuidv4() + "/";

src/doc/tutorials/edit_mode.rst

@@ -75,6 +75,26 @@ to the corresponding area at the bottom of the Record. Properties and
 parents can be removed from the entity by clicking on the trash-can
 symbol. Note that a Record must always have at least one parent.
 
+From LinkAhead WebUI version 0.15, the default behavior for changing
+the values of reference properties has changed in that the dropdown
+menus to select possible values are not filled automatically for
+`performance reasons
+<https://gitlab.com/linkahead/linkahead-webui/-/issues/262>`_. Instead,
+you have to click on the pencil symbol to the right of the property
+you want to edit:
+
+.. image:: edit-lazy-load-dropdown.png
+   :width: 720
+   :alt: Clicking on the pencil symbol enables the editing of the
+         reference property.
+
+.. note::
+
+   The behavior of version 0.14.x and before, i.e., enable and load
+   all reference dropdowns immediatly after starting to edit the
+   entity, can be restored by starting LinkAhead with the
+   ``BUILD_EDIT_MODE_LAZY_DROPDOWN_LOADING = DISABLED`` option.
+
 When many Entities are valid candidates for a reference property not all
 might be available in the drop down element. In those cases, the drop down
 warns, that only a subset is shown and a new button with a pencil symbol is