Merge pull request #808 from ICRAR/eagle-1305

EAGLE-1305: Save collapsed/expanded state of builtin palettes to localStorage
ICRAR · Dec 16, 2024 · 7a9c88f · 7a9c88f
2 parents 16587ca + fdbd187
commit 7a9c88f
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 77 deletions.
diff --git a/docs/settings.rst b/docs/settings.rst
@@ -50,8 +50,6 @@ User Options
 
 **Confirm Reload Palettes** - Prompt user to confirm when loading a palette that is already loaded.
 
-**Open Default Palette on Startup** - Open a default palette on startup. The palette contains an example of all known node categories.
-
 **Confirm Delete** - Prompt user to confirm when deleting node(s) or edge(s) from a graph.
 
 **Disable JSON Validation** - Allow EAGLE to load/save/send-to-translator graphs and palettes that would normally fail validation against schema.

diff --git a/e2e/creatingASimpleGraph.spec.ts b/e2e/creatingASimpleGraph.spec.ts
@@ -17,8 +17,13 @@ test('Creating a Simple Graph', async ({ page }) => {
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'OK' }).click()
 
+  //expand the 'Builtin Components' palette
+  await page.locator('#palette0').click();
+  await page.waitForTimeout(250);
+
   //add a helloworld app to the graph by clicking it's icon
   await page.locator('#addPaletteNodeHelloWorldApp').click();
+
   //agree to create a new graph with it's auto-generated name
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'OK' }).click();

diff --git a/e2e/creatingAndEditingPalettes.spec.ts b/e2e/creatingAndEditingPalettes.spec.ts
@@ -18,6 +18,10 @@ test('Creating and editing Palettes', async ({ page }) => {
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'OK' }).click()
 
+  //expand the 'Builtin Components' palette
+  await page.locator('#palette0').click();
+  await page.waitForTimeout(250);
+
   //right click the hello world app in the palette
   await page.locator('#palette_0_CopyApp').click({
     button: 'right'

diff --git a/e2e/parameterTableAndKeyboardShortcuts.spec.ts b/e2e/parameterTableAndKeyboardShortcuts.spec.ts
@@ -18,6 +18,10 @@ test('Parameter Tables and keyboard Shortcuts', async ({ page }) => {
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'OK' }).click()
 
+  //expand the 'Builtin Components' palette
+  await page.locator('#palette0').click();
+  await page.waitForTimeout(250);
+
   //add a helloworld app to the graph by clicking it's icon
   await page.locator('#addPaletteNodeHelloWorldApp').click();
   //agree to create a new graph with it's auto-generated name

diff --git a/src/Eagle.ts b/src/Eagle.ts
@@ -1480,7 +1480,7 @@ export class Eagle {
                 break;
             case Repository.Service.Url:
                 this.loadPalettes([
-                    {name:palette.fileInfo().name, filename:palette.fileInfo().downloadUrl, readonly:palette.fileInfo().readonly}
+                    {name:palette.fileInfo().name, filename:palette.fileInfo().downloadUrl, readonly:palette.fileInfo().readonly, expanded: true}
                 ], (errorsWarnings: Errors.ErrorsWarnings, palettes: Palette[]):void => {
                     for (const palette of palettes){
                         if (palette !== null){
@@ -1901,9 +1901,17 @@ export class Eagle {
     }
 
     loadDefaultPalettes = () : void => {
+        // get collapsed/expanded state of palettes from html locaStorage
+        let templatePaletteExpanded: boolean = Setting.findValue(Setting.OPEN_TEMPLATE_PALETTE);
+        let builtinPaletteExpanded: boolean = Setting.findValue(Setting.OPEN_BUILTIN_PALETTE);
+        templatePaletteExpanded = templatePaletteExpanded === null ? false : templatePaletteExpanded;
+        builtinPaletteExpanded = builtinPaletteExpanded === null ? false : builtinPaletteExpanded;
+
+
+        // fetch the palettes
         this.loadPalettes([
-            {name:Palette.BUILTIN_PALETTE_NAME, filename:Daliuge.PALETTE_URL, readonly:true},
-            {name:Palette.DYNAMIC_PALETTE_NAME, filename:Daliuge.TEMPLATE_URL, readonly:true}
+            {name:Palette.BUILTIN_PALETTE_NAME, filename:Daliuge.PALETTE_URL, readonly:true, expanded: builtinPaletteExpanded},
+            {name:Palette.TEMPLATE_PALETTE_NAME, filename:Daliuge.TEMPLATE_URL, readonly:true, expanded: templatePaletteExpanded}
         ], (errorsWarnings: Errors.ErrorsWarnings, palettes: Palette[]):void => {
             const showErrors: boolean = Setting.findValue(Setting.SHOW_FILE_LOADING_ERRORS);
 
@@ -1925,7 +1933,7 @@ export class Eagle {
         });
     }
 
-    loadPalettes = (paletteList: {name:string, filename:string, readonly:boolean}[], callback: (errorsWarnings: Errors.ErrorsWarnings, data: Palette[]) => void ) : void => {
+    loadPalettes = (paletteList: {name:string, filename:string, readonly:boolean, expanded: boolean}[], callback: (errorsWarnings: Errors.ErrorsWarnings, data: Palette[]) => void ) : void => {
         const results: Palette[] = [];
         const complete: boolean[] = [];
         const errorsWarnings: Errors.ErrorsWarnings = {"errors":[], "warnings":[]};
@@ -2273,6 +2281,9 @@ export class Eagle {
         const errorsWarnings: Errors.ErrorsWarnings = {"errors":[], "warnings":[]};
         const newPalette = Palette.fromOJSJson(data, file, errorsWarnings);
 
+        // all new (or reloaded) palettes should have 'expanded' flag set to true
+        newPalette.expanded(true);
+
         // add to list of palettes
         this.palettes.unshift(newPalette);
 
@@ -2375,42 +2386,6 @@ export class Eagle {
         Utils.showNotification("Success", "Confirmation message pop ups re-enabled", "success");
     }
 
-    // toggles the default palettes on or off
-    // if currently shown, just remove them from the palettes list
-    // if currently not shown, fetch them from the remove source and add to palettes list
-    toggleDefaultPalettes = () : void => {
-        const allowGraphEditing: boolean = Setting.find(Setting.ALLOW_GRAPH_EDITING).value() as boolean;
-        const allowPaletteEditing: boolean = Setting.find(Setting.ALLOW_PALETTE_EDITING).value() as boolean;
-        const openDefaultPalette: boolean = Setting.find(Setting.OPEN_DEFAULT_PALETTE).value() as boolean;
-
-        // if:
-        // - user is loading palettes
-        // - allow palette editing is off
-        // - allow graph editing is off
-        // then the palettes tab is invisible anyway, and the user will not see the palettes loaded, so notify them of this corner case
-        if (openDefaultPalette && !allowGraphEditing && !allowPaletteEditing){
-            Utils.showNotification("Palettes Disabled", "Palettes are not visible in the current UI mode", "warning");
-        }
-
-        const eagle: Eagle = Eagle.getInstance();
-
-        const builtinPalette: Palette = this.findPalette(Palette.BUILTIN_PALETTE_NAME, false);
-        const dynamicPalette: Palette = this.findPalette(Palette.DYNAMIC_PALETTE_NAME, false);
-
-        // always close the palettes
-        if (builtinPalette !== null){
-            eagle.closePalette(builtinPalette);
-        }
-        if (dynamicPalette !== null){
-            eagle.closePalette(dynamicPalette);
-        }
-
-        // reload them if applicable
-        if (openDefaultPalette){
-            eagle.loadDefaultPalettes();
-        }
-    }
-
     // TODO: shares some code with saveFileToLocal(), we should try to factor out the common stuff at some stage
     savePaletteToDisk = (palette : Palette) : void => {
         console.log("savePaletteToDisk()", palette.fileInfo().name, palette.fileInfo().type);
@@ -3768,8 +3743,8 @@ export class Eagle {
     private buildWritablePaletteNamesList = () : string[] => {
         const paletteNames : string[] = [];
         for (const palette of this.palettes()){
-            // skip the dynamically generated palette that contains all nodes
-            if (palette.fileInfo().name === Palette.DYNAMIC_PALETTE_NAME){
+            // skip the template palette that contains all nodes
+            if (palette.fileInfo().name === Palette.TEMPLATE_PALETTE_NAME){
                 continue;
             }
             // skip the built-in palette
@@ -4788,21 +4763,6 @@ $( document ).ready(function() {
         RightClick.closeCustomContextMenu(true);
     });
 
-    $(".tableParameter").on("click", function(){
-        console.log(this)
-    })
-
-    //expand palettes when using searchbar and return to prior collapsed state on completion.
-    $("#paletteList .componentSearchBar").on("keyup",function(){
-        if ($("#paletteList .componentSearchBar").val() !== ""){
-            $("#paletteList .accordion-button.collapsed").addClass("wasCollapsed")
-            $("#paletteList .accordion-button.collapsed").trigger("click")
-        }else{
-            $("#paletteList .accordion-button.wasCollapsed").trigger("click")
-            $("#paletteList .accordion-button.wasCollapsed").removeClass("wasCollapsed")
-        }
-    })
-
     $(document).on('click', '.hierarchyEdgeExtra', function(event: JQuery.TriggeredEvent){
         const e: MouseEvent = event.originalEvent as MouseEvent;
         const eagle: Eagle = Eagle.getInstance();

diff --git a/src/Palette.ts b/src/Palette.ts
@@ -33,14 +33,17 @@ import { FileInfo } from './FileInfo';
 import { Node } from './Node';
 import { Repository } from "./Repository";
 import { RepositoryFile } from './RepositoryFile';
+import { Setting } from "./Setting";
 import { Utils } from './Utils';
+import { UiModeSystem } from "./UiModes";
 
 export class Palette {
     fileInfo : ko.Observable<FileInfo>;
     private nodes : ko.ObservableArray<Node>;
     private searchExclude : ko.Observable<boolean>;
+    expanded: ko.Observable<boolean>;
 
-    public static readonly DYNAMIC_PALETTE_NAME: string = "Component Templates";
+    public static readonly TEMPLATE_PALETTE_NAME: string = "Component Templates";
     public static readonly BUILTIN_PALETTE_NAME: string = "Builtin Components";
 
     constructor(){
@@ -50,6 +53,7 @@ export class Palette {
         this.fileInfo().builtIn = false;
         this.nodes = ko.observableArray([]);
         this.searchExclude = ko.observable(false);
+        this.expanded = ko.observable(false);
     }
 
     static fromOJSJson(data : string, file : RepositoryFile, errorsWarnings : Errors.ErrorsWarnings) : Palette {
@@ -288,4 +292,22 @@ export class Palette {
         // notification
         Utils.showNotification("Palette URL", "Copied to clipboard", "success");
     }
+
+    toggle = (palette: Palette, event: Event): void => {
+        // get collapse/expand state of the accordion
+        const expanded: boolean = (<any>event.currentTarget).ariaExpanded === 'true';
+
+        // set internal variable in the palette
+        this.expanded(expanded);
+
+        // if this palette one of the built-in ones, then save the state to localStorage
+        if (this.fileInfo().name === Palette.BUILTIN_PALETTE_NAME){
+            Setting.setValue(Setting.OPEN_BUILTIN_PALETTE, expanded);
+            UiModeSystem.saveToLocalStorage();
+        }
+        if (this.fileInfo().name === Palette.TEMPLATE_PALETTE_NAME){
+            Setting.setValue(Setting.OPEN_TEMPLATE_PALETTE, expanded);
+            UiModeSystem.saveToLocalStorage();
+        }
+    }
 }
diff --git a/src/Setting.ts b/src/Setting.ts
@@ -2,6 +2,7 @@ import * as ko from "knockout";
 
 import { Eagle } from './Eagle';
 import { Errors } from './Errors';
+import { Palette } from "./Palette";
 import { Repository } from "./Repository";
 import { UiModeSystem } from './UiModes';
 import { Utils } from './Utils';
@@ -272,6 +273,9 @@ export class Setting {
     static readonly BOTTOM_WINDOW_MODE : string = "BottomWindowMode";
     static readonly OBJECT_INSPECTOR_COLLAPSED_STATE : string = "ObjectInspectorVisibility";
     static readonly GRAPH_INSPECTOR_COLLAPSED_STATE : string = "GraphInspectorVisibility";
+
+    static readonly OPEN_BUILTIN_PALETTE: string = "OpenBuiltinPalette";
+    static readonly OPEN_TEMPLATE_PALETTE: string = "OpenTemplatePalette";
 
     static readonly ACTION_CONFIRMATIONS : string = "ActionConfirmations";
     static readonly CONFIRM_DISCARD_CHANGES : string = "ConfirmDiscardChanges";
@@ -307,7 +311,6 @@ export class Setting {
 
     static readonly TRANSLATE_WITH_NEW_CATEGORIES: string = "TranslateWithNewCategories"; // temp fix for incompatibility with the DaLiuGE translator
 
-    static readonly OPEN_DEFAULT_PALETTE: string = "OpenDefaultPalette";
     static readonly CREATE_APPLICATIONS_FOR_CONSTRUCT_PORTS: string = "CreateApplicationsForConstructPorts";
     static readonly DISABLE_JSON_VALIDATION: string = "DisableJsonValidation";
 
@@ -374,7 +377,8 @@ const settings : SettingsGroup[] = [
             new Setting(false, "Confirm Reload Palettes", Setting.CONFIRM_RELOAD_PALETTES, "Prompt user to confirm when loading a palette that is already loaded.",false , Setting.Type.Boolean,true,true,true,true,true),
             new Setting(false, "Confirm Delete Files", Setting.CONFIRM_DELETE_FILES, "Prompt user to confirm when deleting files from a repository.", false, Setting.Type.Boolean, true,true,true,true,true),
             new Setting(false, "Confirm Delete Objects", Setting.CONFIRM_DELETE_OBJECTS, "Prompt user to confirm when deleting node(s) or edge(s) from a graph.",false , Setting.Type.Boolean, true,true,true,true,true),
-            new Setting(true, "Open Default Palette on Startup", Setting.OPEN_DEFAULT_PALETTE, "Open a default palette on startup. The palette contains an example of all known node categories", false, Setting.Type.Boolean, false,false,true,true,true, [], function(){Eagle.getInstance().toggleDefaultPalettes();}),
+            new Setting(false, "Open " + Palette.BUILTIN_PALETTE_NAME + " Palette on Startup", Setting.OPEN_BUILTIN_PALETTE, "Open the '" + Palette.BUILTIN_PALETTE_NAME + "' palette on startup.", true, Setting.Type.Boolean, false, false, false, false, false),
+            new Setting(false, "Open " + Palette.TEMPLATE_PALETTE_NAME + " Palette on Startup", Setting.OPEN_TEMPLATE_PALETTE, "Open the '" + Palette.TEMPLATE_PALETTE_NAME + "' palette on startup.", true, Setting.Type.Boolean, false, false, false, false, false),
             new Setting(true, "Disable JSON Validation", Setting.DISABLE_JSON_VALIDATION, "Allow EAGLE to load/save/send-to-translator graphs and palettes that would normally fail validation against schema.", false, Setting.Type.Boolean, false,false,false,false,false),
             new Setting(true, "Overwrite Existing Translator Tab", Setting.OVERWRITE_TRANSLATION_TAB, "When translating a graph, overwrite an existing translator tab", false, Setting.Type.Boolean, true,true,true,true,true),
         ]

diff --git a/src/Utils.ts b/src/Utils.ts
@@ -761,14 +761,16 @@ export class Utils {
         $('#issuesDisplay').modal("hide");
     }
 
-    static preparePalette(palette: Palette, paletteListItem: {name:string, filename:string, readonly:boolean}) : void {
+    static preparePalette(palette: Palette, paletteListItem: {name:string, filename:string, readonly:boolean, expanded: boolean}) : void {
         palette.fileInfo().clear();
         palette.fileInfo().name = paletteListItem.name;
         palette.fileInfo().readonly = paletteListItem.readonly;
         palette.fileInfo().builtIn = true;
         palette.fileInfo().downloadUrl = paletteListItem.filename;
         palette.fileInfo().type = Eagle.FileType.Palette;
         palette.fileInfo().repositoryService = Repository.Service.Url;
+
+        palette.expanded(paletteListItem.expanded);
     }
 
     static showPalettesModal(eagle: Eagle) : void {

diff --git a/src/main.ts b/src/main.ts
@@ -93,6 +93,7 @@ $(function(){
     (<any>window).UiModeSystem = UiModeSystem;
     (<any>window).Utils = Utils;
     (<any>window).KeyboardShortcut = KeyboardShortcut;
+
     (<any>window).StatusEntry = StatusEntry;
     (<any>window).QuickActions = QuickActions;
     (<any>window).Modals = Modals;
@@ -127,9 +128,7 @@ $(function(){
     }
 
     // load the default palette
-    if (Setting.findValue(Setting.OPEN_DEFAULT_PALETTE)){
-        eagle.loadDefaultPalettes();
-    }
+    eagle.loadDefaultPalettes();
 
     // set other state based on settings values
     if (Setting.findValue(Setting.SNAP_TO_GRID)){
@@ -207,18 +206,12 @@ $(function(){
         $("textarea").trigger("blur");
     });
 
-    $(".tableParameter").on("click", function(){
-        console.log(this)
-    })
-
     //expand palettes when using searchbar and return to prior collapsed state on completion.
     $("#paletteList .componentSearchBar").on("keyup",function(){
         if ($("#paletteList .componentSearchBar").val() !== ""){
-            $("#paletteList .accordion-button.collapsed").addClass("wasCollapsed")
-            $("#paletteList .accordion-button.collapsed").trigger("click")
-        }else{
-            $("#paletteList .accordion-button.wasCollapsed").trigger("click")
-            $("#paletteList .accordion-button.wasCollapsed").removeClass("wasCollapsed")
+            for (const palette of Eagle.getInstance().palettes()){
+                palette.expanded(true);
+            }
         }
     })
 
@@ -237,6 +230,7 @@ $(function(){
         }
     })
 
+    // TODO: replace this with a data-bind=click in the element html
     $(".hierarchy").on("click", function(){
         Eagle.getInstance().selectedObjects([]);
     })

diff --git a/templates/palettes.html b/templates/palettes.html
@@ -70,12 +70,12 @@
                                 <!-- /ko -->
                             </div>
                         </div>
-                        <div class="accordion-button rightClick_paletteHeader" type="button" data-bs-toggle="collapse" aria-expanded="true" data-bind="eagleRightClick: {data:$data,type:'rightClick_paletteHeader'}, attr:{id:'palette' + $index(), 'data-bs-target':'#collapse' + $index(), 'aria-controls':'collapse' + $index()}">
+                        <div class="accordion-button rightClick_paletteHeader" type="button" data-bs-toggle="collapse" data-bind="click: toggle, eagleRightClick: {data:$data,type:'rightClick_paletteHeader'}, attr:{id:'palette' + $index(), 'data-bs-target':'#collapse' + $index(), 'aria-controls':'collapse' + $index(), 'aria-expanded':expanded}, css: {collapsed: !expanded}">
                             <span>&nbsp;</span>
                             <h5 class="template-title" data-bs-placement="right" data-bind="text: fileInfo().nameAndModifiedIndicator(), eagleTooltip: fileInfo().getSummaryHTML(fileInfo().nameAndModifiedIndicator())"></h5>
                         </div>
                     </div>
-                    <div class="collapse show accordion-collapse" aria-labelledby="headingOne" data-bind="attr:{id:'collapse' + $index()}">
+                    <div class="collapse accordion-collapse" aria-labelledby="headingOne" data-bind="attr:{id:'collapse' + $index()}, css:{show: expanded}">
                         <div class="accordion-body">
                             {% include 'palette.html' %}
                         </div>