Refactor files tabs overflow behavior

Lara-JS/src-api/visualization/public/css/color-scheme.css

@@ -2,12 +2,14 @@
 
 :root {
   --white: #fff;
+  --translucid-white: #fff6;
   --lighter-gray: #e4e4e4;
   --light-gray: #d4d4d4;
   --gray: #a2a2a2;
   --dark-gray: #747474;
   --darker-gray: #313131;
   --black: #161616;
+  --translucid-black: #16161666;
   --light-blue: #19d8ff;
   --strong-translucid-light-blue: #19d8ff66;
   --weak-translucid-light-blue: #19d8ff33;
@@ -23,6 +25,7 @@
 
 :root {
   --bg-color: var(--white);
+  --translucid-bg-color: var(--translucid-white);
   --text-color: var(--darker-gray);
   --header-color: var(--lighter-gray);
   --border-color: var(--gray);
@@ -50,6 +53,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: var(--black);
+    --translucid-bg-color: var(--translucid-black);
     --text-color: var(--white);
     --header-color: var(--darker-gray);
     --border-color: var(--lighter-gray);

Lara-JS/src-api/visualization/public/css/styles.css

@@ -241,7 +241,7 @@ main {
 
 #file-tabs {
   box-sizing: border-box;
-  height: 3em;
+  height: 3.5em;
   width: fit-content;
   max-width: 100%;
   padding: 0.125em;
@@ -254,7 +254,10 @@ main {
   grid-area: file-tabs;
   position: relative;
   bottom: calc(-1em + 1px);
+}
 
+#file-tabs > div {
+  height: 100%;
   display: flex;
   align-items: start;
   justify-content: left;
@@ -294,6 +297,31 @@ main {
   background-color: var(--tab-active-bg-color);
 }
 
+.file-tabs-arrow {
+  padding: 0.625em;
+  background-color: var(--translucid-bg-color);
+  border: none;
+
+  position: absolute;
+  top: 0;
+}
+
+.file-tabs-arrow:hover {
+  background-color: var(--translucid-bg-color);
+}
+
+#file-tabs-arrow-left {
+  left: 0;
+}
+
+#file-tabs-arrow-right {
+  right: 0;
+}
+
+.file-tabs-arrow:disabled {
+  display: none;
+}
+
 
 .loading {
   color: var(--text-color);

Lara-JS/src-api/visualization/public/js/components.ts

@@ -91,6 +91,10 @@ const getFileCodeElement = (filename: string): HTMLElement | null => {
 };
 
 
+const getFileTabsInternalDiv = (): HTMLDivElement | null => {
+  return getFileTabs().querySelector('div');
+}
+
 const getFileTab = (filepath: string): HTMLButtonElement | null => {
   return getFileTabs().querySelector(`.file-tab[data-filepath="${filepath}"]`);
 };
@@ -99,6 +103,10 @@ const getActiveFileTab = (): HTMLButtonElement | null => {
   return getFileTabs().querySelector('.file-tab.active');
 };
 
+const getFileTabsArrow = (direction: 'left' | 'right'): HTMLButtonElement | null => {
+  return document.querySelector(`#file-tabs-arrow-${direction}`);
+}
+
 
 const createIcon = (name: string): HTMLElement => {
   const icon = document.createElement('span');
@@ -212,6 +220,46 @@ const createFileTab = (filepath: string): HTMLButtonElement => {
 	return fileTab;
 };
 
+const fileTabsArrowOnClick = (event: Event, direction: 'left' | 'right') => {
+  const fileTabsInternalDiv = getFileTabsInternalDiv()!;
+  const activeTabIndex = Array.from(fileTabsInternalDiv.children).findIndex(tab => tab.classList.contains('active'));
+
+  if (direction === 'left' && activeTabIndex > 0) {
+    (fileTabsInternalDiv.children[activeTabIndex - 1] as HTMLButtonElement).click();
+  } else if (direction === 'right' && activeTabIndex < fileTabsInternalDiv.children.length - 1) {
+    (fileTabsInternalDiv.children[activeTabIndex + 1] as HTMLButtonElement).click();
+  }
+
+  event.stopPropagation();
+};
+
+const createFileTabsArrow = (direction: 'left' | 'right'): HTMLButtonElement => {
+  const arrow = document.createElement('button');
+  arrow.classList.add('file-tabs-arrow');
+  arrow.id = `file-tabs-arrow-${direction}`;
+
+  arrow.appendChild(createIcon(`keyboard_arrow_${direction}`));
+  arrow.addEventListener('click', event => fileTabsArrowOnClick(event, direction));
+  return arrow;
+}
+
+/**
+ * @brief Updates the file tabs arrows, enabling or disabling them based on the
+ * number of tabs and selected tab.
+ */
+const updateFileTabsArrows = (): void => {
+  const fileTabs = getFileTabs();
+  const fileTabsInternalDiv = getFileTabsInternalDiv()!;
+  const activeFileTab = getActiveFileTab();
+
+  const fileTabsLeftArrow = getFileTabsArrow('left')!;
+  const fileTabsRightArrow = getFileTabsArrow('right')!;
+
+  const fileTabsOverflow = fileTabs.scrollWidth < fileTabsInternalDiv.scrollWidth;
+  fileTabsLeftArrow.disabled = !fileTabsOverflow || fileTabsInternalDiv.children[0] === activeFileTab;
+  fileTabsRightArrow.disabled = !fileTabsOverflow || fileTabsInternalDiv.children[fileTabsInternalDiv.children.length - 1] === activeFileTab;
+}
+
 export {
   getAstContainer,
   getCodeContainer,
@@ -229,7 +277,9 @@ export {
   getActiveCodeElement,
   getFileCodeElement,
   getFileTab,
+  getFileTabsInternalDiv,
   getActiveFileTab,
+  getFileTabsArrow,
   createIcon,
   createNodeDropdown,
   createNodeDropdownButton,
@@ -240,4 +290,6 @@ export {
   createCodeElement,
   createCodeWrapper,
   createFileTab,
+  createFileTabsArrow,
+  updateFileTabsArrows,
 };

Lara-JS/src-api/visualization/public/js/files.ts

@@ -4,7 +4,7 @@
  */
 
 import { addFileCode, updateLines } from "./ast-import.js";
-import { createFileTab, getActiveCodeElement, getActiveFileTab, getFileCodeElement, getFileTab, getFileTabs, getMainCodeWrapper } from "./components.js";
+import { createFileTab, createFileTabsArrow, getActiveCodeElement, getActiveFileTab, getFileCodeElement, getFileTab, getFileTabsInternalDiv, getFileTabs, getMainCodeWrapper, updateFileTabsArrows } from "./components.js";
 
 let selectedFilepath: string | null = null;
 
@@ -21,7 +21,14 @@ const addFile = (path: string, code: string): void => {
   fileTab.addEventListener('click', () => selectFile(path));
 
   const fileTabs = getFileTabs();
-  fileTabs.appendChild(fileTab);
+  const fileTabsInternalDiv = getFileTabsInternalDiv()!;
+  if (fileTabsInternalDiv.children.length === 0) {
+    const fileTabsLeftArrow = createFileTabsArrow('left');
+    const fileTabsRightArrow = createFileTabsArrow('right');
+    fileTabs.append(fileTabsLeftArrow, fileTabsRightArrow);
+  }
+
+  fileTabsInternalDiv.appendChild(fileTab);
 };
 
 /**
@@ -34,6 +41,7 @@ const clearFiles = (): void => {
 
   const fileTabs = getFileTabs();
   fileTabs.innerHTML = '';
+  fileTabs.appendChild(document.createElement('div'));
   codeWrapper.innerHTML = '';
 
   selectedFilepath = null;
@@ -62,6 +70,9 @@ const selectFile = (filepath: string): void => {
     fileCodeElement.classList.add('active');
     updateLines();
 
+    fileTab.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    updateFileTabsArrows();
+
     selectedFilepath = filepath;
   }
 };

Lara-JS/src-api/visualization/public/js/visualization.ts

@@ -3,7 +3,7 @@
  * @brief Functions for handling the visualization behavior and events.
  */
 
-import { createCodeElement, createCodeWrapper, createNodeInfoAlert, createNodeInfoLine, getAstContainer, getCodeContainer, getContinueButton, getFirstNodeCodeElement, getHighlightableElements, getNodeElement, getNodeInfoContainer, getNodeText, getResizer } from "./components.js";
+import { createCodeElement, createCodeWrapper, createNodeInfoAlert, createNodeInfoLine, getAstContainer, getCodeContainer, getContinueButton, getFileTabsInternalDiv, getFirstNodeCodeElement, getHighlightableElements, getNodeElement, getNodeInfoContainer, getNodeText, getResizer, updateFileTabsArrows } from "./components.js";
 import { selectFile } from "./files.js";
 import JoinPoint from "./ToolJoinPoint.js";
 
@@ -225,6 +225,9 @@ const addResizerEventListeners = (): void => {
       else if (width > maxWidth)
         width = maxWidth;
       rootStyle.setProperty('--ast-container-width', `${width}px`);
+
+      if (getFileTabsInternalDiv())
+        updateFileTabsArrows();
     }
   });
 };