trueblocks / trueblocks-explorer Goto Github PK
View Code? Open in Web Editor NEWLicense: GNU General Public License v3.0
License: GNU General Public License v3.0
In version 1.0, we can switch a small collection of about 10 CSS definitions to change the 'skin' of the app. (It's easier to show you what I mean than explain it.)
This issue to design a mechanism that would allow us to modify the application's 'skin.'
Think of switching between light and dark mode on steroids. Not only switching between light and dark mode, but switching between skin1, skin2, skin3, etc.
Sorting on calculated fields in the datatable does not work. For example, Digests, nApps/Block
If you do a pull on the trueblocks-core repo and then hand copy the file ./src/other/install/mockData/mockData.tar.gz to ~/.quickBlocks/mockData, and then unzip and unpack that file, you will get a new (more interesting) set of mocked up data.
Then, if you turn mock data on, and go to this page: http://localhost:3002/monitors/explore?addrs=0x5ed8cee6b63b1c6afce3ad7c92f4fd7e1b8fad9f&name=Vitalik and then click on 'Balances' you should see a pretty poorly done scatter chart.
Push on the 'bar' chart type and notice that the chart doesn't change.
This is because the BarChart component and the ScatterChart component are identical.
This issue is to expand on the three 'Chart' types (bar, line, and scatter) to display the mocked data better.
I did some work with 'd3' and put it in a folder called ./src/other/d3-charts. You can copy the contents of that folder to a new folder and do:
yarn install
yarn start
to see that code which I like especially because it's animated and it is 'responsive' in the sense that the svg canvas changes shape if you change the shape of the window. I learned how to do this by watching these YouTube videos, which I think are pretty good.
https://www.youtube.com/playlist?list=PLDZ4p-ENjbiPo4WH7KdHjh_EMI7Ic8b2B
In the previous version we used a library for fetching data from the backend that allowed two things:
The library was called SWR. Not sure we want to use that, but we need the same functionality.
Please review this and consider using it since I'm already a little bit familiar with it. Although, I'm open to other suggestions for similar functionality.
I modified one of the TrueBlock Core tools to sleep for 10 seconds as a way to test the 'Loading' component.
It works well.
However, I wanted to cancel the request by hitting the escape
key on my browser. I expected the application to cancel the request and return control to the user, however, it simply continues to spin the spinner.
Question:
There is a missing dependency on the package.json file.
One of the things I love about version 1.0 is the fact that I can scroll through the entries in any table with the keyboard. Down/up arrows for next/previous record. Left/right keys for next/previous page. Home/End for first record/last record.
This makes the application feel very much more like a spreadsheet program than a web page where navigation through a table of data is primarily by clicking on pagination controls.
The docs for starting the explorer are wrong. They reference nf start
which tries to start the electron version which isn't working in the explorer folder.
I'm sure you've thought of this, but I notice that a lot of the keyboard handling code has "leaked" into the NameTable component. I'd like to abstract all of the keyboard handling code into a table component that can be much more easily used elsewhere without duplicating complicated code.
I'm envisioning an underlying keyboard handling table and then slightly higher level tables. One for displaying rows. One for displaying objects and a third for display a spreadsheet-like grid (for use with the Indexes view). The row and grid tables would have the ability to display detail view object tables.
(All of this is implemented in the old version of the explorer if you need to better understand what I mean.)
version
nocolor
wei
ether
dollars
raw
very_raw
fmt
api_mode
to_file
output
file
noop
help
parity
I will just put all of these into a single issue so I don't create a ton of them:
Name (0x123...456)
everywhere they are displayedOn the develop branch, there are five main menu items.
The first one, Dashboard, has five tabs: Overview, Accounts, Monitors, etc.
The second tab, Accounts, is supposed to have sub-tabs which display vertically for various things (Transactions, Functions, Neighbors, Tokens, Accounting, etc. -- only Transactions and Functions show now -- names are not finalized.)
I can get the tabs to work, etc, but I can't seem to get the routing to work. When I click on Accounts, it properly goes to the Accounts tab, but when I click on any of the sub-tabs (Transactions or Functions), it returns to the Overview tab.
I can't really figure out how to make this work.
We can discuss later if this mode (sub-tabs within tabs) is a good UI choice, but for now, let's just get it to work so we can see the data we have to deal with. Fixing the actual structure of the UI can wait a bit.
There's a mixup between SystemsView/SettingsView and the folder Settings/System.
Decide on which is better (I think it's probably Settings) and then make them the same.
I notice that the status panel has hard coded data.
This issue makes note that we should use real data.
Do this:
Without starting the server, go to ./trueblocks-explorer
folder and type yarn install
then yarn start
.
The application starts by opening the browser window, but a small popup window appears saying Error running 'status'
which is true, but way to cryptic.
We need a way to display a must more obvious error messages saying something like "The application cannot run if it can't connect to its back end." This should be a generic solution so that the same warning mechanism can be used for other warning such as "We cannot attach to the RPC server" or other things.
I have started the API server. And installed trueblocks explorer. However, when I shoot yarn develop
it throws the error The futex facility returned an unexpected error code.[1] trueblocks-explorer/node_modules/electron/dist/electron exited with signal SIGABRT[1]
. Though it still runs and the web app pops up, but it shows me empty rows and an error symbol. Any idea what am I doing wrong?
Detailed log --
[0] <i> [webpack-dev-server] Project is running at:
[0] <i> [webpack-dev-server] Loopback: http://localhost:1234/
[0] <i> [webpack-dev-server] On Your Network (IPv4): http://localhost:1234/
[0] <i> [webpack-dev-server] Content not from webpack is served from 'trueblocks-explorer/public' directory
[0] <i> [webpack-dev-server] 404s will fallback to '/index.html'
The futex facility returned an unexpected error code.[1] trueblocks-explorer/node_modules/electron/dist/electron exited with signal SIGABRT
[1] yarn develop:electron exited with code 1
[0] asset bundle.js 10.4 MiB [emitted] (name: main) 1 related asset
[0] asset index.html 230 bytes [emitted]
[0] orphan modules 3.95 MiB [orphan] 807 modules
[0] runtime modules 26.3 KiB 14 modules
[0] modules by path ./node_modules/ 7.53 MiB 2655 modules
[0] modules by path ./src/ui/ 74.3 KiB
[0] modules by path ./src/ui/views/ 39.8 KiB 36 modules
[0] modules by path ./src/ui/components/ 19.8 KiB 16 modules
[0] modules by path ./src/ui/*.tsx 7.43 KiB 4 modules
[0] modules by path ./src/ui/*.css 2.17 KiB 2 modules
[0] modules by path ./src/ui/*.ts 1.98 KiB
[0] ./src/ui/utils.ts 387 bytes [built] [code generated]
[0] ./src/ui/locations.ts 1.61 KiB [built] [code generated]
[0] modules by path ./src/ui/modules/ 1.8 KiB
[0] ./src/ui/modules/core/index.ts 1.61 KiB [built] [code generated]
[0] ./src/ui/modules/error_notification.ts 197 bytes [built] [code generated]
[0] ./src/ui/hooks/useCommand.ts 1.34 KiB [built] [code generated]
[0] webpack 5.38.1 compiled successfully in 21714 ms
[0] No issues found.
Review the structure of the folders / filenames in the repo and suggest removal of any unusual / incorrect ways of naming files and / or folders.
The idea to make the repo be familiar to a person who's new to the repo.
I made decisions without having any experience of what a 'regular' Javascript/Typescript project would do.
Let's do this issue earlier rather than later -- rip the bandaid off quickly.
Error Modes on Startup:
This function ( https://github.com/TrueBlocks/trueblocks-explorer/blob/master/src/ui/modules/core/index.ts#L65) centralizes access to the backend. We did this in anticipation of 'reading the backend files directly into memory' under the Electron application using ideas (potentially) as described here: https://nodejs.dev/learn/nodejs-streams.
I'd like to start with the 'names' database which a simple binary file generated by the backend from an installed text file on first run after installation. The format of the binary file is fairly simple according to this code in the backend: https://github.com/TrueBlocks/trueblocks-core/blob/master/src/libs/utillib/accountname.cpp#L313
Basically native types (ints, bools, etc) are stored directly. Strings are stored with leading uint length followed by the bytes of the string. Types are described here: https://github.com/TrueBlocks/trueblocks-core/blob/master/src/libs/utillib/accountname.h#L30
TrueBlocks core returns a valid response even in the case of an error. This is the result of the way the command line versions of the code works and will not change in the future.
For example, this curl request:
curl "http://localhost:8080/transactions?transaction=12"
Does not complain even though the transaction does not exist. In this case, it returns valid JSON thus:
{
"errors": [
"chifra transactions - 12 does not appear to be a valid transaction index."
]
}
```
We should handle this case as an error and report the message returned in `@modules/core` I think.
Issue 1
Go to names table
Hit home
Hit up arrow key
Should do nothing....scrolls to bottom of current page instead.
Issue 2
Rows per page control captures keyboard control if changed.
Issue 3
Hit the home key
Hit down arrow once (selected row is now second row on page)
Hit next page key
The selected row is correctly the second row on the page. All good
Hot the home key again (first row is selected)
Hit next page key
Fourth row on page is selected -- would have expected first row to be selected.
I need a way to navigate through blockchain data in the explorer such as next/prev/first/last. Suggestions on how to navigate to particular places in the app is needed <NavLink>?
An aside. You can use chifra blocks bn.prev
, chifra blocks bn.next
, chifra blocks first
, and chifra blocks latest
to navigate the API, so the buttons should be super simple.
In version 1.0, there is a 'status' panel whose display I like. It's informative and looks professional. I'd like to re-create it in version 2.0. Currently, we query the data but we only present it as formatted JSON data.
We talked about an installer for Mac (and Linux?). Can you @dszlachta link to the tool you mentioned?
If you run the old UI, you will see that the backend API server communicates progress to the front end through web sockets which feed into a component at the bottom of the display I call the 'console.'
This 'feedback' to the user, which gives information about what's happening on the server, is important to me, and I would like to re-enable it in the new UI.
The 'feeding of progress' data is already implemented and working in the back end, so this issue is just re-enabling it on the frontend. There shouldn't be any backend work needed as that code has not changed.
Steps:
What is the best way to preserve user decisions?
For example, if the user closed the help/status panels and hits reload, the panel re-open. I'd like to preserve that.
For one reason, if I select more than 10 items per page, the navigation disappears from view and I must scroll down to use it.
I want to start changing the OS specific Electron menus. Any suggestions on how to do that?
(extend-help)@./trueblocks-explorer:jrush>$ yarn install
yarn install v1.22.10
info No lockfile found.
[1/4] ๐ Resolving packages...
warning @types/[email protected]: This is a stub types definition. filesize provides its own type definitions, so you do not need this installed.
warning @types/[email protected]: This is a stub types definition. react-jss provides its own type definitions, so you do not need this installed.
warning cypress > @cypress/request > [email protected]: this library is no longer supported
warning cypress > @cypress/request > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning webpack-dev-server > sockjs > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
[2/4] ๐ Fetching packages...
error @ctrl/[email protected]: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.9.3"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
TODO(tjayrush): This code should notice the lack of a path
but allow the API to run anyway. All requests to the API should
return an error to the requestor instread of refusing to run.
Currently, we link only to http://localhost:1234/names
, http://localhost:1234/explorer
, etc.
@deeayeen suggests we link all the way down into each sub-tab which makes sense for both directing users directly into the sub-view and it makes help files easier.
Use cookies to store the state of the UI.
I was working on one of the subviews (Transactions under Explorer) and I made a mistake in the URL to access the API.
I used http://localhost:8080/transactions?transaction=latest when I should have used http://localhost:8080/transactions?transactions=latest (missing 's').
The front end didn't fail in an obvious way. Dan suggests it should report an error through a 'Toast'.
But this is a bit of a larger issue...
We need a way to respond to problems with the back end in general. There's a number of different scenarios detailed in this issue: #305.
This issue tracks the need for a 'methodology' to handle errors (not the solution to each issue -- just an overall mechanism to handle errors from anywhere in the code).
I can handle each individual error using the above issue.
Related TrueBlocks/trueblocks-core#50
For example, set an invalid path for cachePath. Then do a query for blocks. Returns the block, but reports an error that is ignored in the UI. The block data is correct.
There's a mismatch between the name of the view MonitorsView, the route /monitors and the files in the folder Names. All should be called names.
This has always been a very confused idea. It was meant to allow the end user to specify a group of related addresses and look at them in a combined view. I think that idea is still valid, but may not warrant a top level menu item. It may, but my guess is that it doesn't. In any case, in order to move forward, I want to remove it. We can always add it back later.
I'd like to be able to search for names on the names table (or any other table for that matter).
Also, I'd like to be able to filter the table by various things -- perhaps things like tags or things the user defines (such as tags).
Filtering could also filter on smart contracts, not smart contracts, prefunds, etc.
In a shell that does not have PATH set to include trueblocks-core/bin, if you open the API, the API will fail but only on it's first attempt to start chifra
.
Instead, it should check to see if it can find chifra
before trying to start the API.
The way the folders are laid out is weird, I think
docker
| ---- frontend
| ---- api
| ---- electron
I think it might be better if it was
electron
| ---- frontend
| ---- api
| ---- docker
since the primary thing we're building is the electron app.
Some of the tables in some of the sub-views show un-editable data (such as the explorer views, the signatures view, and others.
Some of the tables (such as names / tags) allow the user to edit some of the values in the database.
This is tracks enabling editing values in one of the tables inline. In other words, the user clicks on a value and an editor opens up that he/she can change.
This could be done by opening up an expanded view that changes into a edit form if the user clicks a button or something.
There will need to be some backend work done in the blaze
server to accept the user's edited data and prepare it for sending to chifra
, but that part, I will do. Before I do that though, I need the front end to send the data.
Here's a bunch of small issues. Not sure if you'd rather have them in individual issues or all together. If you want me to separate these out, let me know.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.