netcreateorg / netcreate-itest

Developing the 2.0 version of NetCreate
https://github.com/netcreateorg/netcreate-2018
Other
0 stars 0 forks source link

Add Descriptive ClassNames for Key GUI Areas #90

Closed dsriseah closed 8 months ago

dsriseah commented 8 months ago

The NetCreate.jsx main render() function is somewhat convoluted due to position:fixed dev elements and other layout chrome obscuring other elements, making it difficult to discern what is a "panel" in what column. This pull request adds className properties of the form --Element_Subelement so using Chrome's Inspect Element is easier to place within the GUI structure.

These are the top-level control areas in NetCreate

--AppShell
--AppShell_NavBar
--SessionShell_Login
--NetCreate
--NetCreate_Fixed_Top
--NetCreate_Fixed_Top_SaveAlert
--NetCreate_Rows
--NetCreate_Columns
--NetCreate_Column_Left
--NetCreate_Column_NetView
--NetCreate_Column_Break_Info
--NetCreate_Column_Filters_Open
--NetCreate_Column_Filters_Closed
--InfoPanel
--NCGraph
--NCNode_View
--NCNode_View_Tabs
--NCNode_View_Controls
--NCNode_Edit
--NCSearch

TO TEST

These are only classNames and some additional comments that do not change function, so there should be no effect on code operation.

You can use Inspect Element and find the containing DIV that has one of the classnames, then in VSCode use Find in Files to quickly find the file from which to start looking deeper.

dsriseah commented 8 months ago

UPDATE

I had removed the sendGa() method from the InfoPanel component because it looked like HTML script code that was accidentally put into React. It is buggy and breaks the linting rules, triggering warnings. I've rewritten and commented it as a courtesy to future developers who might have to work with it.

It appears to be called when someone clicks on a tab in the Graph / Nodes / Edges tabs at the top of the netgraph view as a form of logging using hacked-in analytics code in index.ejs.

Note that this code probably doesn't work anymore because UA has been retired and no longer is supported by Google. Your Google Analytics logger has to be updated to use GA4 Tag Manager.

benloh commented 8 months ago

Confirmed works.