New UI very buggy | Voters

New UI very buggy

complete

Mark Hamilton

Might want to roll this one back, its super buggy and removes much of the loved functionality from the site.

September 14, 2022

AJ Fazzio

marked this post as

complete

King31 Boy

Tool Api
Each default tool provided by eruda can be accessed by eruda.get('Tool Name')
.
## Console
Display console logs Implementation detail follows the console api spec.
### Config
|Name               |Type   |Desc                           |
Tool Api
Each default tool provided by eruda can be accessed by eruda.get('Tool Name')
.
## Console
Display console logs. Implementation detail follows the console api spec.
### Config
|Name               |Type   |Desc                           |
|-------------------|-------|-------------------------------|
|asyncRender        |boolean|Asynchronous rendering         |
|jsExecution        |boolean|Enable JavaScript execution    |
|catchGlobalErr     |boolean|Catch global errors            |
|overrideConsole    |boolean|Override console               |
|displayExtraInfo   |boolean|Display extra information      |
|displayUnenumerable|boolean|Display unenumerable properties|
|displayGetterVal   |boolean|Access getter value            |
|lazyEvaluation     |boolean|Stringify object when clicked  |
|displayIfErr       |boolean|Auto display if error occurs   |
|maxLogNum          |string |Max log number                 |
```javascript
let console = eruda.get('console');
console.config.set('catchGlobalErr', true);
### log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd
All these methods can be used in the same way as window.console object. 
Note: When called, a corresponding event is triggered.
```javascript
let console = eruda.get('console');
console.log('eruda is a console for %s.', 'mobile browsers');
console.table([{test: 1}, {test: 2}, {test2: 3}], 'test');
console.error(new Error('eruda'));
console.on('log', function () 
{
    // Do whatever you want, send to server or save on local storage.
});
### filter
Filter logs.
|Name  |Type                  |Desc         |
|------|----------------------|-------------|
|filter|string regexp function|Custom filter|
```javascript
console.filter('eruda');
console.filter(/^eruda/);
console.filter(function (log)
{
return log.type === 'error';
});
### html
Log out html content.
|Name|Type  |Desc       |
|----|------|-----------|
|html|string|Html string|
```javascript
console.html('<span style="color:red">Red</span>');
## Elements
Check dom element status.
### Config
|Name               |Type   |Desc                 |
|-------------------|-------|---------------------|
|overrideEventTarget|boolean|Catch Event Listeners|
|observeElement     |boolean|Auto Refresh         |
### select
Select node to show.
|Name|Type     |Desc               |
|----|---------|-------------------|
|node|ChildNode|Node to be selected|
```javascript
elements.select(document.body);
## Network
Display requests.
### clear
Clear requests.
### requests
Get request data.
```javascript
network.clear();
## Resources
LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.
### Config
|Name            |Type   |Desc                 |
|----------------|-------|---------------------|
|hideErudaSetting|boolean|Hide Eruda Setting   |
## Sources
View object, html, js, and css.
### Config
|Name       |Type   |Desc             |
|-----------|-------|-----------------|
|showLineNum|boolean|Show Line Numbers|
|formatCode |boolean|Beautify Code    |
|indentSize |string |Indent Size      |
## Info
Display special information, could be used for displaying user info to track
user logs.
By default, page url and browser user agent is shown.
### clear
Clear infos.
### add
Add info.
|Name   |Type           |Desc        |
|-------|---------------|------------|
|name   |string         |Info name   |
|content|string function|Info content|
```javascript
info.add('title', 'content');
info.add('location', () => location.href);
### get
Get info or infos.
|Name  |Type           |Desc        |
|------|---------------|------------|
|name  |string         |Info name   |
|return|string function|Info content|
```javascript
info.add('title', 'content')
info.get(); // -> [{name: 'title', val: 'content'}]
info.get('title') // -> 'content'
### remove
Remove specified info.
|Name|Type  |Desc     |
|----|------|---------|
|name|string|Info name|
```javascript
info.remove('title');
## Snippets
Allow you to register small functions that can be triggered multiple times.
### clear
Clear snippets.
### add
Add snippet.
|Name|Type    |Desc                    |
|----|--------|------------------------|
|name|string  |Snippet name            |
|fn  |function|Function to be triggered|
|desc|string  |Snippet description     |
### remove
Remove specified snippet.
|Name|Type  |Desc             |
|----|------|-----------------|
|name|string|Snippet to remove|
### run
Run specified snippet.
|Name|Type  |Desc          |
|----|------|--------------|
|name|string|Snippet to run|
```javascript
snippets.add('hello', function ()
{
    console.log('Hello World!');
}, 'Display hello on console');
snippets.run('hello');
snippets.remove('hello');
## Settings
Customization for all tools.
### clear
Clear settings.
### remove
Remove setting.
|Name|Type  |Desc         |
|----|------|-------------|
|cfg |object|Config object|
|name|string|Option name  |
### text
Add text.
|Name|Type  |Desc             |
|----|------|-----------------|
|str |string|String to display|
### switch
Add switch to toggle a boolean value.
|Name|Type  |Desc                                   |
|----|------|---------------------------------------|
|cfg |object|Config object created by util.createCfg|
|name|string|Option name                            |
|desc|string|Option description                     |
### select
Add select to select a number of string values.
|Name  |Type  |Desc                      |
|------|------|--------------------------|
|cfg   |object|Config object             |
|name  |string|Option name               |
|desc  |string|Option description        |
|values|array |Array of strings to select|
### range
Add range to input a number.
|Name  |Type  |Desc              |
|------|------|------------------|
|cfg   |object|Config object     |
|name  |string|Option name       |
|desc  |string|Option description|
|option|object|Min, max, step    |
### separator
Add a separator.
```javascript
import defaults from 'licia/defaults';
let cfg = eruda.Settings.createCfg('test');
cfg.set(defaults(cfg.get(), {
testBool: true,
testSelect: 'select1',
testRange: 1
}));
settings.text('Test')
.switch(cfg, 'testBool', 'Test Bool')
.select(cfg, 'testSelect', 'Test Select', ['select1', 'select2'])
.range(cfg, 'testRange', 'Test Range', {min: 0, max: 1, step: 0.1})
.separator();
settings.remove(cfg, 'testBool')
|-------------------|-------|-------------------------------|
|asyncRender        |boolean|Asynchronous rendering         |
|jsExecution        |boolean|Enable JavaScript execution    |
|catchGlobalErr     |boolean|Catch global errors            |
|overrideConsole    |boolean|Override console               |
|displayExtraInfo   |boolean|Display extra information      |
|displayUnenumerable|boolean|Display unenumerable properties|
|displayGetterVal   |boolean|Access getter value            |
|lazyEvaluation     |boolean|Stringify object when clicked  |
|displayIfErr       |boolean|Auto display if error occurs   |
|maxLogNum          |string |Max log number                 |
```javascript
let console = eruda.get('console');
console.config.set('catchGlobalErr', true);
### log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd
All these methods can be used in the same way as window.console object. 
Note: When called, a corresponding event is triggered.
```javascript
let console = eruda.get('console');
console.log('eruda is a console for %s.', 'mobile browsers');
console.table([{test: 1}, {test: 2}, {test2: 3}], 'test');
console.error(new Error('eruda'));
console.on('log', function () 
{
    // Do whatever you want, send to server or save on local storage.
});
### filter
Filter logs.
|Name  |Type                  |Desc         |
|------|----------------------|-------------|
|filter|string regexp function|Custom filter|
```javascript
console.filter('eruda');
console.filter(/^eruda/);
console.filter(function (log)
{
return log.type === 'error';
});
### html
Log out html content.
|Name|Type  |Desc       |
|----|------|-----------|
|html|string|Html string|
```javascript
console.html('<span style="color:red">Red</span>');
## Elements
Check dom element status.
### Config
|Name               |Type   |Desc                 |
|-------------------|-------|---------------------|
|overrideEventTarget|boolean|Catch Event Listeners|
|observeElement     |boolean|Auto Refresh         |
### select
Select node to show.
|Name|Type     |Desc               |
|----|---------|-------------------|
|node|ChildNode|Node to be selected|
```javascript
elements.select(document.body);
## Network
Display requests.
### clear
Clear requests.
### requests
Get request data.
```javascript
network.clear();
## Resources
LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.
### Config
|Name            |Type   |Desc                 |
|----------------|-------|---------------------|
|hideErudaSetting|boolean|Hide Eruda Setting   |
## Sources
View object, html, js, and css.
### Config
|Name       |Type   |Desc             |
|-----------|-------|-----------------|
|showLineNum|boolean|Show Line Numbers|
|formatCode |boolean|Beautify Code    |
|indentSize |string |Indent Size      |
## Info
Display special information, could be used for displaying user info to track
user logs.
By default, page url and browser user agent is shown.
### clear
Clear infos.
### add
Add info.
|Name   |Type           |Desc        |
|-------|---------------|------------|
|name   |string         |Info name   |
|content|string function|Info content|
```javascript
info.add('title', 'content');
info.add('location', () => location.href);
### get
Get info or infos.
|Name  |Type           |Desc        |
|------|---------------|------------|
|name  |string         |Info name   |
|return|string function|Info content|
```javascript
info.add('title', 'content')
info.get(); // -> [{name: 'title', val: 'content'}]
info.get('title') // -> 'content'
### remove
Remove specified info.
|Name|Type  |Desc     |
|----|------|---------|
|name|string|Info name|
```javascript
info.remove('title');
## Snippets
Allow you to register small functions that can be triggered multiple times.
### clear
Clear snippets.
### add
Add snippet.
|Name|Type    |Desc                    |
|----|--------|------------------------|
|name|string  |Snippet name            |
|fn  |function|Function to be triggered|
|desc|string  |Snippet description     |
### remove
Remove specified snippet.
|Name|Type  |Desc             |
|----|------|-----------------|
|name|string|Snippet to remove|
### run
Run specified snippet.
|Name|Type  |Desc          |
|----|------|--------------|
|name|string|Snippet to run|
```javascript
snippets.add('hello', function ()
{
    console.log('Hello World!');
}, 'Display hello on console');
snippets.run('hello');
snippets.remove('hello');
## Settings
Customization for all tools.
### clear
Clear settings.
### remove
Remove setting.
|Name|Type  |Desc         |
|----|------|-------------|
|cfg |object|Config object|
|name|string|Option name  |
### text
Add text.
|Name|Type  |Desc             |
|----|------|-----------------|
|str |string|String to display|
### switch
Add switch to toggle a boolean value.
|Name|Type  |Desc                                   |
|----|------|---------------------------------------|
|cfg |object|Config object created by util.createCfg|
|name|string|Option name                            |
|desc|string|Option description                     |
### select
Add select to select a number of string values.
|Name  |Type  |Desc                      |
|------|------|--------------------------|
|cfg   |object|Config object             |
|name  |string|Option name               |
|desc  |string|Option description        |
|values|array |Array of strings to select|
### range
Add range to input a number.
|Name  |Type  |Desc              |
|------|------|------------------|
|cfg   |object|Config object     |
|name  |string|Option name       |
|desc  |string|Option description|
|option|object|Min, max, step    |
### separator
Add a separator.
```javascript
import defaults from 'licia/defaults';
let cfg = eruda.Settings.createCfg('test');
cfg.set(defaults(cfg.get(), {
testBool: true,
testSelect: 'select1',
testRange: 1
}));
settings.text('Test')
.switch(cfg, 'testBool', 'Test Bool')
.select(cfg, 'testSelect', 'Test Select', ['select1', 'select2'])
.range(cfg, 'testRange', 'Test Range', {min: 0, max: 1, step: 0.1})
.separator();
settings.remove(cfg, 'testBool')        
```

AJ Fazzio

Hi Mark Hamilton, Ukonn Ra, and Jared Szechy, it has been awhile and we've done a lot of work to get things into a better state. I wanted to reach back out and see if you're continuing to experience a degraded experience - I'd love to hear any additional feedback you may have or things you're finding that still aren't right.

Mark Hamilton

AJ Fazzio: It looks alot nicer now. However there still isn't any sunburst viz and i think thats super useful to be able to see low coverage areas and bits of unused code. Interactive sunburst makes it much easier to jump to bad files areas than having to navigate to it in the file tree.

AJ Fazzio

Mark Hamilton: I appreciate the quick response, that's wonderful to hear! I can't make any promises, but the goal right now is to have the sunburst back in by the end of January.

Jared Szechy

Agreed, nothing works as expected. :(

AJ Fazzio

marked this post as

in progress

AJ Fazzio

Mark Hamilton Ukonn Ra We appreciate you letting us know and I think we've addressed a good chunk of what you're referencing below, but I'd be curious to hear where we may still be missing!

Ukonn Ra

Same thing, the UI is very buggy. Could I switch to the old one?

Jerrod Engelberg

Mark Hamilton thanks for the feedback, we are addressing that with some fast follow changes that you can see here: https://github.com/codecov/Codecov-user-feedback/issues/1

Mark Hamilton

Many pages just flatout 404, heres the one for Flags

Mark Hamilton

You can see some of the buggy graphics above the folder coverages, the graphics are incorrectly sized and rendering weird in chrome. Also the trend seems incorrect and much less detailed and helpful than the previous visualization

→