Senior Software Engineer
Slider
A custom slider component that was created in an initiative to create custom Preact components that align with the design, style and usage in our app. This components were not only used on the new visualization properties but also on other projects, though the developers working on this project made most of the components. This slider component is designed to be highly customizable, supporting both continuous and stepped sliders, as well as indeterminate states. ARIA roles(role="slider") and properties like aria-valuemax, aria-valuemin, and aria-valuetext are set for better accessibility, ensuring screen reader support. The component follows a custom element approach, using the @Component decorator to define a custom tag <ts-slider>. The componentDidLoad and componentDidUnmount lifecycle methods are used to handle component setup and cleanup, respectively. The slider's behavior is defined through methods that calculate the thumb's position, manage the drag-and-drop functionality, and handle resizing and other state changes. There are functions for things like formating the slider's value based on the number of decimals and padding settings, computing the thumb's position based on the value of the slider and dynamically adjusting the width of the input element to fit the value, ensuring it remains legible. Custom events like onTsStop and onTsSlide are emitted to notify when the slider's value changes or when the sliding operation stops. I wrote a series of unit tests using Jest and the @storybook/testing-library to ensure that the slider behaves correctly. I also created Storybook Stories to demonstrate the slider's functionality in different states (normal, disabled, stepped, etc.). The ts-slider component follows the SRP (Single Responsibility Principle) by focusing on a single responsibility—acting as a slider input.
Mentorship
I have had the privilege of mentoring junior developers, interns, and new team members, guiding them through the intricacies of frontend development. I have actively provided technical guidance on best practices, helping them to improve their coding skills, and offered advice on component development, such as creating reusable property cards and UI components. I also coached junior colleagues on unit testing and project collaboration tools like Jira, fostering a collaborative environment where everyone's growth is encouraged. By conducting regular code reviews, I not only ensured code quality but also shared insights on optimizing performance, implementing accessibility standards, and enhancing the user experience. Additionally, I worked closely with a junior developer on a project to optimize the flexible positioning of navigation tabs, promoting teamwork while enhancing their technical proficiency. My commitment to mentorship has significantly contributed to the team's ability to meet deadlines and maintain high-quality deliverables.
Support
The bugs I solved were mainly related to the projects I was working on (the new visualization properties, ui components), but I also took care of pressing issues brought up by our clients or our QA team.
Preact
The primary difference between Preact and React, in terms of performance, is the size and the virtual DOM. Preact is much smaller, just 3KB, while React is larger, over 30KB. This smaller size allows Preact to load faster and take up less memory. Additionally, Preact uses a simplified virtual DOM and diffing algorithm, which can lead to faster re-renders and better performance in certain applications. Preact also maintains an API compatibility with React (hooks, context, basic lifecycle componentDidMount, componentDidUpdate, and componentWillUnmount) but does not include all of React's lifecycle methods, such as getDerivedStateFromProps.
Reordering
The reordering of the items in the gridlist. I added a visual feedback when dragging an item. Specifically, the dragged item has a placeholder during the drag operation. A line is created dynamically during the drag operation and provides users with a clear indication of where the item will be placed once dropped. There is a hover state which is invoked whenever the drag-over state changes. The challenge I faced was to place the item at the right position when dropped and to show the drop indicator at the right position. Inside a useLayoutEffect hook I defined the onDragOver, onDragLeave and onDrop functions. For the line I first get all the rows and their characteristics (width, height and top) through using functions like getBoundingClientRect and the jquery function position(). After that I create a flatMap with all the line positions by calculating their top and width. And lastly I get the index of the current hovered line using the y mouse coordinate and its position in relation to the parent container.
Nested scroll
The scroll container is wrapped around the grid content, and the outside scroll of the panel is disabled when the list is focused. When the user clicks on the list, scrolling inside it is enabled by changing the state. The height of the scrollable area is dynamically calculated to accommodate the number of visible rows. The SearchBar component was added to filter the list.
Search
The search signal is exposed globally, allowing other components, like ConfigurableNodesList, to listen and react to changes in the search input. ConfigurableNodesList filters and updates the list of configurable nodes based on whether they match the search expression. If no matches are found, it ensures that all nodes (or a default set) are shown. It also integrates contextual awareness—the search results are filtered based on the active visualization. Properties are marked with icons showing their current configuration state, helping users identify if a property is configured, unconfigured, or in a multi-select state. The search results dynamically update as the user types, ensuring that they only see applicable properties. Changes to the web view trigger an update of the model snapshot. This ensures that when the user interacts with the properties panel (e.g., selecting or deselecting properties), the UI reflects those changes in real-time.
Error state
The status icon reflects the state of the property card, showing different icons based on conditions such as error, warning, info, hide, or multi-select. The highest priority state is displayed, and in multi-select mode, it shows the status icons inside the pop out next to their associated visualization. They have distinct background colors based on the type of message (error, warning, info). Inside the pop out you get a message about the issue and sometimes a button to perform an action in order to fix the issue.
TPS
Third-Party Software (TPS) refers to software developed by a company or individual other than the original manufacturer of the software platform. It typically integrates with or enhances the functionality of a platform, system, or application created by a different entity. The TPS upgrade process begins by identifying the packages that need upgrading, typically through Jira tasks or the BlackDuck upgrade sheet. After determining the required versions, open Visual Studio Code at the root of the branch and update the necessary packages in the Packages.props file. For the main branch, compile the solution using .\build.bat compile-dxp, and then run the .\build.bat update-module-files command to update the related XML files. Afterward, conduct smoke testing of the Spotfire app to ensure functionality. Service packs are handled separately by manually updating package references in Directory.Packages.props or .csproj files, ensuring both the NuGet and assembly versions are synchronized. Once the updates are completed, confirm that the Spotfire app runs without issues and that Jenkins build shows no errors before committing the changes.
Visualization properties
Unify the representation of the visualization properties in the desktop and web client. The desktop client had all the properties implemented in a old windows forms dialog, while the web client had a panel with an outed design that didn't have all the properties implemented. The new side panel didn't only implement all the properties on both the desktop and the web client but also improved them in both functionality and design creating a more cohesive and accessible implementation. It also brought about implementation of long requested features like multiselect. Code wise on the frontend there is a panel component that contains tabs for switching between the two card types configuration and appearance (the active tab is managed by a state hook; the tabs component is a custom ui component), the search bar filters through properties and displays the matching properties, than in a scroll container we have the property components (the cards) that can be reordered and at the bottom of the panel there is an add button that opens a popout with properties that are not added/configured yet.
Code reviews
We have an open code review approach. We post about the GitLab merge request in the channel related to the project we are working on and anyone in the channel can volunteer to review the code. Because of this opportunity I was able to partake in code reviews on a daily basis. And in order to ensure all the developers on the team are on the same page when it comes to writing clean code, we all took the "Clean Coding Principles in C#" course where we learned principles like KISS, DRY, YAGNI, and SOLID, as well as best practices such as favoring composition over inheritance and maintaining separation of concerns. The course emphasized consistent naming conventions, clean code layout, and effective use of C# features, alongside techniques for designing simple, readable classes and methods. It also focused on refactoring for maintainability and writing testable code, including unit testing fundamentals and best practices.
Formatting
Refactoring the old formatting interface that addressed only the formatting for the axis properties to a more abstract interface that also applies to columns. This entailed modifying methods and classes to accept the new type , simplifying the logic by removing unnecessary steps like creating multiple adapters (they contain the logic for applying, resetting, and managing formatting settings) for each operation and handling multiselect scenarios (multiple visual elements (axes or columns) can be selected and formatted simultaneously).
Help popover
A popover that appears on the left side of the panel when hovering on the card that contains information about the property. It is a redesign popover that has the pointing arrow removed. The tooltip content has injected HTML code with the div property dangerouslySetInnerHTML. HTML code is used in order to have better text formatting like using bold tags or adding specific styling to the paragraph tags.
Demo sessions
At the end of each sprint during the sprint review we could also volunteer to present our work that sprint and I choose to present every time which helped me build my reputation, grow my skill set, and create a path for future success. And these personal gains go hand-in-hand with contributing to the team's overall goals.
CEF
Chromium Embedded Framework (CEF) is the web browser component used in the app. The component uses pre-built binaries, a C# glue project, and defines our own API for interacting with the browser. We deploy this component via NuGet. The CEF upgrade process involves several key steps to ensure proper integration and functionality of Spotfire's web browser component. First, you must install the necessary prerequisites such as 7zip, WSL2, Python, and Visual Studio with specific components. After preparing the environment, remove old untracked folders and download the latest CEF binaries from Xilium's Gitlab. The next step involves running the PrepareCefBinaries.ps1 script, which downloads the required binaries, moves header files, and generates C# classes. Any missing roles or classes from the new version may need manual mapping in the schema files. After preparing the environment, build and test the system, including running unit tests and integration tests. Finally, generate the release NuGet packages with CreateNuGetPackage.ps1, upload the packages to Artifactory, and verify that Spotfire integrates correctly with the updated CEF version. In case of bugs requiring a hotfix, follow a specific process that ensures compatibility with the existing CEF version, applying only necessary updates without reintroducing older bugs.
Property cards
On the front end every card has a tsx file and in this file there is a React functional component that receives as a parameter the settings with all the configurations for the card. Every card has its own settings interface. The components markup is built with both classic react UI components and custom components. We also use hooks like useContext (to dispatch changed settings that result in a state change). At the end we register the property to the cards registry (integrate this component into the larger UI) through a function that receives as parameter an object with the component and all the behavior related to the card. On the back end we have an abstract class for the property that extends a generic class that has abstract methods for getting and setting the settings. The abstract class is than implemented for each different visualization that uses the property. The getting function receives the settings stored in the global properties of the visualization and the setting function sets the global properties to the new settings receive in a JSON Data Transfer Object.
