anatomogram - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

html/Demo.jsx

@@ -1,7 +0,8 @@
-const React = require(`react`);
-const idsForSvgs = require(`../resources/json/idsForSvgs.json`);
-const svgsForSpecies = require(`../resources/json/svgsForSpecies.json`);
-const getSvgsForSpecies = require(`../src/imagesAvailable.js`).GetSvgsForSpecies;
-const AnatomogramFactory = require(`../src/AnatomogramFactory.jsx`);
+import React from 'react';
+import {getSvgsForSpecies} from '../src/imagesAvailable.js';
+import AnatomogramFactory from '../src/AnatomogramFactory.jsx';
 
+import SvgsForSpecies from '../resources/json/svgsForSpecies.json';
+// import IdsForSvgs from '../resources/json/idsForSvgs.json';
+
 const DemoComponent = React.createClass({
@@ -61,3 +62,3 @@ propTypes: {
       const anatomogramConfig = {
-          pathToFolderWithBundledResources: `../dist/`,
+          pathToResources: `../dist/`,
           anatomogramData: {
@@ -129,3 +130,3 @@ species: this.props.species,
                 <select value={this.state.species} onChange={this.handleChange}>
-                    {Object.keys(svgsForSpecies).map(species =>
+                    {Object.keys(SvgsForSpecies).map(species =>
                         (
@@ -144,2 +145,2 @@ <option key={species} value={species}>{species}</option>
 
-module.exports = Demo;
+export default Demo;

index.js

@@ -1,1 +0,2 @@
-module.exports = require(`./src/AnatomogramFactory.jsx`);
+import AnatomogramFactory from './src/AnatomogramFactory.jsx';
+export default AnatomogramFactory;

package.json

 {
   "name": "anatomogram",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Expression Atlas anatomogram",
   "main": "index.js",
+  "scripts": {
+    "prod": "NODE_ENV=production webpack --debug --optimize-minimize --output-pathinfo --display-chunks --display-modules"
+  },
   "author": "Wojtek Bazant <[e-mail]>, Elisabet Barrera <[e-mail]> and Alfonso Muñoz-Pomer Fuentes <[e-mail]>",
@@ -7,0 +10,0 @@ "license": "Apache-2.0",

src/Anatomogram.jsx

@@ -1,26 +0,13 @@
-const React = require(`react`);
-const AnatomogramImage = require(`./AnatomogramImage.jsx`);
-const SelectionIcon = require(`./SelectionIcon.jsx`);
+import React from 'react';
+import AnatomogramImage from './AnatomogramImage.jsx';
+import SelectionIcon from './SelectionIcon.jsx';
 
-const Anatomogram = React.createClass({
-    propTypes: {
-        pathToFolderWithBundledResources: React.PropTypes.string.isRequired,
-        expressedTissueColour: React.PropTypes.string.isRequired,
-        hoveredTissueColour: React.PropTypes.string.isRequired,
-        availableAnatomograms : React.PropTypes.arrayOf(
-            React.PropTypes.shape({
-                type:React.PropTypes.string.isRequired,
-                path:React.PropTypes.string.isRequired,
-                ids: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
-            })
-        ).isRequired,
-        height: React.PropTypes.number.isRequired,
-        whenMousedOverIdsChange: React.PropTypes.func,
-        allSvgPathIds: React.PropTypes.arrayOf(React.PropTypes.string),
-        idsToBeHighlighted: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
-    },
+class Anatomogram extends React.Component {
+    constructor(props) {
+        super(props);
 
-    getInitialState() {
-        return { selectedType: this.props.availableAnatomograms[0].type };
-    },
+        this.state = {
+            selectedType: this.props.availableAnatomograms[0].type
+        }
+    }
 
@@ -42,3 +29,3 @@ render() {
         );
-    },
+    }
 
@@ -54,3 +41,3 @@ _anatomogramSelectImageButtons() {
                             key={`${availableAnatomogram.type}_toggle`}
-                            pathToFolderWithBundledResources={this.props.pathToFolderWithBundledResources}
+                            pathToResources={this.props.pathToResources}
                             anatomogramType={availableAnatomogram.type}
@@ -62,3 +49,3 @@ selected={this.state.selectedType === availableAnatomogram.type}
         );
-    },
+    }
 
@@ -69,3 +56,3 @@ _afterUserSelectedAnatomogram(newSelectedType) {
         }
-    },
+    }
 
@@ -82,5 +69,22 @@ _selectedAnatomogram() {
         );
-    },
-});
+    }
+}
 
-module.exports = Anatomogram;
+Anatomogram.propTypes = {
+    availableAnatomograms : React.PropTypes.arrayOf(
+        React.PropTypes.shape({
+            type: React.PropTypes.string.isRequired,
+            path: React.PropTypes.string.isRequired,
+            ids: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
+        })
+    ).isRequired,
+    pathToResources: React.PropTypes.string.isRequired,
+    expressedTissueColour: React.PropTypes.string.isRequired,
+    hoveredTissueColour: React.PropTypes.string.isRequired,
+    height: React.PropTypes.number.isRequired,
+    whenMousedOverIdsChange: React.PropTypes.func,
+    allSvgPathIds: React.PropTypes.arrayOf(React.PropTypes.string),
+    idsToBeHighlighted: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
+};
+
+export default Anatomogram;

src/AnatomogramFactory.jsx

@@ -1,5 +0,5 @@
-const React = require(`react`);
-const Anatomogram = require(`./Anatomogram.jsx`);
-const getSvgsForSpecies = require(`./imagesAvailable.js`).GetSvgsForSpecies;
-require(`./ContainerLayout.less`);
+import React from 'react';
+import Anatomogram from './Anatomogram.jsx';
+import {getSvgsForSpecies} from './imagesAvailable.js';
+import './ContainerLayout.less';
 
@@ -18,5 +18,5 @@ // See note below, consider using something like https://flowtype.org if type checking is necessary
 
-const _availableAnatomograms = (species, pathToFolderWithBundledResources, allSvgPathIds) =>
-    getSvgsForSpecies(pathToFolderWithBundledResources, species)
-    .filter(e => !allSvgPathIds || allSvgPathIds.some(id => e.ids.indexOf(id) > -1));
+const _availableAnatomograms = (species, pathToResources, allSvgPathIds) =>
+    getSvgsForSpecies(pathToResources, species)
+    .filter(e => !allSvgPathIds || allSvgPathIds.some(id => e.ids.includes(id)));
 
@@ -42,6 +42,3 @@ const callEmitterWhenMousedOverTissuesChange = (eventEmitter) => {
     const availableAnatomograms =
-        _availableAnatomograms(
-            args.anatomogramData.species,
-            args.pathToFolderWithBundledResources,
-            args.anatomogramData.allSvgPathIds || null);
+        _availableAnatomograms(args.anatomogramData.species, args.pathToResources, args.anatomogramData.allSvgPathIds);
 
@@ -51,3 +48,3 @@ return(
             <Anatomogram
-                pathToFolderWithBundledResources={args.pathToFolderWithBundledResources}
+                pathToResources={args.pathToResources}
                 expressedTissueColour={args.expressedTissueColour}
@@ -155,2 +152,6 @@ hoveredTissueColour={args.hoveredTissueColour}
 
-module.exports={"create": createAnatomogram, "wrapComponent": wrapComponentWithAnatomogram};
+export default {
+    create: createAnatomogram,
+    wrapComponent: wrapComponentWithAnatomogram
+};
+

src/AnatomogramImage.jsx

@@ -1,4 +0,4 @@
-const React = require(`react`);
-const ReactDOM = require(`react-dom`);
-const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';
 
@@ -274,2 +274,2 @@ //http://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
 
-module.exports = AnatomogramImage;
+export default AnatomogramImage;

src/imagesAvailable.js

@@ -1,20 +0,20 @@
-const Url = require(`url`);
-const Path = require(`path`);
-const SvgsForSpecies = require(`../resources/json/svgsForSpecies.json`);
-const IdsForSvgs = require(`../resources/json/idsForSvgs.json`);
+import Url from 'url';
+import Path from 'path';
+import SvgsForSpecies from '../resources/json/svgsForSpecies.json';
+import IdsForSvgs from '../resources/json/idsForSvgs.json';
 
-const ResolvePathToIcon = (pathToFolderWithBundledResources, type, selected) =>
+const resolvePathToIcon = (pathToResources, type, selected) =>
     Url.resolve(
-        pathToFolderWithBundledResources,
+        pathToResources,
         Path.basename(require(`../resources/icons/${type}_${selected ? `` : `un`}selected.png`))
     );
 
-const ResolvePathToSvg = (pathToFolderWithBundledResources, svg) =>
+const resolvePathToSvg = (pathToResources, svg) =>
     Url.resolve(
-        pathToFolderWithBundledResources,
+        pathToResources,
         Path.basename(require(`../resources/svg/${svg}`))
     );
 
-const GetSvgsForSpecies = (pathToFolderWithBundledResources, species) => {
-    let svgEntry = SvgsForSpecies[species];
+const getSvgsForSpecies = (pathToResources, species) => {
+    const svgEntry = SvgsForSpecies[species];
     if (typeof svgEntry === `object`) {
@@ -24,3 +24,3 @@ return Object.keys(svgEntry).map(anatomogramType => (
                 type: anatomogramType,
-                path: ResolvePathToSvg(pathToFolderWithBundledResources, svgEntry[anatomogramType]),
+                path: resolvePathToSvg(pathToResources, svgEntry[anatomogramType]),
                 ids: IdsForSvgs[svgEntry[anatomogramType]]
@@ -32,3 +32,3 @@ }
             type: `svg`,
-            path: ResolvePathToSvg(pathToFolderWithBundledResources, svgEntry),
+            path: resolvePathToSvg(pathToResources, svgEntry),
             ids: IdsForSvgs[svgEntry]
@@ -41,2 +41,2 @@ }];
 
-module.exports = {GetSvgsForSpecies, ResolvePathToIcon};
+export {getSvgsForSpecies, resolvePathToIcon};

src/SelectionIcon.jsx

@@ -1,31 +0,16 @@
-const React = require(`react`);
-const ResolvePathToIcon = require(`./imagesAvailable.js`).ResolvePathToIcon;
-require(`./SelectionIcon.less`);
+import React from 'react';
+import {resolvePathToIcon} from './imagesAvailable.js';
+import './SelectionIcon.less';
 
-const SelectionIcon = React.createClass({
-    propTypes: {
-        pathToFolderWithBundledResources: React.PropTypes.string.isRequired,
-        anatomogramType: React.PropTypes.oneOf([`brain`,`female`,`male`,`whole_plant`,`flower_parts`]).isRequired,
-        selected: React.PropTypes.bool.isRequired,
-        onClick: React.PropTypes.func.isRequired
-    },
+const SelectionIcon = props =>
+    <img className={"selection-icon"} onClick={props.onClick}
+         src={resolvePathToIcon(props.pathToResources, props.anatomogramType, props.selected)} />;
 
-    render() {
-        return (
-            <img className={"selection-icon"} onClick={this.props.onClick}
-                 src={
-                     ResolvePathToIcon(
-                         this.props.pathToFolderWithBundledResources,
-                         this.props.anatomogramType,
-                         this.props.selected
-                     )
-                 }/>
-        );
-    },
+SelectionIcon.propTypes = {
+    pathToResources: React.PropTypes.string.isRequired,
+    anatomogramType: React.PropTypes.oneOf([`brain`,`female`,`male`,`whole_plant`,`flower_parts`]).isRequired,
+    selected: React.PropTypes.bool.isRequired,
+    onClick: React.PropTypes.func.isRequired
+};
 
-    shouldComponentUpdate(nextProps) {
-        return this.props.selected !== nextProps.selected;
-    }
-});
-
-module.exports = SelectionIcon;
+export default SelectionIcon;

webpack.config.js

@@ -8,3 +8,3 @@ var webpack = require('webpack');
         anatomogram: ['babel-polyfill', './index.js'],
-        demoRenderer:'./html/demoRenderer.js',
+        demoRenderer:'./html/DemoRenderer.jsx',
         dependencies: ['react', 'react-dom', 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js']
@@ -11,0 +11,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22550116

increased by105.34%

Number of package files

106

increased by76.67%

Lines of code

4960

increased by281.54%

Number of low supply chain risk alerts

2

decreased by-77.78%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes