FeatureViewer React Component

[mjoppich]

Hi,

I have recently found Feature Viewer and really like it I finally found a nice d3-based genomics visualization tool.

Since my framework I am developing is based on TypeScript + React (+Webpack + Bootstrap v4), I created a compatible version of your FeatureViewer (if you are interested, I will push it to my fork as soon as I got it working without below error).
It seems to work for most parts (I am only using the visualization part, not the NeXtProt part), but there's one error I cannot get away:

TypeError: d3_selection__WEBPACK_IMPORTED_MODULE_3__.event.target.__data__ is undefined

Which seems to originate from

started brush.js:296 contextListener/< on.js:27 FeatureViewer.prototype.forcePropagation/< contextListener/<
which is the forcePropagation function, which I needed to rewrite a bit to make it work with TypeScript:

`
forcePropagation(item) {
var self=this;

        item.on('mousedown', function () {
            var brush_elm = self.svg.select(".brush").node();

            var eventData = new MouseEventData();
            eventData.pageX = d3.event.pageX;
            eventData.clientX = d3.event.clientX;
            eventData.pageY = d3.event.pageY;
            eventData.clientY = d3.event.clientY;

            var new_click_event = new MouseEvent('mousedown', eventData);

            if (brush_elm) {
                brush_elm.dispatchEvent(new_click_event);
            }
        });
    }

`
Now, you know the Feature Viewer better than me, do you have any idea what could go wrong there and result such an error? I also wonder what this mousedown-event should be doing?

Thanks for you help!

[sacdallago]

In general: would you consider making this package more react friendly? Another consideration in this regard is that there's a heavy reliance on Bootstrap to render the component correctly, but needing such a big amount of extra CSS just to render this one component is a bit of an overkill.

I'm working on my fork to make the component react friendly, and I would appreciate any kind of help on that :)

[Kohze]

works for me within react.js without any trouble. Main code goes into the componentDidMount(){}, then adding a <div id="fv1"/> to the render content and it works.

[MatSchaeff]

We are not using react, do you still have conflicts or Kohze way of doing it does fix it ?

[sacdallago]

@Kohze 's way doesn't work if you are using different styling than bootstrap. Recently, react started allowing scss, aka. it's possible to apply component-wide (isolated) styling. The code for how this looks like with FeatureViewer can be found here: https://github.com/sacdallago/embed.protein.properties/tree/master/src/components/FeatureViewer
This renders the component react friendly without disrupting the parent components/styles (see it live: https://embed.protein.properties).

You can use the code in that repo to make an example (I suggest so! there are so many react users out there...)

edit: notice the new window.FeatureViewer, that is possible because FW is loaded on the index html: https://github.com/sacdallago/embed.protein.properties/blob/master/public/index.html#L31