Clarity Tree View expand/collapse icon disappears when adding dojo.js to index.html

Question

We have a working Angular 4 application which uses Clarity's Tree View. We've been very happy with this control and we would like to continue using it.

Recently, we've added another (non-angular) component to the application which requires dojo.js. We're importing dojo.js from index.html like this:

<script type="text/javascript" language="javascript" src="/dojo/dojo/dojo.js"></script>

Alas, when this import is added, the expand/collapse arrow/caret image on expandable tree nodes no longer appear.

Comparing the two rendered pages, I've found that the clr-icon element in the final DOM no longer contains a nested svg element. The missing svg element looks like this (some text replaced with ellipis by me):

<clr-icon ...>
<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="..." xmlns:xlink="..." focusable="false" role="img">
  <title>angle</title>
  <path class="clr-i-outline clr-i-outline-path-1" d="..."></path>
</svg>
</clr-icon>

My current hypothesis is that the introduction of dojo.js causes a namespace collision which prevents some bit of "insert SVG elements" code from running.

How can the SVG element be restored while continuing to import dojo.js from index.html?

Hi there, we don't recommend an additional framework with clarity. I'm sorry but I'm not familiar with dojo.js, can you expand on what it offers for your application? — hippeelee, Jan 17 '18 at 01:19
The other component is an advanced data visualization tool. Dojo is a javascript framework that they use to implement part of their tool. — Drew, Jan 17 '18 at 17:16
Can you point me to where/how Clarity inserts the SVG tags into the DOM? I may be able to track down the conflict from there... — Drew, Jan 17 '18 at 17:17
Clarity Icons (separate from the UI and Angular packages) lives here: https://github.com/vmware/clarity/tree/master/src/clr-icons It creates custom elements for the svg's. — hippeelee, Jan 17 '18 at 20:58

score 0 · Answer 1 · answered Jan 19 '18 at 06:16

You can try to use dojo.js NPM package from here: https://www.npmjs.com/package/dojo.

Although I never used dojo.js with our vmware-clarity solution, we used other Javascript libraries like dimple.js and vis.js in that fashion.

In package.json, you add the dependency.

"dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    ...
    "dimple-js": "^2.1.4",
    "vis": "^4.20.1",
    ...
  },

This will install the node modules.

Following is an example of how we used vis.js.

import {Component, Input, OnChanges, OnDestroy, OnInit, Output,EventEmitter, SimpleChanges} from "@angular/core";
import {DataSet, Edge, IdType, Network, Node} from "vis";

@Component({
...
})

export class DemoComponent implements OnInit, OnChanges, OnDestroy {

...

    ngOnInit() {
        this.onRefresh();
    }

    onRefresh(){
        ...
        var container = document.getElementById('network');
        var data = {
             nodes: this.nodes,
             edges: this.edges
        };
        var options = {
             width: '1000px',
             height: '450px',
             ...
        };

        this.network = new Network(container, data, options);
        var initPosition = {
            scale : 0.8
        };

        this.network.moveTo(initPosition);
    }

    ngOnChanges(changes: SimpleChanges) {
         if(...){
              this.onRefresh();
         }
    }

    ngOnDestroy() {
    }
}

I hope this helps.

Clarity Tree View expand/collapse icon disappears when adding dojo.js to index.html

1 Answers1