Various minor fixes to spelling etc

e2e/addingAndRemovingRepositories.spec.ts

@@ -12,9 +12,9 @@ test('Adding and Removing Repositories', async ({ page }) => {
   const REPO_BRANCH = "yan-812-2";
   const repoHTMLId = '#'+REPO_NAME.replace('/', '_') + "_" + REPO_BRANCH;
 
-  //making sure the repo doesnt exist for some reason, if it does, remove it
+  //making sure the repo doesn't exist for some reason, if it does, remove it
   if(await page.locator('#ICRAR_daliuge_yan-812-2').count() === 1){
-    await page.locator('.repoConatiner').filter({has:page.locator(repoHTMLId)}).getByText('eject').click()
+    await page.locator('.repoContainer').filter({has:page.locator(repoHTMLId)}).getByText('eject').click()
   }
 
   //click the add repository button

src/Eagle.ts

@@ -1901,7 +1901,7 @@ export class Eagle {
     }
 
     loadDefaultPalettes = () : void => {
-        // get collapsed/expanded state of palettes from html locaStorage
+        // get collapsed/expanded state of palettes from html local storage
         let templatePaletteExpanded: boolean = Setting.findValue(Setting.OPEN_TEMPLATE_PALETTE);
         let builtinPaletteExpanded: boolean = Setting.findValue(Setting.OPEN_BUILTIN_PALETTE);
         templatePaletteExpanded = templatePaletteExpanded === null ? false : templatePaletteExpanded;
@@ -2107,12 +2107,6 @@ export class Eagle {
     }
 
     _postLoadGraph = (file: RepositoryFile) : void => {
-        // set the active graph config (to the last graph config in the LG)
-        const graphConfigs: GraphConfig[] = this.logicalGraph().getGraphConfigs();
-
-        // if there is at least one graph config, make the last one active
-        // if there are no graph configs, make a new empty graph config and set active
-
         //needed when centering after init of a graph. we need to wait for all the constructs to finish resizing themselves
         setTimeout(function(){
             Eagle.getInstance().centerGraph()
@@ -2588,13 +2582,13 @@ export class Eagle {
     saveGraphScreenshot = async () : Promise<void> =>  {
         const eagle = Eagle.getInstance()
 
-        const mediaDevices = navigator.mediaDevices as any; //workaround to prevent a Typescript issue with giving getDisplayMedia funciton an option
+        const mediaDevices = navigator.mediaDevices as any; //workaround to prevent a Typescript issue with giving getDisplayMedia function an option
         const stream:MediaStream = await mediaDevices.getDisplayMedia({preferCurrentTab: true,selfBrowserSurface: 'include'});
 
         //prepare the graph for a screenshot
         eagle.centerGraph()
         eagle.setSelection(null,Eagle.FileType.Graph)
-        document.querySelector('body').style.cursor = 'none';//temporarily disabling the cursor so it doesnt appear in the screenshot
+        document.querySelector('body').style.cursor = 'none';//temporarily disabling the cursor so it doesn't appear in the screenshot
 
         try {        
             const width = stream.getVideoTracks()[0].getSettings().width
@@ -2616,8 +2610,8 @@ export class Eagle {
 
                 //cropping the ui, so the screenshot only includes the graph
                 const ctx = canvas.getContext('2d');
-                const realwidth = window.innerWidth
-                const divisor = realwidth/width
+                const realWidth = window.innerWidth
+                const divisor = realWidth/width
 
                 const lx = (eagle.leftWindow().size()+50)/divisor
                 const rx = (eagle.rightWindow().size()+50)/divisor
@@ -4279,7 +4273,7 @@ export class Eagle {
             let minX = Setting.findValue(Setting.LEFT_WINDOW_VISIBLE) ? this.leftWindow().size()+MARGIN: 0+MARGIN;
             let maxX = Setting.findValue(Setting.RIGHT_WINDOW_VISIBLE) ? $('#logicalGraphParent').width() - this.rightWindow().size() - MARGIN : $('#logicalGraphParent').width() - MARGIN;
             let minY = 0 + navBarHeight + MARGIN;
-            //using jquery here to get the bottom window height because it is internally saved in VH (percentage screen height). Doing it this way means we dont have to convert it to pixels
+            //using jquery here to get the bottom window height because it is internally saved in VH (percentage screen height). Doing it this way means we don't have to convert it to pixels
             let maxY = $('#logicalGraphParent').height() - $('#bottomWindow').height() - MARGIN + navBarHeight;
             if(increaseSearchArea){
                 minX = minX - 300

src/tutorials/graphConfigs.ts

@@ -1,7 +1,6 @@
 import { Eagle } from '../Eagle';
 import { RightClick } from '../RightClick';
-import { Tutorial, TutorialStep, TutorialSystem } from '../Tutorial';
-import { SideWindow } from '../SideWindow';
+import { TutorialStep, TutorialSystem } from '../Tutorial';
 import { Setting } from '../Setting';
 
 const newTut = TutorialSystem.newTutorial('Graph Configurations', 'An introduction to using graph configurations.')

src/tutorials/quickStart.ts

@@ -13,12 +13,12 @@ newTut.newTutStep("Right Panel", "Multipurpose panel with several tabs offering
 newTut.newTutStep("User Interface Element Tooltips", "Much of Eagle's interface is using icons. You can always hover over the icons and most of the other elements to get more information on what they do.", function(){return $("#navbarSupportedContent .btn-group")})
     .setBackPreFunction(function (eagle) {eagle.closeShortcuts()})
 
-newTut.newTutStep("Keyboard Shortcuts", "Many of the major functions are available through keyboard shurtcuts and you can find the mapping here. To access this modal, find it in the navbar under 'Help' or simply press 'K'.", function(){return $("#shortcutsModal")})
+newTut.newTutStep("Keyboard Shortcuts", "Many of the major functions are available through keyboard shortcuts and you can find the mapping here. To access this modal, find it in the navbar under 'Help' or simply press 'K'.", function(){return $("#shortcutsModal")})
     .setWaitType(TutorialStep.Wait.Modal)
     .setBackPreFunction(function(eagle){eagle.openShortcuts()})
     .setPreFunction(function(eagle){eagle.openShortcuts()})
 
-newTut.newTutStep("Click To Open Settings", "The settings modal allows to cusomize EAGLE's user experience. By default, EAGLE is simplified by hiding a lot of functionality via the UI modes. To find out more check our <a target='_blank' href='https://eagle-dlg.readthedocs.io/en/master/settings.html#settings'>settings documentation</a>. <em>To continue the tutorial please click the highlighted settings icon button!</em>", function(){return $("#settings")})
+newTut.newTutStep("Click To Open Settings", "The settings modal allows to customize EAGLE's user experience. By default, EAGLE is simplified by hiding a lot of functionality via the UI modes. To find out more check our <a target='_blank' href='https://eagle-dlg.readthedocs.io/en/master/settings.html#settings'>settings documentation</a>. <em>To continue the tutorial please click the highlighted settings icon button!</em>", function(){return $("#settings")})
     .setType(TutorialStep.Type.Press)
     .setPreFunction(function(eagle){eagle.closeShortcuts();})
     .setBackPreFunction(function(eagle){eagle.closeSettings();})

static/base.css

@@ -1198,7 +1198,7 @@ select.form-control{
     width:100%;
 }
 
-.paletteTrippleDot{
+.paletteTripleDot{
     position: absolute;
     right: 35px;
     margin-top: 10px;
@@ -1224,7 +1224,7 @@ select.form-control{
     pointer-events: auto;
 }
 
-.paletteTrippleDot:after{
+.paletteTripleDot:after{
     display: none;
 }
 
@@ -1670,7 +1670,7 @@ select.form-control{
     width: auto;
 }
 
-.repoConatiner{
+.repoContainer{
     padding:0px 10px;
 }
 

static/components/repository.html

@@ -1,4 +1,4 @@
-<div class="container repoConatiner">
+<div class="container repoContainer">
     <div class="row">
         <div class="col-1 col">
             <!-- ko if: isFetching -->

templates/palettes.html

@@ -37,7 +37,7 @@
     <div class="accordion">
         <div data-bind="foreach: palettes">
             <div class="paletteCardWrapper">
-                <button type="button" class="material-icons md-18 dropdown-toggle paletteTrippleDot" data-bs-toggle="dropdown" >more_vert</button>
+                <button type="button" class="material-icons md-18 dropdown-toggle paletteTripleDot" data-bs-toggle="dropdown" >more_vert</button>
                 <div class="dropdown-menu" data-bind="event:{mouseleave: $root.closePaletteMenus}">
                     <a href="#" data-bind="click: $root.sortPalette, clickBubble: false" data-html="true"><span>Sort</span></a>
                     <!-- ko ifnot: $data.fileInfo().builtIn -->