Fix minor style problems#472
Conversation
Summary of ChangesHello @kyasbal, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request overhauls the timeline visualization and overall application layout to resolve previous styling inconsistencies and improve the component's architecture. The changes aim to enhance the user experience through more robust resizing capabilities and refined visual elements, while also modernizing the underlying implementation for better performance and future development. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a significant refactoring of the timeline component, moving from a custom WebGL-based rendering and resizing system to a new Angular signals-based component that leverages angular-split for layout management. This refactoring should improve maintainability and potentially the user experience. Additionally, several minor stylistic adjustments have been made to colors, transparencies, and font weights across various components. The removal of the mat-typography class from the root <body> is a deliberate step to gain more control over typography, as stated in the PR description.
kyasbal
force-pushed
the
epic/timeline-v2-style-adjust-0121
branch
from
0123c07 to
9f149ca
Compare
This component is a virtually scrollable components embeds its children timeline related components.
kyasbal
force-pushed
the
epic/timeline-v2-style-adjust-0121
branch
from
9f149ca to
97231dd
Compare
kyasbal
requested review from
RyuSA,
jyane,
kkuchima,
renamoo and
yfuruyama
as code owners
kyasbal
force-pushed
the
epic/timeline-v2-style-adjust-0121
branch
from
a40c9e1 to
3f09a69
Compare
kyasbal
merged commit 0a432b3
into
GoogleCloudPlatform:epic/timeline-v2
* Add MSDF texture generation scripts (#445) * Add MSDF texture generation scripts To enable extensible and high quality font/icon rendering on WebGL2, this script precalculate MSDFs and bake it on textures. These files are going to be used in the updated timeline v2 renderer. * Removed font generation step from CI The font atlas textures and its output JSON files are included in repository. This design is because it won't be conflict a lot ,its easy to regenerate to merge. I'll integrate this step with CI later. We don't need to run it on CI again. * Applied fixes suggested by gemini * Apply suggestions from code review Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: kyasbal <kyasbal1994@gmail.com> * formatted icons.json * fixed lint issue * Removed icons.json because it's intermediate generated file * Fix the lint issue and align the folder location with other generate task * Move web/msdf to scripts/msdf-generator to align with the other generate scripts * Ignored the json file from the root gitignore file for prettier to know the ignored files correctly --------- Signed-off-by: kyasbal <kyasbal1994@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * Make msdf generator not to produce diffs (#448) Ignored generated json files from the lint target and sort the icon list to keep it consistent. * Add TimelineCornerIndicatorComponent and TimelineLegendComponent (#449) * Add TimelineCornerIndicatorComponent and TimelineLegendComponent * fix issues pointed by gemini-code-assist * fix the issue pointed by gemini-code-assist * Fixed the event legend message And added the missing change to pass the storybook build * Added angular-split used in the later commit (#451) * Add TimelineIndexComponent (#450) * Add TimelineIndexComponent * fix compilation error * Adding missing code from the commit * fix stylesheet issues pointed by gemini-code-assist * Fix typos in the comment * Added base utilities for canvas (#453) * Added base utilities for canvas * Update web/src/app/timeline/components/gl/glcontextmanager.ts Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: kyasbal <kyasbal1994@gmail.com> --------- Signed-off-by: kyasbal <kyasbal1994@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * Adds algorithmic utility to implement timeline view (#452) * Adds algorithmic utility to implement timeline view * fixed issues pointed by gemini-code-assist * Removed sRGB hex notation in the generated SCSS (#454) * Removed sRGB hex notation in the generated SCSS To show the same color with CSS and canvas(canvas2d or WebGL), removed the color setting directly specified with sRGB hex and hold them in floating point values instead. KHI will use display-p3 color space rather than sRGB to use the wider color space. * fix issues pointed by gemini-code-assist * Add mising change expected to add in the commit * Move folder from gl to canvas (#456) the folder contained utility used for canvas 2d not WebGL. Renamed it not to confuse readers * Add utility functions and types used for implementing the timeline header component (#457) * Move folder from gl to canvas the folder contained utility used for canvas 2d not WebGL. Renamed it not to confuse readers * Added utility for drawing timeline header histogram * fixed issues pointed by gemini-code-assist * Added timeline header components (#458) * Add timeline header component * fix issue pointed by gemini-code-assist * Fixed issues pointed by gemini-code-assist and fixed some styles * fix typos * Add WebGL related types used in revision renderer and event renderer (#463) * Add WebGL related types used in revision renderer and event renderer * fixed issues pointed by gemini-code-assist * Add renderer for drawing event points (#464) * Add WebGL related types used in revision renderer and event renderer * fixed issues pointed by gemini-code-assist * Add renderer for drawing event points * fix suggested by gemini-code-assist * Add renderer drawing revision rectangles (#465) * Add WebGL related types used in revision renderer and event renderer * fixed issues pointed by gemini-code-assist * Add renderer drawing revision rectangles * fix issue pointed by gemini-code-assist * Add log filter status visualization feature (#466) * Add TimelineChart component (#467) * Adds timeline-chart Component * Removed the obsoleted comment * Add the hover component on timeline chart shown when user mouse is over (#468) * Add the hover component on timeline chart shown when user mouse is over * fix suggested by gemini-code-assist * Added scroll interaction on the ruler & minor style improvement (#469) * Added scroll interaction on the ruler & minor style improvement * fix issue pointed by gemini-code-assist * Add TimelineFrameComponent (#470) * Add TimelineFrameComponent This component is a virtually scrollable components embeds its children timeline related components. * added missing change on the PR * Fixed scroll caluclation bug * Replace current timeline with the timeline component (#471) * Add TimelineFrameComponent This component is a virtually scrollable components embeds its children timeline related components. * added missing change on the PR * Fixed scroll caluclation bug * Implemented TimelineSmartComponent and replace the current timeline component This is the component only for injecting props from Services. * Removed unused shaders * Add a missing file * Fix minor style problems (#472) * Add TimelineFrameComponent This component is a virtually scrollable components embeds its children timeline related components. * Fixed scroll caluclation bug * Fixed several minor style issues to prepare release * fix z-index style issue and emphasized the time cursor --------- Signed-off-by: kyasbal <kyasbal1994@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2 participants
This PR fixed several minor styling issues. These issues are mainly caused because I removed mat-typography class from the root because it has several margins not needed on KHI and we needed to override them everywhere.