[GSOC 2019] Weekly progress about netjsongraph.js

92 views
Skip to first unread message

YuFei Wang

unread,
May 18, 2019, 5:14:15 AM5/18/19
to OpenWISP
5.12 - 5.18：
a pull request: 
- fix some issues -- #45、#58、#53、#61
- add a js file -- netjsonWorker.js to deal with raw JSONData by WebWorker, unit test passed.

still doing：
- add two tests for netjsongraph.js, one for api and params specification and one for functions testing.

Federico Capoano

unread,
May 19, 2019, 2:12:35 PM5/19/19
to OpenWISP
Great work YuFei, what's going to be your next step?

How is the planning of issues and kanban board going?

Federico

YuFei Wang

unread,
May 20, 2019, 9:11:39 PM5/20/19
to OpenWISP
I'm writing tests for netjsongraph.js in netjsondemo, after that I think we need to discuss about how to improve the netjsongraph and perfect  kanban board in detail.
I think I still need about a or two days to complete it.
Or we can discuss in advance, what do you think?


在 2019年5月18日星期六 UTC+8下午5:14:15，YuFei Wang写道：

YuFei Wang

unread,
May 23, 2019, 11:14:48 AM5/23/19
to OpenWISP
5.19 - 5.25：
a  pull request -- refactor netjsongraph.js:
two mainly files -- netjsongraph.core.js and netjsongraph.render.js
the former deal with the NetJSON and the latter render the graph with data.

- add test for netjsongraph.core.js, coverage around 85%.
- add new examples using new netjsongraph.js
- add some experimental functions, such as dataParse、switchRenderMode and so on.

going to do:
- Try to optimize these experimental functions
- Add more new functions such as searching and update in real time. 


在 2019年5月18日星期六 UTC+8下午5:14:15，YuFei Wang写道：
5.12 - 5.18：

Federico Capoano

unread,
May 24, 2019, 10:27:07 AM5/24/19
to OpenWISP
Please open pull requests against this branch: https://github.com/openwisp/netjsongraph.js/tree/gsoc2019

And do not fill too much work in one pull request, open smaller pull requests more often.

Federico

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/c521c135-9bbf-42bf-907c-94d5e4f6cef2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

YuFei Wang

unread,
Jun 1, 2019, 10:13:47 PM6/1/19
to OpenWISP
5.26 - 6.1:

fix issues:

some new examples:

still doing: 
- prefect README
- prefect netjsongraph

在 2019年5月18日星期六 UTC+8下午5:14:15，YuFei Wang写道：
5.12 - 5.18：

Federico Capoano

unread,
Jun 3, 2019, 9:29:35 PM6/3/19
to OpenWISP
I'm still reviewing this update, I hope to be able to give you some feedback tomorrow.

Federico

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/788682e5-853a-4d67-8502-9045d9d81099%40googlegroups.com.

Federico Capoano

unread,
Jun 5, 2019, 8:08:38 PM6/5/19
to OpenWISP
On Sat, Jun 1, 2019 at 10:13 PM YuFei Wang <zhongl...@gmail.com> wrote:
I do not understand what this does exactly. Where is the date shown?

I expect to see the details of the node or link when I click on them.
In this one the connection to the websocket is failing:

socket.io.js:7 GET http://localhost:8078/socket.io/?EIO=3&transport=polling&t=Mig58TO net::ERR_CONNECTION_REFUSED
The labels of nodes in the SVG mode are superimposed to the nodes, do you see that?
I cannot see any node or link in map mode.
How to test this? Can you spend some time explaining these examples please?

Message has been deleted

YuFei Wang

unread,
Jun 6, 2019, 5:18:12 AM6/6/19
to OpenWISP
> I do not understand what this does exactly. Where is the date shown?
    
   The date dom is just shown at the right down corner. I provide the `dateParse` function in `utils` to handle date string, which will return the parse result and you can handle it freely.

> I expect to see the details of the node or link when I click on them.

   This's a bug and I fixed.
 
> In this one the connection to the websocket is failing

   Because you haven't open the port 8078. I have written in README that you must run `node index.js` under the `netjsonnode` folder to open it.

> The labels of nodes in the SVG mode are superimposed to the nodes, do you see that?

   Yeah, this seems a bug in Echarts, I'll try to improve it.

> I cannot see any node or link in map mode.

   I forgot adding css files haha.. Fixed ! 

> How to test this? ([NetJSON search elements Demo](https://kutugu.github.io/NetJSONDemo/examples/netjson-searchElements.html))

   I provide the `searchElements` function in `utils` to handle search operation. To use it, you should call this with the param of a API url firstly, and the return is a function that you can call it to search the JSON data when the user input something.
   In the demo, I open a fake server using postman. If you want to test, you can just input the `test` and click the `search` button. Certainly, it also support `go back`, just click the back button of browser.

YuFei Wang

unread,
Jun 8, 2019, 8:17:59 PM6/8/19
to OpenWISP

Federico Capoano

unread,
Jun 12, 2019, 4:26:28 PM6/12/19
to OpenWISP
On Thu, Jun 6, 2019 at 5:15 AM YuFei Wang <zhongl...@gmail.com> wrote:
> I do not understand what this does exactly. Where is the date shown?
    
   The date dom is just shown at the right down corner. I provide the `dateParse` function in `utils` to handle date string, which will return the parse result and you can handle it freely.

I see. Is the date format configurable? For example, can someone tell the library to use a date like June 12, 2019 instead of 2019.06.12?
 
> I expect to see the details of the node or link when I click on them.

   This's a bug and I fixed. 

Great, can you make the link line thicker please?
 
> In this one the connection to the websocket is failing

   Because you haven't open the port 8078. I have written in README that you must run `node index.js` under the `netjsonnode` folder to open it.

Ok.
 
> The labels of nodes in the SVG mode are superimposed to the nodes, do you see that?

   Yeah, this seems a bug in Echarts, I'll try to improve it.
 
Ok

> I cannot see any node or link in map mode.

   I forgot adding css files haha.. Fixed ! 


Ok I can see the nodes and links now, can we control the style of those? Can we make sure that by default the color is consistent with what we are showing in the logical map?

But it should be possible to use different colors on the two views (to adjust the fact that the geographic map has a different background). 
 
> How to test this? ([NetJSON search elements Demo](https://kutugu.github.io/NetJSONDemo/examples/netjson-searchElements.html))

   I provide the `searchElements` function in `utils` to handle search operation. To use it, you should call this with the param of a API url firstly, and the return is a function that you can call it to search the JSON data when the user input something.
   In the demo, I open a fake server using postman. If you want to test, you can just input the `test` and click the `search` button. Certainly, it also support `go back`, just click the back button of browser.


One more question, why do are chinese characters shown in the upper right corner when the mouse goes over the buttons there? Can you ensure everything is in english please?  

Federico Capoano

unread,
Jun 12, 2019, 4:34:07 PM6/12/19
to OpenWISP
On Sat, Jun 8, 2019 at 8:18 PM YuFei Wang <zhongl...@gmail.com> wrote:

Looks interesting, thank you.

Can you try to make the example use the full space of the page?

Can you also add a label for the different colors of the nodes?

We also need to be able to show different colors for links.
Good work.

Can we try to break up netjsongraph.core.js into more files if it makes sense? Not too many files, but if we can break it a bit more I think it would be good.

What is your next step? 

YuFei Wang

unread,
Jun 13, 2019, 12:02:00 PM6/13/19
to OpenWISP
> I see. Is the date format configurable? For example, can someone tell the library to use a date like June 12, 2019 instead of 2019.06.12?


> Can you make the link line thicker please?
> Can we control the style of those? 

Yeah, we can control colorful styles according to the params -- nodeStyleProperty、linkStyleProperty：https://github.com/KuTuGu/netjsongraph.js/blob/b51355c921932f9502599d9aa2a9976aa1c93473/src/js/netjsongraph.core.js#L17-L18
And because we use canvas render, so we can't custom the style by `css class`, but the specific format in echarts like the link I writed in the commented code.

> Can we make sure that by default the color is consistent with what we are showing in the logical map?

I'll try to do this.

> Why do are chinese characters shown in the upper right corner?

Fixed. And now it's also a param we can custom.

> Can you try to make the example use the full space of the page?

Fixed.

> Can you also add a label for the different colors of the nodes?
> Can we try to break up netjsongraph.core.js into more files if it makes sense?

Ok, I'll do.

Federico Capoano

unread,
Jun 14, 2019, 7:52:15 PM6/14/19
to OpenWISP
On Thu, Jun 13, 2019 at 12:02 PM YuFei Wang <zhongl...@gmail.com> wrote:
> I see. Is the date format configurable? For example, can someone tell the library to use a date like June 12, 2019 instead of 2019.06.12?


> Can you make the link line thicker please?
> Can we control the style of those? 

Yeah, we can control colorful styles according to the params -- nodeStyleProperty、linkStyleProperty：https://github.com/KuTuGu/netjsongraph.js/blob/b51355c921932f9502599d9aa2a9976aa1c93473/src/js/netjsongraph.core.js#L17-L18
And because we use canvas render, so we can't custom the style by `css class`, but the specific format in echarts like the link I writed in the commented code.

Ok great!

Can you prepare an example with slightly thicker links and with links of different colors (eg: red and dark green) and a legend?

YuFei Wang

unread,
Jun 14, 2019, 9:57:57 PM6/14/19
to OpenWISP
> Can you prepare an example with slightly thicker links and with links of different colors (eg: red and dark green) and a legend?


6.9 - 6.15:
- perfect pr #73:
    - refactor netjsongraph.core.js, break up into small files: https://github.com/openwisp/netjsongraph.js/pull/73/commits/e859104d5ea3df57551fe4e5a2e2ed26d18c8d2a
- test new feature -- animation map:

going to do:
- merge `render.dev.js` into `render.js`
- synchronize new features to `netjsongraph.js`

Federico Capoano

unread,
Jun 16, 2019, 10:57:34 PM6/16/19
to OpenWISP
Anything urgent to review or merge?

Fed

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/1fc69cb4-f19f-4bfb-9d5b-3e62fa4d4092%40googlegroups.com.

YuFei Wang

unread,
Jun 17, 2019, 12:41:09 AM6/17/19
to OpenWISP
> Anything urgent to review or merge?
After that i can create a new one for netjsongraph render.

Federico Capoano

unread,
Jun 17, 2019, 1:25:30 PM6/17/19
to OpenWISP
There are some comments on https://github.com/openwisp/netjsongraph.js/pull/73/, please review and let us know.

Fed

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/cc3dfea7-a853-4774-aaa0-7af594a728cb%40googlegroups.com.

Federico Capoano

unread,
Jun 23, 2019, 10:05:05 AM6/23/19
to OpenWISP
On Mon, Jun 17, 2019 at 1:25 PM Federico Capoano <federico...@gmail.com> wrote:
There are some comments on https://github.com/openwisp/netjsongraph.js/pull/73/, please review and let us know.

The PR is merged. Thanks.

Other updates on netjsongraph.js front?

Fed

YuFei Wang

unread,
Jun 23, 2019, 10:52:32 PM6/23/19
to OpenWISP
6.16 - 6.23:

Progress:
- make a new pr for map animation: https://github.com/openwisp/netjsongraph.js/pull/74
- make a new branch for nodes expand or fold: https://github.com/KuTuGu/netjsongraph.js/tree/dev-nodeExpand

- examples for above characters:

To do:
- perfect the branch dev-nodeExpand for nodes expand or fold
- do some exploration with `shinglejs` library







YuFei Wang

unread,
Jun 29, 2019, 8:28:23 AM6/29/19
to OpenWISP
6.24 - 6.29:

Progress:
- perfect nodes expand or fold example -- perfect the legend position and node data.  https://github.com/KuTuGu/NetJSONDemo/commit/6a81e6fb3f5ca3b7bfe86809ab53e36f4d81abf9
- add the example of node tiles, which can update data dynamically when you zoom in or out. https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-nodeTiles.html

To do:
- perfect the README：
       - list the json data format used in `netjsongraph.js` internally in detail, not `netjson`.

And I urgently need specific advice about what I should do next.

YuFei Wang

unread,
Jul 7, 2019, 2:41:04 AM7/7/19
to OpenWISP
7.1 - 7.7:

Progress:
- Prefect examples: 
    - add related code comments in detail in examples. https://github.com/KuTuGu/NetJSONDemo/commit/9dcb3a8c0ddd6c716c20ecc34e91c62247667741
- Prefect README: introduce the json format used internally and modify the examples under the new format. https://github.com/KuTuGu/NetJSONDemo/commit/1a08351e5f6f7ec7ad1bcbe4bbdf5d23909e2d82

To do:
Fix bugs in netjson indoor map example when zoom in or out. It seems the question of `echarts-leaflet` library. I'm reading the source code trying to solve it.

YuFei Wang

unread,
Jul 13, 2019, 6:58:53 AM7/13/19
to OpenWISP
7.8 - 7.13: 

Progress: 
- Fixed bugs in indoor map when zoom or move: https://github.com/KuTuGu/NetJSONDemo/commit/4772033ce90572f34339e48bf8982050c045dc65
- Fixed some default configs in rendering: https://github.com/KuTuGu/netjsongraph.js/commits/dev-nodeExpand

Two indoor map examples:
- https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap.html, align with the center of the screen when initializing.
- https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap2.html, image's positioned based on geographic coordinates.

Doing:
- Try to fix the errors when calling the leaflet plugins

Federico Capoano

unread,
Jul 15, 2019, 4:31:07 PM7/15/19
to OpenWISP
On Sat, Jul 13, 2019 at 6:58 AM YuFei Wang <zhongl...@gmail.com> wrote:
7.8 - 7.13: 

Progress: 
- Fixed bugs in indoor map when zoom or move: https://github.com/KuTuGu/NetJSONDemo/commit/4772033ce90572f34339e48bf8982050c045dc65
- Fixed some default configs in rendering: https://github.com/KuTuGu/netjsongraph.js/commits/dev-nodeExpand

Two indoor map examples:
- https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap.html, align with the center of the screen when initializing.
- https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap2.html, image's positioned based on geographic coordinates.

Ensure the controls to zoom in and out are present in the examples.
Please align the points in the indoor map to some visual elements so the example makes more sense, for example: put some points on the center of some tables, on some walls.
Can you add a loading indicator while the indoor map loads please? This may be useful also any time anything needs to be downloaded.
 
Doing:
- Try to fix the errors when calling the leaflet plugins

How can this issue be replicated? 

YuFei Wang

unread,
Jul 16, 2019, 7:19:24 PM7/16/19
to OpenWISP
> Ensure the controls to zoom in and out are present in the examples.
Fixed.

> Please align the points in the indoor map to some visual elements so the example makes more sense, for example: put some points on the center of some tables, on some walls.
Modified the location of some nodes. You can see here: https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap.html

> Can you add a loading indicator while the indoor map loads please? This may be useful also any time anything needs to be downloaded.
Added. Loading is now displayed when loading or updating data.

> How can this issue be replicated? 
This is a previous library error that has been modified.

Federico Capoano

unread,
Jul 17, 2019, 7:08:22 PM7/17/19
to OpenWISP


On Tuesday, July 16, 2019 at 7:19:24 PM UTC-4, YuFei Wang wrote:
> Ensure the controls to zoom in and out are present in the examples.
Fixed.

Can you move the controls to the upper right corner please? 

It doesn't matter that when the node details are open it will cover the controls, I think that it would be better to show the node details in the center of the screen but we can do this in a later step.
 
> Please align the points in the indoor map to some visual elements so the example makes more sense, for example: put some points on the center of some tables, on some walls.
Modified the location of some nodes. You can see here: https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-indoormap.html

Nice, what is the examples which only shows the indoor map and does not show at all the geographic map? 
 
> Can you add a loading indicator while the indoor map loads please? This may be useful also any time anything needs to be downloaded.
Added. Loading is now displayed when loading or updating data.

I see it, can you add some kind of animated indicator?

YuFei Wang

unread,
Jul 20, 2019, 4:19:37 PM7/20/19
to OpenWISP

YuFei Wang

unread,
Jul 27, 2019, 6:39:13 PM7/27/19
to OpenWISP
7.21 - 7.28:
Progress:

modify the line style to support multiple line segments:

try to optimize performance by `graphGL`:

To do:
- Optimize the fluency of movement and zoom
- Try to optimize functions performance

YuFei Wang

unread,
Aug 3, 2019, 8:21:27 AM8/3/19
to OpenWISP
7.29 ~ 8.3
Progress:

Optimize the fluency of zoom:
- According to the built-in zooming function - `updateViewOnZoom` of `echarts`, but the scale is uncontrollable because `leaflet` and `echarts` have different scaling, and this function also causes nodes bigger, so it should be NOT available.
- Reading the source code of `updateLayout`, trying to understand the key to the re-rendering of `echarts`.

Update README, adding more detail and codes of new features.

Federico Capoano

unread,
Aug 3, 2019, 5:17:55 PM8/3/19
to OpenWISP
Hey Yu,

can you send the example of the multiple links between two nodes?

Why do I see the lines in the geographic map curved? Are they always like that or can they be straight?

Federico

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/e1089ea1-4b3f-4435-b718-c81f24287da1%40googlegroups.com.

YuFei Wang

unread,
Aug 5, 2019, 5:15:46 AM8/5/19
to OpenWISP

> Why do I see the lines in the geographic map curved?

In order to display multiple links, we have to use curved link. Of course you can modify it.
Just you said that it should be curved by default. This should be the minimum curvature that can display multiple links.

YuFei Wang

unread,
Aug 5, 2019, 5:17:55 AM8/5/19
to OpenWISP
I didn't add too many multiple links in examples, so it's not very obvious. 
I can make a special example if needed.

YuFei Wang

unread,
Aug 9, 2019, 5:58:47 AM8/9/19
to OpenWISP

YuFei Wang

unread,
Aug 17, 2019, 7:40:24 PM8/17/19
to OpenWISP
8.10 - 8.17:

Progress:



- add new example: http://localhost:8080/examples/netjsonmap-appendData.html, which allows us to add new elements after rendering

- prefect examples:
      - fix multipleLinks example
      - fix: delete element hover detail
      - fix: modify loading animation

YuFei Wang

unread,
Aug 17, 2019, 7:47:01 PM8/17/19
to OpenWISP
Sorry, the new demo link is: https://kutugu.github.io/NetJSONDemo/examples/netjsonmap-appendData.html !

在 2019年8月18日星期日 UTC+8上午7:40:24，YuFei Wang写道：

Federico Capoano

unread,
Aug 18, 2019, 9:30:04 PM8/18/19
to OpenWISP
Can you explain more about of the last demo you posted?
Eg: What is supposed to do and what are the use cases?

--
You received this message because you are subscribed to the Google Groups "OpenWISP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openwisp+u...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/openwisp/aaa6364b-6484-4980-b593-52f3b2e35067%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages