Giter Club home page Giter Club logo

reg-cli-report-ui's Introduction

reg-cli-report-ui

GitHub Actions Workflow Status

๐Ÿ’Ž New face of reg-cli report UI.

This repository is the Report UI of reg-viz/reg-cli

Screenshots

open close viewer

Available scripts

The following list is scripts used during development.

yarn dev

$ yarn dev

Launch the Report UI with the mock data.

yarn build

$ yarn build

Generate the JavaScript file required to embed Report UI. This is usually called in reg-viz/reg-cli.

yarn typecheck

$ yarn typecheck

Run static type checking using TypeScript.

yarn lint

$ yarn lint

Run Lint with ESLint.

yarn format

$ yarn format

Format the source code using Prettier and ESLint.

yarn storybook

$ yarn storybook

Launch the component catalog with Storybook.

yarn scaffold

$ yarn scaffold

Generate a component template.

Contribute

PRs welcome.

License

MIT License @ reg-viz

reg-viz

reg-cli-report-ui's People

Contributors

bokuweb avatar quramy avatar s2mr avatar suer avatar wadackel avatar ysgk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

reg-cli-report-ui's Issues

Filtering is both very strict (case sensitive) and very lenient (fuzzy)

Is your feature request related to a problem? Please describe.

The filtering makes no sense at the moment. I have the following tree structure

desktop/Invite handling/screen
mobile/Invite handling/screen

Searching for invite only showed the mobile branch, since the leading i is matched in mobile but ignored in the actual key I'm looking for (Invite handling).

Describe the solution you'd like

Please choose a consistent filtering style: Either case sensitive + no fuzzy or case insensitive + fuzzy.

Filter is not working if ximgdiff is disabled

Describe the bug

If ximgdiff is disabled in regconfig.json, filtering in the generated HTML report is not working.

Reproduced step

Check out reg-cli-report-ui, disable ximgdiffConfig in develop/index.html

ximgdiffConfig: { enabled: false, workerUrl: './worker.js' },

Start the dev env via yarn start. Filtering is not working.

Cause

if (!enabled || !workerUrl) {
return;
}

this._worker is only created if ximg diff is enabled. Since this._worker is used to relay the filtering messages, the filtering is not working if XIMGDiffConfig.enabled = false

Expected behavior

Filtering is working even with ximgdiff disabled.

Actual behavior

Filtering is not working with ximgdiff disabled.

Can't type J or K key at filter textinput

Describe the bug

'j' or 'k' letter are not reflected as the text value.

Reproduced step

  • focus text search area in side bar
  • type k key twice

Expected behavior

keyboard shortcut must not interrupt inputting search text.

A clear and concise description of what you expected to happen.

Actual behavior

A clear and concise description of what you actual to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information)

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Disable smooth scrolling

Is your feature request related to a problem? Please describe.

Smooth scrolling adds an annoying and unnecessary delay when dealing with hundreds of regression screenshots. Just take me directly to the screenshot I want to check out.

Describe the solution you'd like

Disable smooth scrolling in reg-cli-report-ui.

diff --git a/src/components/VGrid/VGrid.tsx b/src/components/VGrid/VGrid.tsx
index 5953c3a..8de2cc9 100644
--- a/src/components/VGrid/VGrid.tsx
+++ b/src/components/VGrid/VGrid.tsx
@@ -168,7 +168,7 @@ export class VGrid<T, K extends keyof T> extends React.Component<Props<T, K>, St
       if (hit) {
         // Notify scrolling to the context because we should not check the hash after the scrolling.
         this.context.consume();
-        setTimeout(() => this.scrollTo(hit.offsetIndex, true));
+        setTimeout(() => this.scrollTo(hit.offsetIndex));
       }
     }
   }
@@ -253,7 +253,7 @@ export class VGrid<T, K extends keyof T> extends React.Component<Props<T, K>, St
     this.updateCurrentOffsetIndex();
   }
 
-  private scrollTo(offsetIndex: number, instant = false) {
+  private scrollTo(offsetIndex: number) {
     const currentTop = scrollY;
     const top = this.calculateClientOffsetTop(offsetIndex);
     const threshold = this.state.visibleItemsLength * this.rowHeightUnit * 1;
@@ -271,7 +271,6 @@ export class VGrid<T, K extends keyof T> extends React.Component<Props<T, K>, St
     requestAnimationFrame(rafCb);
     scroll({
       top,
-      behavior: instant ? (('instant' as unknown) as any) : 'smooth',
     });
   }
 
diff --git a/src/styles/global-styles.ts b/src/styles/global-styles.ts
index c6d1fbd..57bc0bf 100644
--- a/src/styles/global-styles.ts
+++ b/src/styles/global-styles.ts
@@ -16,7 +16,6 @@ export const GlobalStyle = createGlobalStyle`
     -ms-text-size-adjust: 100%;
     font-family: ${FontFamily.SANS_SERIF};
     line-height: ${LineHeight.LARGE};
-    scroll-behavior: smooth;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.