Background:
You'll need knowledge of Vue.js (version 2), as well as at least general acquaintance with D3 libraries and SVG, as well as (if applicable) the Cytoscape.js library. Please refer to this in this article about the synergistic interplay of Vue and D3.

Typical work flow:

1. develop or expand a Vue component (.js file) and its .css counterpart. For the components, use names such as "vue_heatmap_11". Directory of current Vue components
2. as much as possible, use existing D3 libraries; when not possible, use or expand the in-house library SVG Helper
3. demonstrate functionality with a self-standing XYZ_test.htm file

(Note: we use the "template literals" format for Vue components, which is very readable and requires no file compilation. It's discussed, in the context of various alternatives, in this excellent article: 7 Ways to Define a Component Template in Vue.js)

Recommended protocol: duplicate, and change the name, of the 3 files, .js, .css and _test.htm, for the component you want to edit – or for the one most similar to the new component you want to develop.

Final Result:
At the end of your development, you should have a Vue graphic component that can be demonstrated in its XYZ_test.htm file.

Background:
"Vue components" are graphic modules that can be invoked from python files by means of the Python library `HtmlLog`. That library permits the creation of "HTML logs" (.htm files) that can be opened with any browser, and can embed the graphic element(s) and text sent to the log in the run of a python file.

Typical work flow:

1. Identify the _test.htm file that was used by the creator of the Vue component (graphical module), for the component of interest. Location of those files.
2. Test an existing visualization component by creating a Python file, under `experiments/visualization/logs_with_Vue_component_tests`
   
3. Use names such as "vue_heatmap_11.py" to indicate a Python test based on the visualization module "vue_heatmap_11"
   
4. Duplicate an existing python file in that folder, and use it as a template. Note that the files make use of the convenient Python library `HtmlLog`
   
5. Change the values of the COMPONENT_NAME variable at the top, where it says   # CHANGE AS NEEDED
6. Further below in the python file, in the definition of the all_data dictionary, change the data for the plot. Use arbitrary data hardwired in the python file; refer to the appropriate _test.htm for examples of data names and values.
7. Run the python file and verify that the HTML log is created with the corresponding .log.htm name; in the above example, "vue_heatmap_11.log.htm" (note: if using PyCharm, or perhaps other IDE's, you may need to refresh the view of the Project files.)
8. Open that log file with a browser, and inspect the correctness of the embedded graphic element(s), often also containing interactive controls.
9. Troubleshooting: in case of a missing or incorrect display of the graphic element(s), press F12 on your browser, to view the JavaScript console. Also, view the page source of the HTML file with the log, and verify that all CSS and Javascript links work.
   Compare your log file with the original _test.htm file that accompanied the Vue component, in the directory of Vue components. Your log file ought to largely re-create that HTML file, with some differences in paths of embedded file names.

Final Result:
At the end of your development, you should have a Python file that, when run, creates an HTML file with a name such as XYZ.log.htm ; that log file, when opened in a brower, should correctly display the graphic element(s).
GOAL: Users running experiments in Jupyterlab notebooks will be able to refer to the python test files, in case their graphics don't show up as expected.