maibornwolff / codecharta

CodeCharta visualizes multiple code metrics using 3D tree maps.

CodeCharta

a beautiful tool to help you visualize and understand code in 3D.

Latest Release:
Analysis 1.125.0 | Visualization 1.126.0

Key Features • Experimental Features • How To Use • Feedback • Further Info • About

Key Features

• CodeCharta Visualization:

  • CC visualizes code bases as 3D cities, so that you can understand it - view the Web Demo.
  • It uses code metrics from .cc.json files.
  • The imported files are validated using JSON Schema as defined in generatedSchema.json.
  • You can change the way the file is displayed and save and later load it as a Custom View.

• CodeCharta Analysis:

  • CC Analysis is used to calculate or to import metrics from third party tools for a code base.
  • It generates .cc.json files for CC Visualization through a Command-Line-Tool.
  • It includes some pre-defined importers for e.g. SonarQube, SourceMonitor, Git, generic CSV data
  • It also includes commands to validate and merge multiple .cc.json files.

Requirements

For using CodeCharta the following needs to be installed on your system:

• Node >= 18
• Java >= 11, <= 21

How To Use

How to use Visualization?

• Online: You can try the web visualization without any installation and explore the CodeCharta code (shown by default).
• Local: See here.

How to use Analysis?

• Analysis is split into different parsers that generate .cc.json files. To run these parsers you need the CodeCharta Shell.

In this example we will generate a .cc.json from JUnit4 using the Source Code Parser (that parses java projects).

# Install codecharta-analysis globally
$ npm i -g codecharta-analysis
# Clone the junit4 repository
$ git clone https://github.com/junit-team/junit4
# Parse sources with CodeCharta Shell
$ ccsh sourcecodeparser junit4 -p junit4 -o junit4.source.cc.json
# Now you can upload `junit4.source.cc.json` to CodeCharta Visualization

Note If you want to be guided through selecting the arguments. Just execute ccsh and you can run the parsers interactively with dialogs.

Feedback

Have a bug, a feature request or any question? Please open a new issue. Feedback is always welcome.

Want to know what we are working on? Please check out our board or install the Zenhub Firefox/Chrome plugin.

Want to have even more information? Please check our news.

Further Information

• Docs
• Quickstart Guide
• Coverage
• Sonarqube Visualization
• Sonarqube Analysis

About CodeCharta

• Releases
• Analysis - Changelog | Visualization - Changelog
• Contributing
• Code of Conduct
• License

License

MIT

---

maibornwolff.de  ·  GitHub @MaibornWolff

codecharta's Issues

Simple cc.json does not display anything

test.txt
test2.txt

I generated a very simple json file consisting of only one node and two metrics (blabla and blubblub). When I open this file in the online demo at https://maibornwolff.github.io/codecharta/visualization/app/ it has no selected metrices and it shows two nodes "root" and "Parent Leaf". If I choose one metric it shows nothing.

I also tried a different file with the same result.

SonarImporter crashes when you url ends with "/"

When you use the SonarImporter to get metrics from your SonarQube-Server, it crashes when the url to the server that you pass as a parameter ends with an "/", as the SonarImporter itself always adds a "/" when fetching the available metrics from the server, resulting in a Url that looks like this: http://www.example.com//metrics/search...

slider input

sliders should offer an additional textbox to allow precise value input

DetailPanel word wrap the shown path

For large projects the path to a file might be very long. Too long for the detailPanel, when the Selected- and Hovered-field cover half the map. It also gets almost impossible to navigate through the map.

Allow inversion of delta colors

Scaling sliders should have fixed values

As a user, I would like to have fixed values for the scaling sliders. For example, I can't choose a scaling of 2, only 1.996 and 2.013.

Fixing the sliders to 0.05 or 0.1 per step would spare a user the struggle of not getting that perfect 2.0

Multiple cc.json in one view

A filter which aggregates multiple cc.json files in order to show them in a single view.

e.g. combining a.json, b.json and c.json results in aggregate.json with a root node which has the children a.json, b.json and c.json with all the related data.

Migration from Java to Kotlin in analysis

Hi all,

I'd like to discuss unifying the language in the analysis part to Kotlin. I think it would be good to have one language only for the analysis and I think Kolin is mature, easy to learn and some major improvements compared to java. Furthermore, it is rather easy to migrate from java to kotlin.

Please vote.

Project / Directory summary

It would be Great to have some summary in the visualization concerning the number of Buildings in a package. The number of changed, added, deleted buildings in Delta mode. This would have helped with debugging. What do you think?

Merging two integer values results in a floating point value

From #44:

Merging two integer values results in a floating point value. I do not think this will cause further problems in visualizing the data but it should result in an integer value just to be formally correct.

I merged this file with itself:
{ "projectName":"Res", "apiVersion":"1.0", "nodes": [ { "name":"root", "type":"Folder", "attributes":{}, "children":[ { "name":"A", "type":"File", "attributes":{"a":0, "b":1}, "children":[] } ] } ] }

result has "b":1.0

Delta view not working for bigger trees

There seems to be a performance problem with the delta view (CC V 1.9.3), which prevents delta view from being usable on bigger trees. I would have liked to use the delta view on a node tree of size 4175. When loading multiple files (5) and switching to delta view the browser (chrome) hangs and times out. Using a different project with 15000 nodes it even doesn't work for one file loaded.

UI concept

Description

The current UI concept is not very extensible. To be able to manage and visualize many control elements or even allow user view preferences, a rework of the user interface is necessary.

Implemented

• comprehensive solution to map selection in delta mode

Proposals

Golden Layout

This layout is a "docker" layout which allows to resize, arrange, align, hide and show components.
A rough proof of concept is implemented on this branch.

General UI Rework

This is a proposal for an UI rework. Main focus were unified views and a comprehensive solution to map selection in delta mode. The working branch is here.

Performance while using sliders

using sliders triggers full map rebuild -> performance issues -> crash

Linux Package + release

After moving the npm package to a scoped package name "@maibornwolff/codecharta-visualization" our nwjs build fails. It tries to rename the executable file to the name with "@.../..." and therefore mv tries to move it to a folder named "@...". The nwjs packager allows to override this behavior for Windows and Mac but not for Linux.

Add more guides/tutorials

Adding more guides, tutorials or full use cases like the sonarqube one should make CodeCharta easier to for users.

Clean up UI

There are some elements in the UI that I think are not needed. Probably these should be separate issues. For that. Anyway, I would like to discuss them with you:

1. Scaling is probably only needed for the height of the buildings. I can think of no use case with scaling the other axis separately and simultaneous scaling corresponds zooming, I think. Changing the name of y to height would improve understanding. I think choosing absolute values for scaling should not be necessary.

2. It would be great to have a different symbols for scenarios and metrics.

3. I would rather put the statistic functionality to experimental as I don't have a use case for it as of now (have you?).

4. Having the same icons in the legend and in the hover info would be great. There is also a misplaced "," in the legend.

5. It would be great if the legend wouldn't show the delta symbols when in "normal" mode.

6. The tree view shows some strange bar on the right side. Is there any meaning behind this?

show all metrics for selected/hovered building

The detail panel should show all metrics. Not only the selected ones.

make it easier to find out to which package/folder a class belongs

two ideas for this goal (both could be implemented, it's not an xor)

1. add a slider or similar to change the margin/padding between buildings. then it would be easier to hover the ground of a block
2. add a tooltip for the name of the selected block showing the complete path and not only the leaf element.

Filtering old files in SCMParser

When creating a visualization of a project using the SCMParser I usually don't want to see files that were already deleted in the project but are still contained in the git log. Therefore I'd like to suggest a toggle in SCMParser which let's you ignore files that were deleted and not recreated. I think this should even be the standard case.

add slider controls for color thresholds

I loved the old feature in an earlier version that allowed me to adjust the two neutral color thresholds using slider controls because you could do a kind of "interactive sensitivity analysis" (how save are my thresholds? how much turns red if i move the slider a little? is there a discrete limit to make the whole map red or is it continuous? etc).

I'm aware that this is not an easy feature request because we would need to now min and max for each metric. So I won't be too disappointed if it gets rejected but please at least have a look at it, thanks! ;)

Delta View shows Deltas of itself as non-trivial if nodes have same name

I'm using the delta view of the current (i.e. 1.9.3) visualization version with the attached data. There seems to be a bug, if two nodes have the same name (although in different parts of the directory tree):

• If compared to itself it shows a delta for the bigger one of the nodes with values (bigger - smaller). I expected it to show no difference.
• If compared to a different file it still shows this difference, no matter if this file exists in the other version, if it has changes in the metric, etc. etc.

Maybe related to #60 ?

nodesWithSameNames.txt

Invert Hight

The user usually sees high buildings first. In order to be able to emphasize on small building (e.g. when a low value is bad) we need to enable hight inversion.

Add a specialized symbol for newly added/removed nodes

As a result of #92 it would be good to visualize added/deleted nodes with a special, metric-less, symbol. This would make them always visible (not only with unary area) and create a clear distinction. Another problem is assuming that the metrics are 0. 0 is not a "non existant" value e.g. a new file would be very good in terms of "number of bugs".

Duplicated NPM packages

Check https://www.npmjs.com/org/maibornwolff:

https://www.npmjs.com/package/@maibornwolff/codecharta-visualization -> v.1.8.2

vs

https://www.npmjs.com/package/codecharta-visualization -> v.1.9.3

CodeCharta gradle Plugin

We are using CodeCharta in build pipelines. It would be great if we could use our build tool (gradle) for creation of the cc.json file. In my opinion this would be a good way of defining the cc pipeline.

Different root for git log and sonar import

Sonar Importer and Git Log Parser produced a different root for the same project.
TODO: provide example data

legend is wrong

when i set color thresholds to neutral start = 1 and neutral end = 3,

legend shows:
green = 0-1
yellow = 1-3
red = 3-infinite

however correct would be
green = <1
yellow <=3
red > 3

When I start visualization providing parameters for file, metrics, colors, i have to click "invert colors" twice to get the (not inverted) colors displayed correctly

v 1.3.2

Scaling should not scale the labels

The building labels get scaled by scaling the map. This is not the correct behavior since it makes labels hard to read.
At this moment Labels/Lines get added to the root node of our scene and scaling scales the root and its children.
To achieve the correct behavior we need to scale just the buildings and recalculate the labels positions and constraints.
A quickfix would be to recalculate the whole scene on scaling changes. This is not recommended because it will cause a lot of performance issues on bigger maps (the scale slider would cause a lot of scene rebuilds).

Full delta for new Files not working

There was a nice feature that visualized new files completely green (or in some different color). I tested it on the current (1.9.3) version in Chrome and it didn't work for my data. Is this feature still activated?

SettingsPanel labels

Inside the settingsPanel the labels are too low and inside the dropdown-menus.

Opening the same file a second time does not work

Step 1: Choose a file to visualize via the "Open File" menu
Step 2: Change this file (e.g. new analysis) while keeping the visualization running
Step 3: Try to load the same file again vie the "Open File" menu. As the filename doesn't change, a reload of the map is not triggered. You have to reload the visualization or choose another cc.json file for it to work again.

Native Application support is bugged while building in Travis CI

Link to log
Link to commit

An error appears while decompressing the nwjs archives. This leads to a failed build. A temporary solution is uploading those packages manually.

Treeview

In order to find and filter the desired files and folders it is necessary to see them in a structured tree. As of now the implementation allows collapsing and filtering of nodes.
The performance in big maps like firefox is a blocking issue.

Planned features are:

• selecting and hovering in list toggles the correct node in 3d view and detailpanel
• textbox for searching (regex ?)
• somehow mark files from another map (delta view)
• make it scrollable
• ?

Any feedback and improvement ideas are welcome.

The development branch is this one.

Unable to install due to readlink error on macOS

ccsh install does not work on macOS in Version 1.1.0.

./ccsh install
readlink: illegal option -- f
usage: readlink [-n] [file ...]

Sonarimporter crashes with null pointer exception when there is a component without path.

concerning sonarimporter v1.1.3:
If the project in SonarQube has a component without path information then there is the following null pointer exception:

Exception in thread "main" java.lang.NullPointerException
at de.maibornwolff.codecharta.importer.sonar.SonarComponentProjectAdapter.createNodeName(SonarComponentProjectAdapter.java:63)
at de.maibornwolff.codecharta.importer.sonar.SonarComponentProjectAdapter.addComponentAsNode(SonarComponentProjectAdapter.java:24)
at io.reactivex.Flowable.blockingForEach(Flowable.java:5274)
at de.maibornwolff.codecharta.importer.sonar.SonarImporter.getProjectFromMeasureAPI(SonarImporter.java:37)
at de.maibornwolff.codecharta.importer.sonar.SonarImporterMain.doImport(SonarImporterMain.java:82)
at de.maibornwolff.codecharta.importer.sonar.SonarImporterMain.main(SonarImporterMain.java:66)

changing display or color settings resets zoom

when I change (at least) invert colors or toggle delta cubes, (at least) the z axis zoom is reset. however, the UI control for this zoom is not updated.

Assign custom colors to color range

Description

Assigning custom colors to the color range spectrum would allow users to visualize edge cases where e.g. both edges can have the same color.

Definition of Done

A task/pull request will not be considered to be complete until all these items can be checked off.

• All requirements mentioned in the issue are implemented
• Does match the Code of Conduct and the Contribution file
• Task has its own GitHub issue (something it is solving)
  • Issue number is included in the commit messages for traceability
• Update the README.md with any changes/additions made
• Update the CHANGELOG.md with any changes/additions made
• Enough test coverage to ensure that uncovered changes do not break functionality
• All tests pass
• Descriptive pull request text, answering:
  • What problem/issue are you fixing?
  • What does this PR implement and how?
• Assign your PR to someone for a code review
  • This person will be contacted first if a bug is introduced into master
• Manual testing did not fail

Flickering surfaces

Hey,

looks like there are issues with occlusion, when values are very low. When you rotate the treemap in space the surfaces of some of low valued blocks start flickering.

This kind of "flickering" usually happens when two polygons share points in space or are very very close to each other and the occlusion culling algorithm cannot determine which surface is in front of the other (see https://en.wikipedia.org/wiki/Hidden_surface_determination)

Regards
Johannes

changing to scenario loads default map

Using the newest source code version. When I load a file other than the sample.json and push the default scenario button the ui shows the map for the sample.json. I would expect that it shows the map with the currently loaded json.

sonarimporter is limited to 15 metrics

In current version sonarimporter is limited to 15 metrics. I would like to have more.

Delta shown although not in delta mode

Although I'm not in Delta mode and I only imported one single cc.json into the application there is some mysterious Delta value showed in the details. Please see the screenshot. Json file can be provided if necessary.

No underscore for scenarios in tooltips

Due to the implementation of the substitution algorithm in the tooltips service it is not possible to have a meaningful description for scenarios with metrics that have underscores.

For example for
"Coverage": "rloc/mcc/line_coverage with color range (50,75) \n rloc: rloc \n line_coverage: line_coverage"

Dependency information in json schema

Hi all.

I'd like to re-address our discussion about the dependency information in the json schema before we put more work into it.

I can think of two major ways to implement this:

1. Save it as edge information independent from node information.
2. Save it as part of the information of a node.

Which way to implement this is probably dependent on the way we want to visualize the dependency. @silasg was suggesting a different visualization from that implemented now. I think there are some advantages to them and probably the second implementation for the schema is in this case preferable.

@silasg suggested having another independent view like the delta view that maps the dependency and weights on the dependency via the color of the nodes. Therefore the dependency could be modeled through another attribute on the node which is a hash map from selected incoming dependency and weight. I think this kind of visualization is more appropriate for our imminent use cases.

My intuition tells me that the second implementation for the schema perform better in the case we use this visualization and would also isolate the information for one node in one position. I this case dependency information is just a filter for the attributes. I think there could also be other attributes we could put a filter on.
On the other hand, if we want to have a visualization like now or some other that is concerned with the origin of the dependency, the first way to implement the schema is probably better.

My question, especially to @mrpatpat:
a) What's your opinion on the suggestion for a visualization of @silasg?
b) Using this visualization, do you think there is a measurable performance difference between the different implementations?
c) Is the implementation of the visualization easier using one or the other schema?

Keeping Settings when loading new files

At the moment the url is the only possibility to save visualization settings, e.g. margin, perspective, scale etc. I think it would be great if loading a new file would not change the pre-selected settings.

Also, it would be great if it were possible to open delta maps via url, if e.g. automatically comparing maps between two commits.

SonarImporter only imports some metrics

I was using the SonarImporter on a project having rloc as metric provided by SonarQube. But the metric didn't appear in the json file. There were only the following metrics:
"sonar_confirmed_issues", "sonar_classes","sonar_complexity_in_functions","sonar_cognitive_complexity","sonar_code_smells","sonar_bugs","comment_lines","mcc","commented_out_loc","sonar_comment_lines_density","sonar_class_complexity","sonar_complexity_in_classes"

Jump to file / source code

Most data in CodeCharta correspond to files in a path. It would be super cool to have some sort of mechanism to jump to this specific file. For example, if I am visualizing a software system it would be cool to jump to the source code.
In a former release there were links to SonarQube. Something like that for local files would be helpful.

Error while compressing the osx app

The grunt task "compress:osx64" in this file causes the following exception on travis.ci:

Warning: unable to stat srcFile (dist/packages/CodeCharta/osx64/CodeCharta.app/Contents/Versions/58.0.3029.81/nwjs Framework.framework/Helpers)� Use --force to continue.

A few solutions suggest adding "expand: true" to solve this problem but it is already set and does not solve it.

scenario description

When I hover over the scenario rloc/mcc/mcc of the most recent build it shows "no description". I would expect that it shows a real description.

Performance of tool tips

It takes too much time for the tooltips to show for metrics and scenarios (in the online demo). I tried it with npm run serve and they seem to be shown not at all. Any ideas what is causing this?