Transform the SSVC calculator frontend to a reusable library

[ThomasJunk]

I am very fond of your product.

So I would like to integrate the SSVC calculator frontend part (DRYAD) into our product. But at the moment I am struggling how to do this. AFAICS there is a simple website which includes the calculating script. But to use your component in another software it looks like I have to cut out the parts that I want.

It would be nice to have a self-contained module / library component which allows external reusage in different applications.

Ideally the software would be stripped down to a minimal set of dependencies and toggleable functionality, e.g. removing the dependency of jQuery or Bootstrap or omitting the exporting part.

Is there any chance seeing this happen (ideally) in the (near) future?

[sei-vsarvepalli]

Hello @ThomasJunk

Thanks for your feedback. The calculator code has evolved has been mostly built for "show and tell" of SSVC and help people visualize and interact with an SSVC Decision Tree. The "Analyst" mode was made to be much simpler and likely can integrated into a third party site using ungraph.js https://github.com/CERTCC/SSVC/blob/main/docs/ssvc-calc/ungraph.js

A pure SSVC JS Library can emerge from this code quite easily. Most of the Analyst mode Radio button UI is generated from this section of taking our defined SSVC Decision Tree JSON into multiple choice Radio buttons.

https://github.com/CERTCC/SSVC/blob/2590cad7a192e014c311ab887bbc28b82b9b8363/docs/ssvc-calc/ungraph.js#L46

However it is hard to come up with a UI without reusable frameworks such as jQuery and Bootstrap. Native JS for doing all this is possible but cumbersome.

For your use case, I would start with ungraph.js and build from there. I will also put the word out so we can get help to do a SSVC JS Library to enable such an embedded site into a possibility.

Thanks Vijay

[sei-vsarvepalli]

The whole code to integrate to your website which has jQuery and Bootstrap already included looks like below

    <script src="ungraph.js"</script>
    <div id="ungraph">
      <table class="table table-borderless">
	<thead><tr id="ughtr"></tr></thead>
	<tbody><tr id="ugbtr"></tr></tbody>
      </table>
    </div>
    <script>
      let export_schema;
      let export_show = function() {};
      let plparts = [];
      let lcolors = {};
      $.getJSON("Deployer-v2.0.0.json").done(
	  function(d) {
	      export_schema = d
	      ungraph();
	  }
      );
    </script>

See this in action:

https://democert.org/ssvc/ungraph.html