Merge branch 'master' into eagle-1305

src/ComponentUpdater.ts

@@ -11,7 +11,6 @@ export class ComponentUpdater {
 
         // check if any nodes to update
         if (graph.getNodes().length === 0){
-            // TODO: don't showNotification here! instead add a warning to the errorsWarnings and callback()
             errorsWarnings.errors.push(Errors.Message("Graph contains no components to update"));
             callback(errorsWarnings, updatedNodes);
             return;

src/Eagle.ts

@@ -382,7 +382,15 @@ export class Eagle {
             return "";
         }
 
-        return fileInfo.getText();
+        return fileInfo.getHtml();
+    }, this);
+
+    activeConfigHtml : ko.PureComputed<string> = ko.pureComputed(() => {
+        if (this.logicalGraph().getActiveGraphConfig() === null){
+            return "";
+        }
+
+        return  "<strong>Config:</strong> " +this.logicalGraph().getActiveGraphConfig().getName()
     }, this);
 
     toggleWindows = () : void  => {
@@ -1240,9 +1248,6 @@ export class Eagle {
         // show errors (if found)
         this._handleLoadingErrors(errorsWarnings, Utils.getFileNameFromFullPath(fileFullPath), Repository.Service.File);
 
-        // sort the palette
-        p.sort();
-
         // add new palette to the START of the palettes array
         this.palettes.unshift(p);
 
@@ -2239,7 +2244,6 @@ export class Eagle {
             // display error if one occurred
             if (error != null){
                 Utils.showNotification("Error deleting file", error, "danger");
-                console.error(error);
                 return;
             }
 
@@ -2280,9 +2284,6 @@ export class Eagle {
         // all new (or reloaded) palettes should have 'expanded' flag set to true
         newPalette.expanded(true);
 
-        // sort items in palette
-        newPalette.sort();
-
         // add to list of palettes
         this.palettes.unshift(newPalette);
 
@@ -2341,6 +2342,23 @@ export class Eagle {
         this.resetEditor()
     }
 
+    sortPalette = (palette: Palette): void => {
+        // close the palette menu
+        this.closePaletteMenus();
+
+        const preSortCopy = palette.getNodes().slice();
+
+        palette.sort();
+
+        // check whether anything changed order, if so, mark as modified
+        for (let i = 0; i < palette.getNodes().length; i++) {
+            if (palette.getNodes()[i].getId() !== preSortCopy[i].getId()) {
+                palette.fileInfo().modified = true;
+                break;
+            }
+        }
+    }
+
     getParentNameAndId = (parentId: NodeId) : string => {
         if(parentId === null){
             return ""
@@ -3232,7 +3250,6 @@ export class Eagle {
 
                 // mark the palette as modified
                 destinationPalette.fileInfo().modified = true;
-                destinationPalette.sort();
             }
         });
     }
@@ -3283,14 +3300,12 @@ export class Eagle {
 
         // if no objects selected, warn user
         if (data.length === 0){
-            console.warn("Unable to delete selection: Nothing selected");
             Utils.showNotification("Warning", "Unable to delete selection: Nothing selected", "warning");
             return;
         }
 
         // if in "hide data nodes" mode, then recommend the user delete edges in "show data nodes" mode instead
         if (!this.showDataNodes()){
-            console.warn("Unable to delete selection: Editor is in 'hide data nodes' mode, and the current selection may be ambiguous. Please use 'show data nodes' mode before deleting.");
             Utils.showNotification("Warning", "Unable to delete selection: Editor is in 'hide data nodes' mode, and the current selection may be ambiguous. Please use 'show data nodes' mode before deleting.", "warning");
             return;
         }
@@ -4111,7 +4126,6 @@ export class Eagle {
             // add to destination palette
             destinationPalette.addNode(sourceComponent, true);
             destinationPalette.fileInfo().modified = true;
-            destinationPalette.sort();
         }
     }
 

src/Field.ts

@@ -255,7 +255,6 @@ export class Field {
     removeOption = (index:number) : void => {
         if(this.options().length <= 1){
             Utils.showNotification("Cannot Remove","There must be at least one option in the select!",'danger');
-
             return
         }
 

src/FileInfo.ts

@@ -380,6 +380,18 @@ export class FileInfo {
         }
     }
 
+    getHtml = () : string => {
+        if (this.repositoryName !== ""){
+            if (this.path === ""){
+                return "<strong>" + this.repositoryService + "</strong>: " + this.repositoryName + " (" + this.repositoryBranch + "): " + this.name;
+            } else {
+                return "<strong>" + this.repositoryService + "</strong>: " + this.repositoryName + " (" + this.repositoryBranch + "): " + this.path + "/" + this.name;
+            }
+        } else {
+            return this.name;
+        }
+    }
+
     toString = () : string => {
         let s = "";
 

src/GraphRenderer.ts

@@ -1091,12 +1091,20 @@ export class GraphRenderer {
     static mouseMove(eagle: Eagle, event: JQuery.TriggeredEvent) : void {
         const e: MouseEvent = event.originalEvent as MouseEvent;
         GraphRenderer.ctrlDrag = event.ctrlKey;
+
+        //ive found that using the event.movementX and Y mouse tracking we were using, is not accurate when browser level zoom is applied. so i am calculating the movement per tick myself
+        //this is done by comparing the current position, with the position recorded by the previous tick of this function
+        let moveDistance = {x:0,y:0}
+        if(GraphRenderer.dragCurrentPosition){
+            moveDistance = {x:e.pageX - GraphRenderer.dragCurrentPosition?.x, y: e.pageY - GraphRenderer.dragCurrentPosition?.y}
+        }
+
         GraphRenderer.dragCurrentPosition = {x:e.pageX,y:e.pageY}
 
         if (eagle.isDragging()){
             if (eagle.draggingNode() !== null && !GraphRenderer.isDraggingSelectionRegion ){
                 //check and note if the mouse has moved
-                GraphRenderer.simpleSelect = GraphRenderer.dragStartPosition.x - e.movementX < 5 && GraphRenderer.dragStartPosition.y - e.movementY < 5
+                GraphRenderer.simpleSelect = GraphRenderer.dragStartPosition.x - moveDistance.x < 5 && GraphRenderer.dragStartPosition.y - moveDistance.y < 5
 
                 //creating an array that contains all of the outermost nodes in the selected array
                 const outermostNodes : Node[] = eagle.getOutermostSelectedNodes()
@@ -1108,7 +1116,7 @@ export class GraphRenderer {
                 if(!GraphRenderer.simpleSelect){
                     eagle.selectedObjects().forEach(function(obj){
                         if(obj instanceof Node){
-                            obj.changePosition(e.movementX/eagle.globalScale(), e.movementY/eagle.globalScale());
+                            obj.changePosition(moveDistance.x/eagle.globalScale(), moveDistance.y/eagle.globalScale());
                         }
                     })
                 }
@@ -1125,8 +1133,8 @@ export class GraphRenderer {
                 GraphRenderer.drawSelectionRectangle()
             }else{
                 // move background
-                eagle.globalOffsetX(eagle.globalOffsetX() + e.movementX/eagle.globalScale());
-                eagle.globalOffsetY(eagle.globalOffsetY() + e.movementY/eagle.globalScale());
+                eagle.globalOffsetX(eagle.globalOffsetX() + moveDistance.x/eagle.globalScale());
+                eagle.globalOffsetY(eagle.globalOffsetY() + moveDistance.y/eagle.globalScale());
             }
         }
 

src/ParameterTable.ts

@@ -425,9 +425,7 @@ export class ParameterTable {
 
         // check that we can actually find the node that this field belongs to
         if (node === null){
-            const message = "Could not find node containing this field";
-            console.warn(message);
-            Utils.showNotification("Warning", message, "warning");
+            Utils.showNotification("Warning", "Could not find node containing this field", "warning");
             return;
         }
 

src/Setting.ts

@@ -285,6 +285,7 @@ export class Setting {
     static readonly CONFIRM_DELETE_FILES : string = "ConfirmDeleteFiles";
     static readonly CONFIRM_DELETE_OBJECTS : string = "ConfirmDeleteObjects";
 
+    static readonly SHOW_DEVELOPER_NOTIFICATIONS: string = "ShowDeveloperNotifications";
     static readonly SHOW_FILE_LOADING_ERRORS : string = "ShowFileLoadingErrors";
 
     static readonly ALLOW_INVALID_EDGES : string = "AllowInvalidEdges";
@@ -440,6 +441,7 @@ const settings : SettingsGroup[] = [
         "Developer",
         () => {return false;},
         [
+            new Setting(true, "Show Developer Notifications", Setting.SHOW_DEVELOPER_NOTIFICATIONS, "EAGLE generates a number of messages intended to alert developers to unusual occurrences or issues. Enabling this setting displays those messages.", false, Setting.Type.Boolean, false, false, false, false, false),
             new Setting(true, "Show File Loading Warnings", Setting.SHOW_FILE_LOADING_ERRORS, "Display list of issues with files encountered during loading.", false, Setting.Type.Boolean, false, false, false, false, false),
             new Setting(true, "Open Translator In Current Tab", Setting.OPEN_TRANSLATOR_IN_CURRENT_TAB, "When translating a graph, display the output of the translator in the current tab", false, Setting.Type.Boolean, false, false, false, false, false),
             new Setting(true, "Create Applications for Construct Ports", Setting.CREATE_APPLICATIONS_FOR_CONSTRUCT_PORTS, "When loading old graph files with ports on construct nodes, move the port to an embedded application", false, Setting.Type.Boolean, true, true, true, true, true),

src/Undo.ts

@@ -110,7 +110,6 @@ export class Undo {
 
     prevSnapshot = (eagle: Eagle) : void => {
         if (this.rear() === this.current()){
-            console.log("Undo.prevSnapshot() : no previous snapshot, abort!");
             Utils.showNotification("Unable to Undo", "No further history available", "warning");
             return;
         }
@@ -136,7 +135,6 @@ export class Undo {
 
     nextSnapshot = (eagle: Eagle) : void => {
         if (this.front() === this.current()){
-            console.log("Undo.nextSnapshot() : no next snapshot, abort!");
             Utils.showNotification("Unable to Redo", "No further history available", "warning");
             return;
         }

src/Utils.ts

@@ -467,7 +467,29 @@ export class Utils {
         $('#issuesDisplay').modal("show");
     }
 
-    static showNotification(title : string, message : string, type : "success" | "info" | "warning" | "danger") : void {
+    /**
+     * Show a temporary notification message to the user at the bottom of the graph display area
+     * @param title The title of the notification
+     * @param message The body of the notification
+     * @param type The type of the notification. This changes the color of the notification
+     * @param developer If true, this notification is intended for developers-only. Regular users are unlikely to be able to do anything useful with the information. Users enable/disable display of developer-only notifications via a setting on the Developer tab of the Settings modal.
+     */
+    static showNotification(title : string, message : string, type : "success" | "info" | "warning" | "danger", developer: boolean = false) : void {
+        // display in console
+        switch(type){
+            case "danger":
+                console.error(title, message);
+                break;
+            case "warning":
+                console.warn(title, message);
+                break;
+        }
+
+        // if this is a message intended for developers, check whether display of those messages is enabled
+        if (developer && !Setting.findValue(Setting.SHOW_DEVELOPER_NOTIFICATIONS)){
+            return;
+        }
+
         $.notify({
             title:title + ":",
             message:message
@@ -749,9 +771,6 @@ export class Utils {
         palette.fileInfo().repositoryService = Repository.Service.Url;
 
         palette.expanded(paletteListItem.expanded);
-
-        // sort palette and add to results
-        palette.sort();
     }
 
     static showPalettesModal(eagle: Eagle) : void {
@@ -1547,9 +1566,7 @@ export class Utils {
         const jsonObject = JSON.parse(jsonString);
         const validatorResult : {valid: boolean, errors: string} = Utils._validateJSON(jsonObject, Daliuge.SchemaVersion.OJS, fileType);
         if (!validatorResult.valid){
-            const message = "JSON Output failed validation against internal JSON schema, saving anyway";
-            console.error(message, validatorResult.errors);
-            Utils.showNotification("Error",  message + "<br/>" + validatorResult.errors, "danger");
+            Utils.showNotification("Error",  "JSON Output failed validation against internal JSON schema, saving anyway" + "<br/>" + validatorResult.errors, "danger", true);
         }
     }
 

static/base.css

@@ -2057,6 +2057,10 @@ ul.nav.navbar-nav .dropdown-item:hover{
     transform: translateY(-50%);
 }
 
+#activeConfig{
+    margin-left:5px;
+}
+
 .navbar-light .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.55);
 }

static/tables.css

@@ -178,6 +178,7 @@ td:first-child input {
 
 #graphConfigurationsTableWrapper thead{
     top: 0px;
+    border-top: 1px white solid;
 }
 
 .eagleTableWrapper th{

templates/inspector.html

@@ -271,17 +271,18 @@ <h4>Graph Info</h4>
                     <div class="headerButtons inspectorHeaderButtons" id="objectInspectorHeaderIconRow">
                         <div class="row">
                             <div class="col col-6">
-                                <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().fullPath()" data-bs-toggle="tooltip" data-html="true">link</i>
-                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().shortDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">sticky_note_2</i>
-                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().detailedDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">menu_book</i>
-                            </div>
-                            <div class="col-6 col text-right">
                                 <!-- ko if: $root.logicalGraph().fileInfo().repositoryService === Repository.Service.File -->
-                                    <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: 'This is a Local Graph File'" data-bs-toggle="tooltip" data-html="true">folder_open</i>
+                                <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: 'This is a Local Graph File'" data-bs-toggle="tooltip" data-html="true">folder_open</i>
                                 <!-- /ko -->
                                 <!-- ko if: $root.logicalGraph().fileInfo().repositoryService === Repository.Service.GitHub || $root.logicalGraph().fileInfo().repositoryService === Repository.Service.GitLab -->
                                     <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: 'This is a Graph File from GitHub or GitLab'" data-bs-toggle="tooltip" data-html="true">account_tree</i>
                                 <!-- /ko -->
+                                <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().fullPath()" data-bs-toggle="tooltip" data-html="true">link</i>
+                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().shortDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">sticky_note_2</i>
+                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().detailedDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">menu_book</i>
+                            </div>
+                            <div class="col-6 col text-right">
+                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: 'View graph configurations table', click: GraphConfigurationsTable.openTable" data-bs-toggle="tooltip" data-html="true">dns</i>
                             </div>
                         </div>
                     </div>
@@ -310,6 +311,22 @@ <h5>Modified Author: </h5>
                                 <span data-bind="text:$root.logicalGraph().fileInfo().lastModifiedName, eagleTooltip:$root.logicalGraph().fileInfo().lastModifiedName"></span>
                             </div>
                         </div>
+                        <div class="row inspectorEdgeSrcNodeId contentObject">
+                            <div class="col-6 col contentObjectTitle">
+                                <h5>Active Config: </h5>
+                            </div>  
+                            <div class="col-6 col contentObjectValue">
+                                <span data-bind="text:$root.logicalGraph().getActiveGraphConfig()?.getName(), eagleTooltip:$root.logicalGraph().getActiveGraphConfig()?.getDescription()"></span>
+                            </div>
+                        </div>
+                        <div class="row inspectorEdgeSrcNodeId contentObject">
+                            <div class="col-6 col contentObjectTitle">
+                                <h5>Config Fields: </h5>
+                            </div>  
+                            <div class="col-6 col contentObjectValue">
+                                <span data-bind="text:$root.logicalGraph().getActiveGraphConfig()?.numFields(), eagleTooltip:'Number of fields overwritten by the active config.'"></span>
+                            </div>
+                        </div>
                     </div>
                 </div>  
             <!-- /ko -->

templates/navbar.html

@@ -226,6 +226,7 @@
     </div>
 </nav>
 <div id="graphNameWrapper" data-bind="style: { 'visibility':eagle.getEagleIsReady()}">
-    <span id="filename" data-bind="text: repositoryFileName"></span>
+    <span id="filename" data-bind="html: repositoryFileName"></span>
+    <span id="activeConfig" data-bind="html: activeConfigHtml, eagleTooltip:'Name of the active graph configuration'"></span>
     <span id="fileIsModified" class="material-icons md-18" data-bind="visible: eagle.logicalGraph().fileInfo().modified">draw</span>
 </div>