42 |
;
53 | }
54 | };
55 |
56 | Def.propTypes = {
57 | classes: PropTypes.object.isRequired
58 | };
59 |
60 | const LoadFailure = withStyles(styles)(Def);
61 | export default LoadFailure;
--------------------------------------------------------------------------------
/src/drawing/drawTitle.js:
--------------------------------------------------------------------------------
1 | import Path from './Path';
2 | import Text from './Text';
3 | import getContrastTextColor from '../util/getContrastTextColor';
4 |
5 | export default function drawTitle(drawDefinition/*, parentPath*/) {
6 | return function (container/*, app*/) {
7 | // const pathContainer = parentPath || new Path();
8 | // const draw = drawDefinition(pathContainer);
9 | const drawingContainer = new Path();
10 | container.add(drawingContainer);
11 |
12 | const text = new Text('');
13 | text.size = 30;
14 | container.add(text);
15 |
16 | const draw = drawDefinition(drawingContainer);
17 | let width = 1;
18 | let height = 1;
19 |
20 | function updateText(backgroundColor) {
21 | if (text.visible) {
22 | drawingContainer.scale.set(0.85, 0.85);
23 | text.position.set(width / 2, height / 15);
24 | drawingContainer.position.set(0.075 * width, 0.15 * height);
25 |
26 | const textScale = width / 800;
27 | text.scale.set(textScale, textScale);
28 |
29 | if (backgroundColor) {
30 | text.color = getContrastTextColor(backgroundColor);
31 | }
32 | } else {
33 | drawingContainer.scale.set(1, 1);
34 | drawingContainer.position.set(0, 0);
35 | }
36 | }
37 |
38 | return {
39 | update(opts) {
40 | const title = opts.title ? opts.title.trim() : '';
41 | text.text = title;
42 | text.visible = !!title;
43 | updateText(opts.backgroundColor);
44 | draw.update(opts);
45 | },
46 | resize(w, h) {
47 | width = w;
48 | height = h;
49 | updateText();
50 | if (draw.resize) {
51 | draw.resize(w, h);
52 | }
53 | },
54 | destroy() {
55 | if (draw.destroy) {
56 | draw.destroy();
57 | }
58 | }
59 | };
60 | };
61 | }
--------------------------------------------------------------------------------
/src/util/contours.js:
--------------------------------------------------------------------------------
1 | /*
2 | Adapted from https://github.com/mattdesl/svg-path-contours
3 | MIT License
4 | - Code style change for readability
5 | - Don't convert lines to curves, since they waste points
6 | */
7 |
8 |
9 | import bezier from 'adaptive-bezier-curve';
10 | import abs from 'abs-svg-path';
11 | // import norm from 'normalize-svg-path';
12 | import norm from './normalize';
13 |
14 | import copy from 'vec2-copy';
15 |
16 | function set(out, x, y) {
17 | out[0] = x;
18 | out[1] = y;
19 | return out;
20 | }
21 |
22 | const tmp1 = [0, 0];
23 | const tmp2 = [0, 0];
24 | const tmp3 = [0, 0];
25 |
26 | function bezierTo(points, scale, start, seg) {
27 | bezier(start,
28 | set(tmp1, seg[1], seg[2]),
29 | set(tmp2, seg[3], seg[4]),
30 | set(tmp3, seg[5], seg[6]), scale, points);
31 | }
32 |
33 | function lineTo(points, scale, start, seg) {
34 | const [x1, y1] = start;
35 | points.push(
36 | [x1, y1],
37 | [seg[1], seg[2]]
38 | );
39 | }
40 |
41 | export default function contours(svg, scale) {
42 | const paths = [];
43 |
44 | const points = [];
45 | const pen = [0, 0];
46 | norm(abs(svg)).forEach(segment => {
47 | if (segment[0] === 'M') {
48 | copy(pen, segment.slice(1));
49 | if (points.length > 0) {
50 | paths.push(points);
51 | points.length = 0;
52 | }
53 | } else if (segment[0] === 'L') {
54 | lineTo(points, scale, pen, segment);
55 | set(pen, segment[1], segment[2]);
56 | } else if (segment[0] === 'C') {
57 | bezierTo(points, scale, pen, segment);
58 | set(pen, segment[5], segment[6]);
59 | } else {
60 | throw new Error('illegal type in SVG: ' + segment[0]);
61 | }
62 | });
63 |
64 | if (points.length > 0) {
65 | paths.push(points);
66 | }
67 | return paths;
68 | }
--------------------------------------------------------------------------------
/src/util/VideoWriter/png.js:
--------------------------------------------------------------------------------
1 | import JSZip from 'jszip';
2 |
3 | const FRAME_DIGITS = 5;
4 | const MIME_TYPE = 'image/png';
5 | const DATA_URL_SLICE = 'data:image/png;base64,'.length;
6 | const base64Opt = {base64: true};
7 |
8 | function promise(fn) {
9 | return new Promise(resolve => fn(resolve));
10 | }
11 |
12 | export default function png({ quality, digits }, videoWriter, finish) {
13 | digits = digits || FRAME_DIGITS;
14 | quality = quality || 1;
15 |
16 | const zip = new JSZip();
17 | const promises = [];
18 |
19 | let frameCount = 0;
20 |
21 | let maxProgress = 0;
22 |
23 | function onUpdate({ percent, currentFile }) {
24 | if (percent < maxProgress) {
25 | console.warn('progress regressed', currentFile, percent);
26 | // debugger;
27 | }
28 | maxProgress = Math.max(maxProgress, percent);
29 |
30 | videoWriter.emit('progress', percent / 100);
31 | }
32 |
33 | return {
34 | reportsProgress: true,
35 | addFrame: canvas => {
36 | let frame = String(frameCount++);
37 | while (frame.length < digits) {
38 | frame = '0' + frame;
39 | }
40 |
41 | const fileName = 'image-' + frame + '.png';
42 | if (canvas.toBlob) {
43 | promises.push(promise(cb => canvas.toBlob(
44 | blob => {
45 | zip.file(fileName, blob);
46 | cb();
47 | },
48 | MIME_TYPE,
49 | quality
50 | )));
51 | } else {
52 | const dataURL = canvas.toDataURL(MIME_TYPE, quality);
53 | const base64 = dataURL.slice(DATA_URL_SLICE);
54 | zip.file(fileName, base64, base64Opt);
55 | }
56 | },
57 | finish: () => Promise.all(promises)
58 | .then(() => zip.generateAsync({ type: 'blob' }, onUpdate))
59 | .then(finish),
60 | destroy: () => zip.forEach(name => zip.remove(name))
61 | };
62 | }
--------------------------------------------------------------------------------
/src/drawing/PixiText.js:
--------------------------------------------------------------------------------
1 | import PixiDrawable from './PixiDrawable';
2 | import Text from './Text';
3 |
4 | import { Container } from '@pixi/display';
5 | import { Renderer } from '@pixi/core';
6 | import { /*Sprite as PIXISprite, */SpriteRenderer } from '@pixi/sprite';
7 | import { Text as PIXIText, TextStyle } from '@pixi/text';
8 | Renderer.registerPlugin('sprite', SpriteRenderer);
9 |
10 | // just mapping by font size
11 | const styles = new Map();
12 | function fontStyle(size) {
13 | let style = styles.get(size);
14 | if (!style) {
15 | style = new TextStyle({
16 | fontSize: size
17 | });
18 | styles.set(size, style);
19 | }
20 | return style;
21 | }
22 |
23 | function PixiText(parent, drawable) {
24 | PixiDrawable.call(this, parent, drawable);
25 |
26 | let textObject = null;
27 |
28 | const superUpdate = this.update;
29 | this.update = () => {
30 | const text = drawable && drawable.text || '';
31 | if (!this.pixiObject) {
32 | this.pixiObject = new Container();
33 | if (parent) {
34 | parent.addChild(this.pixiObject);
35 | }
36 |
37 | textObject = new PIXIText(text, fontStyle(drawable.size));
38 | this.pixiObject.addChild(textObject);
39 | } else {
40 | textObject.text = text;
41 | textObject.style = fontStyle(drawable.size);
42 | }
43 |
44 | // center
45 | textObject.position.set(
46 | -textObject.width / 2,
47 | -textObject.height / 2
48 | );
49 |
50 | const hex = ('00000' + drawable.color.toString(16)).slice(-6);
51 | textObject.style.fill = '#' + hex;
52 | textObject.alpha = drawable.opacity;
53 |
54 | superUpdate.call(this);
55 | };
56 | }
57 |
58 | PixiText.prototype = Object.create(PixiDrawable.prototype);
59 |
60 | PixiDrawable.register(Text, PixiText);
61 |
62 | export default PixiText;
--------------------------------------------------------------------------------
/src/evolution/index.js:
--------------------------------------------------------------------------------
1 | import { fromJS, Map, List } from 'immutable';
2 |
3 | import {
4 | NUM_CHILDREN,
5 | MUTATION_RATE,
6 | MAX_DRIFT
7 | } from '../charts/constants';
8 |
9 | export function defaultTree(chartInfo) {
10 | const genes = chartInfo.genes;
11 | return fromJS({
12 | time: Date.now(),
13 | genes,
14 | children: []
15 | });
16 | }
17 |
18 | // centered around [-1 to 1]
19 | export const random = () => Math.random() * 2 - 1;
20 |
21 | export const mutate = (val, scale = 1) => {
22 | const drift = random() * random() * MAX_DRIFT;
23 | const result = val + drift * scale;
24 |
25 | // bounce back if result is out of [-1,1] range
26 | if (result < -1) {
27 | return -2 - result;
28 | }
29 | if (result > 1) {
30 | return 2 - result;
31 | }
32 | return result;
33 | };
34 |
35 | export function spawnNodes(node, opts, timeOffset = 0, numChildren = NUM_CHILDREN) {
36 | const genes = node.get('genes');
37 | let children = node.get('children');
38 |
39 | for (let i = 0; i < numChildren; i++) {
40 | if (!children.has(i)) {
41 | let newGenes = genes.map(val => Math.random() < MUTATION_RATE ? mutate(val) : val);
42 |
43 | if (newGenes.equals(genes)) {
44 | // make sure we have at least one mutation
45 | const geneIndex = Math.floor(Math.random() * genes.size) % genes.size;
46 | const geneKey = genes.keySeq().get(geneIndex);
47 | newGenes = genes.update(geneKey, mutate);
48 | // newGenes = genes.set(geneKey, mutate(genes.get(geneKey)));
49 | }
50 |
51 | const child = new Map({
52 | time: Date.now() + timeOffset,
53 | genes: newGenes,
54 | opts: new Map(opts),
55 | children: new List()
56 | });
57 | children = children.set(i, child);
58 | }
59 | }
60 |
61 | return node.set('children', children);
62 | }
--------------------------------------------------------------------------------
/src/util/exportSVG.js:
--------------------------------------------------------------------------------
1 | import fieldMappedTable from './fieldMappedTable';
2 | import createSVGElement from '../drawing/createSVGElement';
3 | import Path from '../drawing/Path';
4 | import SVGPath from '../drawing/SVGPath';
5 | import '../drawing/SVGText';
6 | import '../drawing/SVGLinePath';
7 |
8 | export default function exportSVG(options) {
9 | const {
10 | data,
11 | nodePath,
12 | drawFunction,
13 | resolution,
14 | backgroundColor
15 | } = options;
16 | const sourceData = fieldMappedTable(data);
17 | const genes = data.getIn(nodePath).get('genes');
18 |
19 | const svg = createSVGElement('svg');
20 | const attributes = {
21 | xmlns: 'http://www.w3.org/2000/svg',
22 | version: '1.1',
23 | baseProfile: 'full',
24 | width: resolution,
25 | height: resolution,
26 | viewBox: '0 0 1 1'
27 | };
28 | Object.keys(attributes).forEach(key => {
29 | svg.setAttribute(key, attributes[key]);
30 | });
31 |
32 | if (backgroundColor && backgroundColor.a) {
33 | const {
34 | r, g, b, a
35 | } = backgroundColor;
36 | svg.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
37 | }
38 |
39 | const pathContainer = new Path();
40 | if (options.margin) {
41 | pathContainer.scale.set(0.8, 0.8);
42 | pathContainer.position.set(0.1, 0.1);
43 | }
44 |
45 | const renderableContainer = new SVGPath(svg, pathContainer);
46 | const draw = drawFunction(pathContainer);
47 | if (draw.update) {
48 | draw.update({
49 | sourceData,
50 | genes,
51 | backgroundColor: options.backgroundColor,
52 | title: options.showTitle && options.title,
53 | showLabels: !!options.showLabels,
54 | fontSize: options.labelFontSize
55 | });
56 | }
57 | renderableContainer.update();
58 |
59 | const svgSource = svg.outerHTML;
60 |
61 | // clean up
62 | if (draw.destroy) {
63 | draw.destroy();
64 | }
65 | pathContainer.destroyAll();
66 | renderableContainer.destroy();
67 |
68 | return svgSource;
69 | }
--------------------------------------------------------------------------------
/src/drawing/PixiDrawable.js:
--------------------------------------------------------------------------------
1 | const constructors = [];
2 |
3 | function PixiDrawable(parent, drawable) {
4 | const children = new Map();
5 | this.drawable = drawable;
6 | this.pixiObject = null;
7 |
8 | function removeChild(childDrawable) {
9 | const pixiDrawable = children.get(childDrawable);
10 | if (pixiDrawable) {
11 | children.delete(childDrawable);
12 | }
13 | }
14 |
15 | this.update = () => {
16 | // update matrix - copy from drawable
17 | if (this.drawable) {
18 | this.pixiObject.visible = drawable.visible;
19 | this.pixiObject.transform.setFromMatrix(drawable.matrix);
20 |
21 | // update children
22 | drawable.children.forEach(childDrawable => {
23 | let pixiDrawable = children.get(childDrawable);
24 | if (!pixiDrawable) {
25 | let ChildConstructor = PixiDrawable;
26 | for (let i = 0; i < constructors.length; i++) {
27 | const [D, P] = constructors[i];
28 | if (childDrawable instanceof D) {
29 | ChildConstructor = P;
30 | break;
31 | }
32 | }
33 |
34 | pixiDrawable = new ChildConstructor(this.pixiObject, childDrawable);
35 | children.set(childDrawable, pixiDrawable);
36 | }
37 | pixiDrawable.update();
38 | });
39 | }
40 | };
41 |
42 | const callDestroy = () => this.destroy();
43 | this.destroy = () => {
44 | if (parent && this.pixiObject) {
45 | parent.removeChild(this.pixiObject);
46 | }
47 |
48 | if (drawable) {
49 | drawable.off('destroy', callDestroy);
50 | drawable.off('remove', removeChild);
51 | }
52 |
53 | if (this.pixiObject) {
54 | this.pixiObject.destroy({
55 | children: true
56 | });
57 | }
58 |
59 | children.clear();
60 | };
61 |
62 | if (drawable) {
63 | drawable.on('destroy', callDestroy);
64 | drawable.on('remove', removeChild);
65 | }
66 | }
67 |
68 | PixiDrawable.register = (drawable, pixiDrawable) => constructors.push([drawable, pixiDrawable]);
69 |
70 | export default PixiDrawable;
--------------------------------------------------------------------------------
/tools/inject-manifest-plugin.js:
--------------------------------------------------------------------------------
1 | /*
2 | We build a manifest.json full of icons with favicons-webpack-plugin
3 | but it does not properly inject it into the HTML
4 | (bug: https://github.com/jantimon/favicons-webpack-plugin/pull/10)
5 |
6 | This custom plugin lets us do that and modify it with some of
7 | our own preferred properties
8 | */
9 |
10 | const { RawSource } = require('webpack-sources');
11 | function InjectManifestPlugin(options) {
12 | this.options = options;
13 | }
14 |
15 | InjectManifestPlugin.prototype.apply = function (compiler) {
16 | let manifestLocation = '';
17 | const options = this.options;
18 |
19 | compiler.hooks.compilation.tap('InjectManifestPlugin', (compilation) => {
20 | if (compilation.hooks.htmlWebpackPluginAfterHtmlProcessing) {
21 | compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
22 | 'InjectManifestPlugin',
23 | (data, cb) => {
24 | if (manifestLocation) {
25 | data.html = data.html.replace(
26 | /(<\/head>)/i,
27 | ``
28 | );
29 | }
30 | cb(null, data);
31 | }
32 | );
33 | }
34 |
35 | if (compilation.hooks.additionalAssets) {
36 | compilation.hooks.additionalAssets.tapAsync(
37 | 'InjectManifestPlugin',
38 | cb => {
39 | for (const name in compilation.assets) {
40 | if (compilation.assets.hasOwnProperty(name) && /manifest\.json$/.test(name)) {
41 | const asset = compilation.assets[name];
42 | try {
43 | if (options) {
44 | const manifest = JSON.parse(asset.source());
45 | const modifiedManifest = Object.assign(manifest, options || {});
46 | compilation.assets[name] = new RawSource(JSON.stringify(modifiedManifest));
47 | }
48 | manifestLocation = name;
49 | } catch (e) {
50 | console.warn('failed to update manifest', e);
51 | }
52 | }
53 | }
54 |
55 | cb(null);
56 | }
57 | );
58 | }
59 | });
60 | };
61 |
62 | module.exports = InjectManifestPlugin;
--------------------------------------------------------------------------------
/src/charts/line/index.js:
--------------------------------------------------------------------------------
1 | import draw from './draw';
2 | import randomize from '../../util/randomizeTimeline';
3 | import { defaultColorValues } from '../geneColor';
4 |
5 | export default {
6 | key: 'line',
7 | name: 'Line Chart',
8 | preview: require('./thumb.png'),
9 | required: ['x', 'y', 'group', 'time'],
10 | valid: fields =>
11 | fields.has('group') && fields.has('time') &&
12 | (fields.has('x') || fields.has('y')),
13 | randomize,
14 | draw,
15 | properties: [
16 | {
17 | key: 'group',
18 | name: 'Group'
19 | },
20 | {
21 | key: 'time',
22 | name: 'Time'
23 | },
24 | {
25 | key: 'x',
26 | name: 'Width'
27 | },
28 | {
29 | key: 'y',
30 | name: 'Height'
31 | },
32 | {
33 | key: 'order',
34 | name: 'Order'
35 | },
36 | {
37 | key: 'color',
38 | name: 'Color'
39 | },
40 | {
41 | key: 'label',
42 | name: 'Label'
43 | }
44 | ],
45 | geneCategories: [
46 | {
47 | category: 'Color',
48 | genes: [
49 | ['Hue Range', 'hueRange'],
50 | ['Hue Offset', 'hueOffset'],
51 | ['Saturation Offset', 'saturationOffset'],
52 | ['Saturation Factor', 'saturationValueFactor'],
53 | ['Lightness Offset', 'lightnessOffset'],
54 | ['Lightness Factor', 'lightnessValueFactor']
55 | ]
56 | },
57 | {
58 | category: 'X Position',
59 | genes: [
60 | ['Offset', 'xOffset'],
61 | ['Rank Factor', 'xRankFactor'],
62 | ['Random Factor', 'xRandomFactor']
63 | ]
64 | },
65 | {
66 | category: 'Y Position',
67 | genes: [
68 | ['Offset', 'yOffset'],
69 | ['Rank Factor', 'yRankFactor'],
70 | ['Random Factor', 'yRandomFactor']
71 | ]
72 | },
73 | {
74 | category: 'Scale',
75 | genes: [
76 | ['Offset', 'scaleOffset'],
77 | ['Rank Factor', 'scaleRankFactor']
78 | ]
79 | }
80 | ],
81 | genes: {
82 | xOffset: 0,
83 | xRankFactor: 0,
84 | xRandomFactor: 0,
85 |
86 | yOffset: 0,
87 | yRankFactor: 0,
88 | yRandomFactor: 0,
89 |
90 | scaleOffset: 0,
91 | scaleRankFactor: 0,
92 |
93 | ...defaultColorValues
94 | }
95 | };
--------------------------------------------------------------------------------
/src/charts/timeline/index.js:
--------------------------------------------------------------------------------
1 | import draw from './draw';
2 | import randomize from '../../util/randomizeTimeline';
3 | import { defaultColorValues } from '../geneColor';
4 |
5 | export default {
6 | key: 'timeline',
7 | name: 'Area Timeline',
8 | preview: require('./thumb.png'),
9 | required: ['x', 'y', 'group', 'time'],
10 | valid: fields =>
11 | fields.has('group') && fields.has('time') &&
12 | (fields.has('x') || fields.has('y')),
13 | randomize,
14 | draw,
15 | properties: [
16 | {
17 | key: 'group',
18 | name: 'Group'
19 | },
20 | {
21 | key: 'time',
22 | name: 'Time'
23 | },
24 | {
25 | key: 'x',
26 | name: 'Width'
27 | },
28 | {
29 | key: 'y',
30 | name: 'Height'
31 | },
32 | {
33 | key: 'order',
34 | name: 'Order'
35 | },
36 | {
37 | key: 'color',
38 | name: 'Color'
39 | },
40 | {
41 | key: 'label',
42 | name: 'Label'
43 | }
44 | ],
45 | geneCategories: [
46 | {
47 | category: 'Color',
48 | genes: [
49 | ['Hue Range', 'hueRange'],
50 | ['Hue Offset', 'hueOffset'],
51 | ['Saturation Offset', 'saturationOffset'],
52 | ['Saturation Factor', 'saturationValueFactor'],
53 | ['Lightness Offset', 'lightnessOffset'],
54 | ['Lightness Factor', 'lightnessValueFactor']
55 | ]
56 | },
57 | {
58 | category: 'X Position',
59 | genes: [
60 | ['Offset', 'xOffset'],
61 | ['Rank Factor', 'xRankFactor'],
62 | ['Random Factor', 'xRandomFactor']
63 | ]
64 | },
65 | {
66 | category: 'Y Position',
67 | genes: [
68 | ['Offset', 'yOffset'],
69 | ['Rank Factor', 'yRankFactor'],
70 | ['Random Factor', 'yRandomFactor']
71 | ]
72 | },
73 | {
74 | category: 'Scale',
75 | genes: [
76 | ['Offset', 'scaleOffset'],
77 | ['Rank Factor', 'scaleRankFactor']
78 | ]
79 | }
80 | ],
81 | genes: {
82 | xOffset: 0,
83 | xRankFactor: 0,
84 | xRandomFactor: 0,
85 |
86 | yOffset: 0,
87 | yRankFactor: 0,
88 | yRandomFactor: 0,
89 |
90 | scaleOffset: 0,
91 | scaleRankFactor: 0,
92 |
93 | ...defaultColorValues
94 | }
95 | };
--------------------------------------------------------------------------------
/src/charts/pie/index.js:
--------------------------------------------------------------------------------
1 | import draw from './draw';
2 | import { defaultColorValues } from '../geneColor';
3 |
4 | export default {
5 | key: 'pie',
6 | name: 'Pie Chart',
7 | draw,
8 | required: ['size'],
9 | randomize(fields) {
10 | if (!fields.length) {
11 | return {};
12 | }
13 | const indices = Object.keys(fields).map(parseFloat);
14 | let numericFieldIndices = indices.filter(index => {
15 | const f = fields[index];
16 | const type = f.type;
17 | return type === 'int' || type === 'float';
18 | });
19 | if (!numericFieldIndices.length) {
20 | numericFieldIndices = indices;
21 | }
22 | const count = numericFieldIndices.length;
23 | const size = numericFieldIndices[Math.floor(Math.random() * count) % count];
24 | return { size };
25 | },
26 | preview: require('./thumb.png'),
27 | properties: [
28 | {
29 | key: 'size',
30 | name: 'Slice Angle'
31 | },
32 | {
33 | key: 'order',
34 | name: 'Order'
35 | },
36 | {
37 | key: 'color',
38 | name: 'Color'
39 | },
40 | {
41 | key: 'label',
42 | name: 'Label'
43 | }
44 | ],
45 | geneCategories: [
46 | {
47 | category: 'Color',
48 | genes: [
49 | ['Hue Range', 'hueRange'],
50 | ['Hue Offset', 'hueOffset'],
51 | ['Saturation Offset', 'saturationOffset'],
52 | ['Saturation Factor', 'saturationValueFactor'],
53 | ['Lightness Offset', 'lightnessOffset'],
54 | ['Lightness Factor', 'lightnessValueFactor']
55 | ]
56 | },
57 | {
58 | category: 'Radius',
59 | genes: [
60 | ['Offset', 'radiusOffset'],
61 | ['Rank Factor', 'radiusRankFactor'],
62 | ['Value Factor', 'radiusValueFactor'],
63 | ['Random Factor', 'radiusRandomFactor']
64 | ]
65 | }/*,
66 | {
67 | category: 'Rotation',
68 | genes: [
69 | ['Offset', 'rotationOffset'],
70 | ['Rank Factor', 'rotationRankFactor'],
71 | ['Value Factor', 'rotationValueFactor'],
72 | ['Random Factor', 'rotationRandomFactor']
73 | ]
74 | }*/
75 | ],
76 | genes: {
77 | ...defaultColorValues,
78 |
79 | radiusOffset: 0,
80 | radiusRankFactor: 0,
81 | radiusValueFactor: 0,
82 | radiusRandomFactor: 0,
83 |
84 | // scale: 1,
85 | // scaleFactor: 0,
86 |
87 | rotationOffset: 0,
88 | rotationRankFactor: 0,
89 | rotationValueFactor: 0,
90 | rotationRandomFactor: 0
91 | }
92 | };
--------------------------------------------------------------------------------
/src/data/index.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | title: 'Largest cities in the world',
4 | source: 'https://en.wikipedia.org/wiki/List_of_largest_cities',
5 | license: 'Creative Commons Attribution-ShareAlike 3.0',
6 | licenseLink: 'https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License',
7 | load: () => import('./large-cities.json')
8 | },
9 | {
10 | title: `Fisher's Iris data set`,
11 | description: `Fisher's Iris data set\nDua, D. and Karra Taniskidou, E. (2017). UCI Machine Learning Repository Irvine, CA: University of California, School of Information and Computer Science.`,
12 | source: 'http://archive.ics.uci.edu/ml/datasets/Iris',
13 | load: () => import('./iris.json')
14 | },
15 | {
16 | title: 'European Parliament election, 2004',
17 | source: 'https://en.wikipedia.org/wiki/European_Parliament_election,_2004',
18 | license: 'Creative Commons Attribution-ShareAlike 3.0',
19 | licenseLink: 'https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License',
20 | load: () => import('./european-parliament-2004.json')
21 | },
22 | {
23 | title: 'Honey Production in the USA (1998-2012)',
24 | description: 'Honey Production Figures and Prices by National Agricultural Statistics Service',
25 | source: 'https://www.kaggle.com/jessicali9530/honey-production',
26 | license: 'CC0: Public Domain',
27 | licenseLink: 'https://creativecommons.org/publicdomain/zero/1.0/',
28 | load: () => import('./honeyproduction.json')
29 | },
30 | {
31 | title: 'Mathematical Number Sequences',
32 | description: 'Primes, powers of two, powers of ten, Fibonacci sequence',
33 | load: () => import('./number-sequences.json')
34 | },
35 | {
36 | title: 'World Happiness Report',
37 | source: 'https://www.kaggle.com/unsdsn/world-happiness',
38 | description: 'Happiness scored according to economic production, social support, etc.',
39 | license: 'CC0: Public Domain',
40 | licenseLink: 'https://creativecommons.org/publicdomain/zero/1.0/',
41 | load: () => import('./world-happiness.json')
42 | }/*,
43 | {
44 | title: 'FIFA World Cup',
45 | source: 'https://www.kaggle.com/abecklas/fifa-world-cup',
46 | description: '',
47 | license: 'CC0: Public Domain',
48 | licenseLink: 'https://creativecommons.org/publicdomain/zero/1.0/',
49 | load: () => import('./fifa-world-cup.json')
50 | }*/
51 | ];
52 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Morph
2 |
3 | Thank you for taking the time to contribute to Morph!
4 |
5 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue, assessing changes, and helping you finalize your pull requests.
6 |
7 | ## Table Of Contents
8 |
9 | [Code of Conduct](#code-of-conduct)
10 |
11 | [I don't want to read this whole thing, I just have a question!!!](#i-dont-want-to-read-this-whole-thing-i-just-have-a-question)
12 |
13 | [What should I know before I get started?](#what-should-i-know-before-i-get-started)
14 |
15 | [How Can I Contribute?](#how-can-i-contribute)
16 | - [Reporting Bugs](#reporting-bugs)
17 | - [Suggesting Enhancements](#suggesting-enhancements)
18 | - [Your First Code Contribution](#your-first-code-contribution)
19 | - [Pull Requests](#pull-requests)
20 |
21 | [Styleguides](#styleguides)
22 | - [Git Commit Messages](#git-commit-messages)
23 | - [JavaScript Styleguide](#javascript-styleguide)
24 |
25 | [Additional Notes](#additional-notes)
26 | - [Issue and Pull Request Labels](#issue-and-pull-request-labels)
27 |
28 | ## Code of Conduct
29 |
30 | This project and everyone participating in it is governed by a [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [contact@datavized.com](mailto:contact@datavized.com).
31 |
32 | ## Styleguides
33 |
34 | ### Git Commit Messages
35 |
36 | - Use the present tense ("Add feature" not "Added feature")
37 | - Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
38 | - Limit the first line to 72 characters or less
39 | - Reference issues and pull requests liberally after the first line
40 | - Consider starting the commit message with an applicable emoji:
41 | - :art: `:art:` when improving the format/structure of the code
42 | - :racehorse: `:racehorse:` when improving performance
43 | - :non-potable_water: `:non-potable_water:` when plugging memory leaks
44 | - :memo: `:memo:` when writing docs
45 | - :bug: `:bug:` when fixing a bug
46 | - :fire: `:fire:` when removing code or files
47 | - :white_check_mark: `:white_check_mark:` when adding tests
48 | - :lock: `:lock:` when dealing with security
49 | - :arrow_up: `:arrow_up:` when upgrading dependencies
50 | - :arrow_down: `:arrow_down:` when downgrading dependencies
51 | - :shirt: `:shirt:` when removing linter warnings
52 |
--------------------------------------------------------------------------------
/src/components/ConfirmationDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react'; // import classNames from 'classnames';
2 | import { confirmable } from 'react-confirm';
3 |
4 | /*
5 | Material UI components
6 | */
7 | import PropTypes from 'prop-types';
8 | // import withStyles from '@material-ui/core/styles/withStyles';
9 | import Theme from './Theme';
10 | import Dialog from '@material-ui/core/Dialog';
11 | import DialogActions from '@material-ui/core/DialogActions';
12 | import DialogContent from '@material-ui/core/DialogContent';
13 | import DialogContentText from '@material-ui/core/DialogContentText';
14 | import Button from '@material-ui/core/Button';
15 |
16 | // const styles = () => ({
17 | // root: {
18 | // }
19 | // });
20 |
21 | const Def = class ConfirmationDialog extends React.Component {
22 | static propTypes = {
23 | show: PropTypes.bool, // from confirmable. indicates if the dialog is shown or not.
24 | proceed: PropTypes.func, // from confirmable. call to close the dialog with promise resolved.
25 | cancel: PropTypes.func, // from confirmable. call to close the dialog with promise rejected.
26 | dismiss: PropTypes.func, // from confirmable. call to only close the dialog.
27 | confirmation: PropTypes.string, // arguments of your confirm function
28 | options: PropTypes.object, // arguments of your confirm function
29 |
30 | classes: PropTypes.object
31 | }
32 |
33 | render() {
34 | const {
35 | classes,
36 | show,
37 | proceed,
38 | // dismiss,
39 | cancel,
40 | confirmation,
41 | options
42 | } = this.props;
43 |
44 | const yes = options && options.yes || 'Yes';
45 | const no = options && options.no || 'No';
46 |
47 | return
43 |
44 | {connected ?
45 | Error loading app. Network offline.
50 | }
51 |
52 |
46 | Error loading app.
47 |
48 |
:
49 |
108 |
81 | this.handleTooltipVisibleChange(index, true)}
86 | onMouseLeave={() => this.handleTooltipVisibleChange(index, false)}
87 | />
88 |
89 | );
90 | }
91 | render() {
92 | const { classes, theme } = this.props;
93 | const trackStyle = {
94 | backgroundColor: theme.palette.primary.main
95 | };
96 |
97 | const style = {};
98 | if (this.props.marks) {
99 | style.marginBottom = 32;
100 | }
101 |
102 | const props = {
103 | style,
104 | trackStyle,
105 | ...this.props
106 | };
107 | return
86 | ;
120 |
121 | }
122 | };
123 |
124 | const SelectChartType = withStyles(styles)(Def);
125 | export default SelectChartType;
--------------------------------------------------------------------------------
/src/components/asyncComponent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | const queue = new Set();
4 |
5 | function isConnected() {
6 | return navigator.onLine === undefined || navigator.onLine;
7 | }
8 |
9 | function renderComponent(component) {
10 | return typeof component === 'function' ?
11 | React.createElement(component) :
12 | component || null;
13 | }
14 |
15 | function asyncComponent(importComponent, options = {}) {
16 | const {
17 | load: loadingComponents,
18 | fail: failComponents,
19 | defer
20 | } = options;
21 |
22 | let preloadTimeout = 0;
23 |
24 | function load() {
25 | clearTimeout(preloadTimeout);
26 | queue.add(importComponent);
27 |
28 | const p = importComponent().then(component => {
29 | queue.delete(importComponent);
30 | return component;
31 | });
32 | p.catch(() => {
33 | queue.delete(importComponent);
34 | });
35 | return p;
36 | }
37 |
38 | function attemptPreload() {
39 | if (queue.size) {
40 | preloadTimeout = setTimeout(attemptPreload, 500);
41 | } else {
42 | load();
43 | }
44 | }
45 |
46 | class AsyncComponent extends Component {
47 | state = {
48 | component: null,
49 | connected: isConnected(),
50 | requested: false,
51 | failed: false,
52 | attempts: 0
53 | }
54 |
55 | isMounted = false
56 |
57 | load = () => {
58 | if (this.state.requested) {
59 | // don't request twice
60 | return;
61 | }
62 |
63 |
64 | this.setState({
65 | component: null,
66 | requested: true,
67 | attempts: this.state.attempts + 1
68 | });
69 |
70 | // todo: maybe load doesn't return a promise?
71 | load().then(component => new Promise(resolve => {
72 | if (this.isMounted) {
73 | this.setState({
74 | // handle both es imports and cjs
75 | component: component.default ? component.default : component,
76 | requested: false
77 | }, () => resolve());
78 | }
79 | })).catch(err => {
80 | console.error('Failed to load component', err);
81 | if (this.isMounted) {
82 | this.setState({
83 | requested: false,
84 | failed: true
85 | });
86 | }
87 | });
88 | }
89 |
90 | retry = () => {
91 | if (this.state.attempts >= 3 && !this.state.requested) {
92 | window.location.reload();
93 | } else {
94 | this.load();
95 | }
96 | }
97 |
98 | updateOnlineStatus = () => {
99 | const connected = isConnected();
100 | if (connected && !queue.size) {
101 | this.load();
102 | }
103 | this.setState({
104 | connected
105 | });
106 | }
107 |
108 | componentDidMount() {
109 | this.isMounted = true;
110 | window.addEventListener('online', this.updateOnlineStatus);
111 | window.addEventListener('offline', this.updateOnlineStatus);
112 | this.load();
113 | }
114 |
115 | componentWillUnmount() {
116 | this.isMounted = false;
117 | window.removeEventListener('online', this.updateOnlineStatus);
118 | window.removeEventListener('offline', this.updateOnlineStatus);
119 | }
120 |
121 | render() {
122 | const C = this.state.component;
123 | if (C) {
124 | return ;
131 | }
132 | return failComponents;
133 | }
134 |
135 | return renderComponent(loadingComponents);
136 | }
137 | }
138 |
139 | if (!defer) {
140 | setTimeout(attemptPreload, 200);
141 | }
142 |
143 | return AsyncComponent;
144 | }
145 |
146 | export default asyncComponent;
--------------------------------------------------------------------------------
/src/components/SampleMenuItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | /*
5 | Material UI components
6 | */
7 | import PropTypes from 'prop-types';
8 | import withStyles from '@material-ui/core/styles/withStyles';
9 | import MenuItem from '@material-ui/core/MenuItem';
10 | import Typography from '@material-ui/core/Typography';
11 | import Collapse from '@material-ui/core/Collapse';
12 | import InfoIcon from '@material-ui/icons/Info';
13 |
14 | // import { emphasize } from '@material-ui/core/styles/colorManipulator';
15 |
16 | const styles = theme => ({
17 | menuItem: {
18 | display: 'block',
19 | height: 'auto',
20 | minHeight: 24,
21 | paddingLeft: 0,
22 | lineHeight: 'initial',
23 | overflow: 'auto',
24 | borderBottom: `1px solid ${theme.palette.divider}`
25 | },
26 | topLine: {
27 | display: 'flex',
28 | justifyContent: 'space-between'
29 | },
30 | infoIcon: {
31 | cursor: 'pointer',
32 | color: theme.palette.text.hint
33 | },
34 | caption: {
35 | fontSize: '0.6em'
36 | },
37 | title: {},
38 | description: {
39 | whiteSpace: 'pre-wrap'
40 | },
41 | metadata: {
42 | padding: theme.spacing.unit * 2,
43 | // backgroundColor: emphasize(theme.palette.background.paper, 0.05),
44 | boxShadow: `inset 0 11px 15px -11px rgba(0, 0, 0, 0.2)`,
45 | '& > p': {
46 | margin: 0
47 | },
48 | '& > p > a': {
49 | // textDecoration: 'none',
50 | color: theme.palette.text.hint
51 | },
52 | '& > p > a:hover': {
53 | color: theme.palette.text.secondary
54 | }
55 | },
56 | expanded: {
57 | '& > $topLine > $title': {
58 | fontWeight: 'bold'
59 | },
60 | '& > $topLine > $infoIcon': {
61 | color: theme.palette.text.primary
62 | }
63 | }
64 | });
65 |
66 | function noClick(evt) {
67 | evt.stopPropagation();
68 | }
69 |
70 | function metadataLine(text, link, className) {
71 | if (!text) {
72 | return null;
73 | }
74 | return {
75 | link ?
76 | {text} :
77 | text
78 | } ;
79 | }
80 |
81 | const Def = class SampleMenuItem extends React.Component {
82 | static propTypes = {
83 | classes: PropTypes.object.isRequired,
84 | onClick: PropTypes.func.isRequired,
85 | title: PropTypes.string.isRequired,
86 | source: PropTypes.string,
87 | license: PropTypes.string,
88 | licenseLink: PropTypes.string,
89 | description: PropTypes.string
90 | }
91 |
92 | state = {
93 | expanded: false
94 | };
95 |
96 | toggleExpanded = evt => {
97 | const expanded = !this.state.expanded;
98 | this.setState({ expanded });
99 | evt.stopPropagation();
100 | }
101 |
102 | render() {
103 | const {
104 | classes,
105 | onClick,
106 | title,
107 | source,
108 | license,
109 | licenseLink,
110 | description
111 | } = this.props;
112 |
113 | const { expanded } = this.state;
114 | return ;
129 | }
130 | };
131 |
132 | const SampleMenuItem = withStyles(styles)(Def);
133 | export default SampleMenuItem;
--------------------------------------------------------------------------------
/src/charts/bar/index.js:
--------------------------------------------------------------------------------
1 | import draw from './draw';
2 | export default {
3 | key: 'bar',
4 | name: 'Bar Chart',
5 | preview: require('./thumb.png'),
6 | draw,
7 | required: ['height', 'width', 'x', 'y'],
8 | valid: fields =>
9 | fields.has('height') ||
10 | fields.has('width') ||
11 | fields.has('x') ||
12 | fields.has('y'),
13 | randomize(fields) {
14 | if (!fields.length) {
15 | return {};
16 | }
17 |
18 | const horizontal = Math.random() > 0.5;
19 | const dimField = horizontal ? 'width' : 'height';
20 | const posField = horizontal ? 'y' : 'x';
21 |
22 | const fieldNames = [dimField, posField];
23 |
24 | const indices = Object.keys(fields).map(parseFloat);
25 | let numericFieldIndices = indices.filter(index => {
26 | const f = fields[index];
27 | const type = f.type;
28 | return type === 'int' || type === 'float';
29 | });
30 |
31 | const fieldMap = {};
32 | fieldNames.forEach(name => {
33 | if (!numericFieldIndices.length) {
34 | numericFieldIndices = indices;
35 | }
36 | const count = numericFieldIndices.length;
37 | const i = Math.floor(Math.random() * count) % count;
38 | const index = numericFieldIndices[i];
39 | numericFieldIndices.splice(i, 1);
40 | fieldMap[name] = index;
41 | });
42 | return fieldMap;
43 | },
44 | properties: [
45 | {
46 | key: 'height',
47 | name: 'Height'
48 | },
49 | {
50 | key: 'width',
51 | name: 'Width'
52 | },
53 | {
54 | key: 'x',
55 | name: 'X Position'
56 | },
57 | {
58 | key: 'y',
59 | name: 'Y Position'
60 | },
61 | {
62 | key: 'order',
63 | name: 'Order'
64 | },
65 | {
66 | key: 'color',
67 | name: 'Color'
68 | },
69 | {
70 | key: 'label',
71 | name: 'Label'
72 | }
73 | ],
74 | geneCategories: [
75 | {
76 | category: 'Color',
77 | genes: [
78 | ['Hue Range', 'hueRange'],
79 | ['Hue Offset', 'hueOffset'],
80 | ['Saturation Offset', 'saturationOffset'],
81 | ['Saturation Factor', 'saturationValueFactor'],
82 | ['Lightness Offset', 'lightnessOffset'],
83 | ['Lightness Factor', 'lightnessValueFactor']
84 | ]
85 | },
86 | {
87 | category: 'Width',
88 | genes: [
89 | ['Offset', 'widthOffset'],
90 | ['Rank Factor', 'widthRankFactor'],
91 | ['Random Factor', 'widthRandomFactor']
92 | ]
93 | },
94 | {
95 | category: 'Height',
96 | genes: [
97 | ['Offset', 'heightOffset'],
98 | ['Rank Factor', 'heightRankFactor'],
99 | ['Random Factor', 'heightRandomFactor']
100 | ]
101 | },
102 | {
103 | category: 'X Position',
104 | genes: [
105 | ['Offset', 'xOffset'],
106 | ['Rank Factor', 'xRankFactor'],
107 | ['Random Factor', 'xRandomFactor']
108 | ]
109 | },
110 | {
111 | category: 'Y Position',
112 | genes: [
113 | ['Offset', 'yOffset'],
114 | ['Rank Factor', 'yRankFactor'],
115 | ['Random Factor', 'yRandomFactor']
116 | ]
117 | },
118 | {
119 | category: 'Rotation',
120 | genes: [
121 | ['Offset', 'rotationOffset'],
122 | ['Rank Factor', 'rotationRankFactor'],
123 | // ['Value Factor', 'rotationValueFactor'],
124 | ['Random Factor', 'rotationRandomFactor']
125 | ]
126 | }
127 | ],
128 | genes: {
129 | widthOffset: 0,
130 | widthRankFactor: 0,
131 | widthRandomFactor: 0,
132 |
133 | heightOffset: 0,
134 | heightRankFactor: 0,
135 | heightRandomFactor: 0,
136 |
137 | xOffset: 0,
138 | xRankFactor: 0,
139 | xRandomFactor: 0,
140 |
141 | yOffset: 0,
142 | yRankFactor: 0,
143 | yRandomFactor: 0,
144 |
145 | rotationOffset: 0,
146 | rotationRankFactor: 0,
147 | rotationValueFactor: 0,
148 | rotationRandomFactor: 0,
149 |
150 | hueOffset: 0,
151 | hueRange: 0.6,
152 | saturationOffset: 1,
153 | saturationValueFactor: 0,
154 | lightnessOffset: 0.5,
155 | lightnessValueFactor: 0
156 | }
157 | };
--------------------------------------------------------------------------------
/src/util/svgToMesh.js:
--------------------------------------------------------------------------------
1 | /*
2 | Adapted from https://github.com/mattdesl/svg-mesh-3d/
3 | MIT License
4 | - Code style change for readability
5 | - Use custom adaptation of normalize function (don't convert lines to curves)
6 | - Don't convert points to 3D or flip Y axis
7 | - Remove modules we don't plan to run to save on size
8 | */
9 |
10 | import parseSVG from 'parse-svg-path';
11 | import getContours from './contours';
12 | import cdt2d from 'cdt2d';
13 | import cleanPSLG from 'clean-pslg';
14 | // import getBounds from 'bound-points';
15 | // import normalize from 'normalize-path-scale';
16 | // import random from 'random-float';
17 | import assign from 'object-assign';
18 | // import simplify from 'simplify-path';
19 |
20 | // function to3D(positions) {
21 | // for (let i = 0; i < positions.length; i++) {
22 | // const xy = positions[i];
23 | // xy[1] *= -1;
24 | // xy[2] = xy[2] || 0;
25 | // }
26 | // }
27 |
28 | // function addRandomPoints(positions, bounds, count) {
29 | // const min = bounds[0];
30 | // const max = bounds[1];
31 |
32 | // for (let i = 0; i < count; i++) {
33 | // positions.push([ // random [ x, y ]
34 | // random(min[0], max[0]),
35 | // random(min[1], max[1])
36 | // ]);
37 | // }
38 | // }
39 |
40 | function denestPolyline(nested) {
41 | const positions = [];
42 | const edges = [];
43 |
44 | for (let i = 0; i < nested.length; i++) {
45 | const path = nested[i];
46 | const loop = [];
47 | for (let j = 0; j < path.length; j++) {
48 | const pos = path[j];
49 | let idx = positions.indexOf(pos);
50 | if (idx === -1) {
51 | positions.push(pos);
52 | idx = positions.length - 1;
53 | }
54 | loop.push(idx);
55 | }
56 | edges.push(loop);
57 | }
58 | return {
59 | positions: positions,
60 | edges: edges
61 | };
62 | }
63 |
64 | function svgToMesh(svgPath, opt) {
65 | if (typeof svgPath !== 'string') {
66 | throw new TypeError('must provide a string as first parameter');
67 | }
68 |
69 | opt = assign({
70 | delaunay: true,
71 | clean: true,
72 | exterior: false,
73 | randomization: 0,
74 | simplify: 0,
75 | scale: 1
76 | }, opt);
77 |
78 | // parse string as a list of operations
79 | const svg = parseSVG(svgPath);
80 |
81 | // convert curves into discrete points
82 | const contours = getContours(svg, opt.scale);
83 |
84 | // optionally simplify the path for faster triangulation and/or aesthetics
85 | // if (opt.simplify > 0 && typeof opt.simplify === 'number') {
86 | // for (let i = 0; i < contours.length; i++) {
87 | // contours[i] = simplify(contours[i], opt.simplify);
88 | // }
89 | // }
90 |
91 | // prepare for triangulation
92 | const polyline = denestPolyline(contours);
93 | const positions = polyline.positions;
94 | // const bounds = getBounds(positions);
95 |
96 | // optionally add random points for aesthetics
97 | // const randomization = opt.randomization;
98 | // if (typeof randomization === 'number' && randomization > 0) {
99 | // addRandomPoints(positions, bounds, randomization);
100 | // }
101 |
102 | const loops = polyline.edges;
103 | const edges = [];
104 | for (let i = 0; i < loops.length; ++i) {
105 | const loop = loops[i];
106 | for (let j = 0; j < loop.length; j++) {
107 | edges.push([loop[j], loop[(j + 1) % loop.length]]);
108 | }
109 | }
110 |
111 | // this updates points/edges so that they now form a valid PSLG
112 | if (opt.clean !== false) {
113 | cleanPSLG(positions, edges);
114 | }
115 |
116 | // triangulate mesh
117 | const cells = cdt2d(positions, edges, opt);
118 |
119 | // rescale to [-1 ... 1]
120 | // if (opt.normalize !== false) {
121 | // normalize(positions, bounds);
122 | // }
123 |
124 | // convert to 3D representation and flip on Y axis for convenience w/ OpenGL
125 | // to3D(positions);
126 |
127 | return {
128 | positions: positions,
129 | cells: cells
130 | };
131 | }
132 |
133 | export default svgToMesh;
--------------------------------------------------------------------------------
/src/charts/radialArea/index.js:
--------------------------------------------------------------------------------
1 | import draw from './draw';
2 | import { defaultColorValues } from '../geneColor';
3 |
4 | export default {
5 | key: 'radialArea',
6 | name: 'Radial Area',
7 | preview: require('./thumb.png'),
8 | required: ['radius'],
9 | // valid: fields =>
10 | // fields.has('height') ||
11 | // fields.has('width') ||
12 | // fields.has('x') ||
13 | // fields.has('y'),
14 | randomize(fields) {
15 | if (!fields.length) {
16 | return {};
17 | }
18 |
19 | const fieldNames = ['radius', 'time'];
20 |
21 | if (Math.random() > 0.75) {
22 | fieldNames.push('angle');
23 | }
24 |
25 | const indices = Object.keys(fields).map(parseFloat);
26 | let numericFieldIndices = indices.filter(index => {
27 | const f = fields[index];
28 | const type = f.type;
29 | return type === 'int' || type === 'float';
30 | });
31 |
32 | const fieldMap = {};
33 | fieldNames.forEach(name => {
34 | if (!numericFieldIndices.length) {
35 | numericFieldIndices = indices;
36 | }
37 | const count = numericFieldIndices.length;
38 | const i = Math.floor(Math.random() * count) % count;
39 | const index = numericFieldIndices[i];
40 | numericFieldIndices.splice(i, 1);
41 | fieldMap[name] = index;
42 | });
43 |
44 | let stringFieldIndices = indices.filter(index => {
45 | const f = fields[index];
46 | return f.type === 'string';
47 | });
48 | if (!stringFieldIndices.length) {
49 | stringFieldIndices = indices;
50 | }
51 | if (!indices.length) {
52 | stringFieldIndices = Object.keys(fields).map(parseFloat);
53 | }
54 | const count = stringFieldIndices.length;
55 | const i = Math.floor(Math.random() * count) % count;
56 | const index = numericFieldIndices[i];
57 | numericFieldIndices.splice(i, 1);
58 | fieldMap.group = index;
59 |
60 | return fieldMap;
61 | },
62 | draw,
63 | properties: [
64 | {
65 | key: 'group',
66 | name: 'Group'
67 | },
68 | {
69 | key: 'time',
70 | name: 'Time'
71 | },
72 | {
73 | key: 'radius',
74 | name: 'Radius'
75 | },
76 | {
77 | key: 'angle',
78 | name: 'Angle'
79 | },
80 | {
81 | key: 'order',
82 | name: 'Depth Order'
83 | },
84 | {
85 | key: 'color',
86 | name: 'Color'
87 | },
88 | {
89 | key: 'label',
90 | name: 'Label'
91 | }
92 | ],
93 | geneCategories: [
94 | {
95 | category: 'Color',
96 | genes: [
97 | ['Hue Range', 'hueRange'],
98 | ['Hue Offset', 'hueOffset'],
99 | ['Saturation Offset', 'saturationOffset'],
100 | ['Saturation Factor', 'saturationValueFactor'],
101 | ['Lightness Offset', 'lightnessOffset'],
102 | ['Lightness Factor', 'lightnessValueFactor']
103 | ]
104 | },
105 | {
106 | category: 'X Position',
107 | genes: [
108 | ['Offset', 'xOffset'],
109 | ['Rank Factor', 'xRankFactor'],
110 | ['Random Factor', 'xRandomFactor']
111 | ]
112 | },
113 | {
114 | category: 'Y Position',
115 | genes: [
116 | ['Offset', 'yOffset'],
117 | ['Rank Factor', 'yRankFactor'],
118 | ['Random Factor', 'yRandomFactor']
119 | ]
120 | },
121 | {
122 | category: 'Scale',
123 | genes: [
124 | ['Offset', 'scaleOffset'],
125 | ['Rank Factor', 'scaleRankFactor']
126 | ]
127 | },
128 | {
129 | category: 'Rotation',
130 | genes: [
131 | ['Offset', 'rotationOffset'],
132 | ['Rank Factor', 'rotationRankFactor'],
133 | // ['Value Factor', 'rotationValueFactor'],
134 | ['Random Factor', 'rotationRandomFactor']
135 | ]
136 | }
137 | ],
138 | genes: {
139 | xOffset: 0,
140 | xRankFactor: 0,
141 | xRandomFactor: 0,
142 |
143 | yOffset: 0,
144 | yRankFactor: 0,
145 | yRandomFactor: 0,
146 |
147 | rotationOffset: 0,
148 | rotationRankFactor: 0,
149 | rotationValueFactor: 0,
150 | rotationRandomFactor: 0,
151 |
152 | scaleOffset: 0.9,
153 | scaleRankFactor: 0,
154 |
155 | ...defaultColorValues
156 | }
157 | };
--------------------------------------------------------------------------------
/src/components/DataTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | /*
4 | Material UI components
5 | */
6 | import PropTypes from 'prop-types';
7 | import withStyles from '@material-ui/core/styles/withStyles';
8 | import Table from '@material-ui/core/Table';
9 | import TableBody from '@material-ui/core/TableBody';
10 | import TableCell from '@material-ui/core/TableCell';
11 | import TableHead from '@material-ui/core/TableHead';
12 | import TableRow from '@material-ui/core/TableRow';
13 | import TableFooter from '@material-ui/core/TableFooter';
14 | import TablePagination from '@material-ui/core/TablePagination';
15 |
16 | const styles = () => ({
17 | // todo: figure out scrolling, make rows thinner
18 | tableBody: {
19 | maxHeight: 200,
20 | overflow: 'auto'
21 | },
22 | tableCell: {
23 | whiteSpace: 'nowrap'
24 | }
25 |
26 | });
27 |
28 | const valueFormats = {
29 | int: v => v,
30 | float: f => f,
31 |
32 | datetime: v => {
33 | const d = new Date(v);
34 | return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
35 | },
36 | boolean: v => v ? 'true' : 'false',
37 | string: v => v
38 | };
39 |
40 | class DataTable extends React.Component {
41 | state = {
42 | page: 0,
43 | rowsPerPage: 10
44 | }
45 |
46 | static propTypes = {
47 | classes: PropTypes.object.isRequired,
48 | data: PropTypes.object
49 | }
50 |
51 | handleChangePage = (event, page) => {
52 | this.setState({ page });
53 | }
54 |
55 | handleChangeRowsPerPage = event => {
56 | this.setState({ rowsPerPage: event.target.value });
57 | }
58 |
59 | render() {
60 | const { classes, data } = this.props;
61 |
62 | const dataFields = data && data.get && data.get('fields');
63 | if (dataFields && dataFields.forEach) {
64 | /*
65 | Checking for Alberto's bug
66 | */
67 | dataFields.forEach(field => {
68 | if (!field || !field.get) {
69 | console.warn('Missing data field', field, data);
70 | }
71 | });
72 | }
73 |
74 |
75 | const rows = data && data.get && data.get('rows');
76 | const fields = data && data.get && data.get('fields')
77 | .filter(field => field && field.get);
78 | const { page, rowsPerPage } = this.state;
79 | const rowCount = rows && rows.length;
80 | const pageRows = rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
81 | const emptyRows = rowsPerPage - Math.min(rowsPerPage, rowCount - page * rowsPerPage);
82 |
83 | return
84 |
;
126 | }
127 | }
128 |
129 | const StyleDataTable = withStyles(styles)(DataTable);
130 | export default StyleDataTable;
--------------------------------------------------------------------------------
/src/components/Tip.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import withStyles from '@material-ui/core/styles/withStyles';
5 | import PropTypes from 'prop-types';
6 | import Typography from '@material-ui/core/Typography';
7 | import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
8 | import HelpIcon from '@material-ui/icons/Help';
9 | import morphLogo from '../images/morph-logo-text.svg';
10 | // import SvgIcon from '@material'
11 |
12 | const styles = theme => ({
13 | root: {
14 | position: 'relative'
15 | },
16 | tip: {
17 | marginTop: theme.spacing.unit * 4,
18 | marginBottom: theme.spacing.unit * 4,
19 | marginLeft: theme.spacing.unit * 2,
20 | marginRight: theme.spacing.unit * 2,
21 | fontSize: '1.1em',
22 | fontWeight: 'normal',
23 |
24 | '& > p': {
25 | marginBottom: 0,
26 | marginTop: '0.5em'
27 | },
28 |
29 | '& > p:first-child': {
30 | marginTop: 0,
31 | fontSize: '1.25em'
32 | }
33 | },
34 | canCompact: {
35 | marginBottom: theme.spacing.unit * 2,
36 | borderBottom: `${theme.palette.divider} solid 1px`,
37 | '& > a > $logo': {
38 | display: 'none'
39 | }
40 | },
41 | icon: {
42 | position: 'absolute',
43 | bottom: 0,
44 | right: 6,
45 | width: 24,
46 | height: 36,
47 | fill: 'white'
48 | },
49 | logo: {
50 | position: 'absolute',
51 | top: 0,
52 | left: 0,
53 | height: '100%',
54 | boxSizing: 'border-box',
55 | padding: theme.spacing.unit,
56 | backgroundColor: theme.palette.background.default
57 | },
58 | compact: {
59 | '& > $tip': {
60 | margin: theme.spacing.unit,
61 | padding: `0 40px`
62 | }
63 | }
64 | });
65 |
66 | // global for now
67 | let expanded = false;
68 | const compactMediaQuery = window.matchMedia('(max-width: 620px), (max-height: 450px)');
69 |
70 | const Def = class Tip extends React.Component {
71 | state = {
72 | expanded,
73 | isCompact: compactMediaQuery.matches
74 | }
75 |
76 | static propTypes = {
77 | classes: PropTypes.object.isRequired,
78 | className: PropTypes.string,
79 | theme: PropTypes.object.isRequired,
80 | children: PropTypes.oneOfType([
81 | PropTypes.arrayOf(PropTypes.node),
82 | PropTypes.node
83 | ]),
84 | compact: PropTypes.string,
85 | color: PropTypes.string
86 | }
87 | toggle = () => {
88 | expanded = !expanded;
89 | this.setState({
90 | expanded
91 | });
92 | }
93 |
94 | setCompact = () => {
95 | this.setState({
96 | isCompact: compactMediaQuery.matches
97 | });
98 | }
99 |
100 | componentDidMount() {
101 | compactMediaQuery.addListener(this.setCompact);
102 | }
103 |
104 | componentWillUnmount() {
105 | compactMediaQuery.removeListener(this.setCompact);
106 | }
107 |
108 | render() {
109 | const {classes, children, compact, color, theme, ...otherProps} = this.props;
110 | const { isCompact } = this.state;
111 | const canCompact = compact && isCompact;
112 | const content = canCompact && !expanded && compact || children;
113 | const Arrow = expanded ? ArrowDropUp : HelpIcon;
114 |
115 | const backgroundColor = color || 'transparent';
116 | const textColor = backgroundColor !== 'transparent' ?
117 | theme.palette.getContrastText(color) :
118 | theme.palette.text.primary;
119 |
120 | return
51 | Uploading...
52 | ;
54 | } else if (worksheets) {
55 | content =
56 | Select a worksheet
57 |
58 | {/*{state.file.name} */}
59 |
60 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | ;
74 | } else {
75 | content =
76 | Upload File
77 |
78 | {fileError} }
92 |
93 |
94 |
95 |
96 | ;
97 | }
98 |
99 | return ;
115 | };
116 |
117 | Def.propTypes = {
118 | classes: PropTypes.object.isRequired,
119 | className: PropTypes.string,
120 | children: PropTypes.oneOfType([
121 | PropTypes.arrayOf(PropTypes.node),
122 | PropTypes.node
123 | ]),
124 | open: PropTypes.bool,
125 | onClose: PropTypes.func.isRequired,
126 | onClick: PropTypes.func.isRequired,
127 | cancelUpload: PropTypes.func.isRequired,
128 | handleChangeWorksheet: PropTypes.func.isRequired,
129 | onSubmitWorksheetSelection: PropTypes.func.isRequired,
130 | overwriteWarning: PropTypes.bool,
131 | fileError: PropTypes.string,
132 | waiting: PropTypes.bool,
133 | worksheet: PropTypes.string,
134 | worksheets: PropTypes.arrayOf(PropTypes.object)
135 | };
136 |
137 | const UploadDialog = withStyles(styles)(Def);
138 | export default UploadDialog;
--------------------------------------------------------------------------------
/src/components/SocialShareDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import copy from 'clipboard-copy';
3 |
4 | import withStyles from '@material-ui/core/styles/withStyles';
5 | import PropTypes from 'prop-types';
6 | import Dialog from '@material-ui/core/Dialog';
7 | import DialogActions from '@material-ui/core/DialogActions';
8 | import DialogContent from '@material-ui/core/DialogContent';
9 | import List from '@material-ui/core/List';
10 | import DialogTitle from '@material-ui/core/DialogTitle';
11 | import Button from '@material-ui/core/Button';
12 | import ListEntry from './ListEntry';
13 |
14 | // import ImageIcon from '@material-ui/icons/Image';
15 | import ShareIcon from '@material-ui/icons/Share';
16 | import MailIcon from '@material-ui/icons/Mail';
17 | import TwitterIcon from './icons/Twitter';
18 | import FacebookIcon from './icons/Facebook';
19 | import {
20 | shareFacebook,
21 | shareTwitter,
22 | shareNative,
23 | shareEmail
24 | } from '../util/share';
25 | import { SHARE_HASHTAGS } from '../constants';
26 |
27 |
28 | const styles = theme => ({
29 | dialog: {
30 | minWidth: '30%',
31 | maxHeight: '60%',
32 | width: 'min-content',
33 | maxWidth: '90%'
34 | },
35 | dialogContent: {
36 | display: 'flex',
37 | flexDirection: 'column',
38 | color: theme.palette.text.primary
39 | },
40 | dialogListContainer: {
41 | display: 'block',
42 | overflow: 'auto',
43 | '& a': {
44 | color: 'inherit',
45 | textDecoration: 'none'
46 | },
47 | '& svg': {
48 | marginRight: theme.spacing.unit
49 | }
50 | },
51 | listEntry: {
52 | cursor: 'pointer'
53 | },
54 | copy: {
55 | display: 'flex',
56 | justifyItems: 'stretch',
57 | '& > input': {
58 | flex: 1,
59 | border: 'none',
60 | fontSize: 14,
61 | minWidth: 40,
62 | background: 'transparent',
63 | color: theme.palette.text.primary
64 | },
65 | marginTop: theme.spacing.unit,
66 | padding: `0 ${theme.spacing.unit}px`,
67 | border: `${theme.palette.divider} solid 1px`,
68 | backgroundColor: theme.palette.background.default
69 | }
70 | });
71 |
72 | const selectInput = evt => evt.target.select();
73 |
74 | const Def = class SocialShareDialog extends React.Component {
75 | static propTypes = {
76 | classes: PropTypes.object.isRequired,
77 | open: PropTypes.bool,
78 | onClose: PropTypes.func.isRequired,
79 | title: PropTypes.string.isRequired,
80 | text: PropTypes.string.isRequired,
81 | url: PropTypes.string.isRequired
82 | }
83 |
84 | static defaultProps = {
85 | title: '',
86 | text: ''
87 | }
88 |
89 | copyURL = () => copy(this.props.url)
90 |
91 | render() {
92 |
93 | const {
94 | classes,
95 | open,
96 | onClose,
97 | url,
98 | title,
99 | text,
100 | ...otherProps
101 | } = this.props;
102 | const shareActions = navigator.share ?
103 | [ shareNative(title, text, url, SHARE_HASHTAGS)} className={classes.listEntry}> ] :
104 | [
105 | shareTwitter(title, text, url, SHARE_HASHTAGS)} className={classes.listEntry}> ,
106 | shareFacebook(url)} className={classes.listEntry}>
107 | ];
108 | // shareActions.push(
109 | //
110 | // );
113 | shareActions.push( shareEmail(title, text, url)} className={classes.listEntry}>
114 | );
116 |
117 | return ;
145 | }
146 | };
147 |
148 | const SocialShareDialog = withStyles(styles)(Def);
149 | export default SocialShareDialog;
--------------------------------------------------------------------------------
/src/drawing/SpritePool.js:
--------------------------------------------------------------------------------
1 | import { RenderTexture as RenderTexture } from '@pixi/core';
2 | import { SCALE_MODES } from '@pixi/constants';
3 |
4 | import { Renderer } from '@pixi/core';
5 | import { Sprite as PIXISprite, SpriteRenderer } from '@pixi/sprite';
6 | Renderer.registerPlugin('sprite', SpriteRenderer);
7 |
8 | import { nextLog2 } from '../util/nextPowerOfTwo';
9 |
10 | function Sprite(spriteLevel, index) {
11 | const rt = RenderTexture.create(spriteLevel.size, spriteLevel.size, SCALE_MODES.LINEAR, 1);
12 | rt.baseTexture.mipmap = true;
13 |
14 | this.pixiSprite = new PIXISprite(rt);
15 | this.rt = rt;
16 | this.client = null;
17 | this.spriteLevel = spriteLevel;
18 | this.level = spriteLevel.level;
19 | this.index = index;
20 |
21 | const scale = 1 / spriteLevel.size;
22 | this.pixiSprite.scale.set(scale, scale);
23 |
24 | this.destroy = () => {
25 | rt.destroy();
26 | this.pixiSprite.destroy();
27 | };
28 | }
29 |
30 | function SpriteLevel(level, maxTextureSize) {
31 | /* eslint-disable no-bitwise */
32 | const size = 1 << level;
33 | /* eslint-enable no-bitwise */
34 | const d = maxTextureSize / size;
35 | const numSprites = d * d;
36 | const available = new Set(); // sprite.index
37 | const availableQueue = [];
38 | const sprites = [];
39 | const claims = new Map(); // index on client
40 |
41 | this.level = level;
42 | this.size = size;
43 | this.dimension = d;
44 |
45 | const getSprite = () =>{
46 | let index = -1;
47 | if (sprites.length < numSprites) {
48 | index = sprites.length;
49 | } else if (availableQueue.length) {
50 | index = availableQueue.shift();
51 | available.delete(index);
52 | } else {
53 | return null;
54 | }
55 |
56 | if (!sprites[index]) {
57 | sprites[index] = new Sprite(this, index);
58 | }
59 | return sprites[index];
60 | };
61 |
62 | this.release = client => {
63 | const claim = claims.get(client);
64 | if (claim) {
65 | const sprite = claim.sprite;
66 | if (claim.exclusive && sprite && !available.has(sprite.index)) {
67 | available.add(sprite.index);
68 | availableQueue.push(sprite.index);
69 | }
70 | claim.exclusive = false;
71 | }
72 | };
73 |
74 | this.requestSprite = client => {
75 | let claim = claims.get(client);
76 | if (!claim) {
77 | claim = {
78 | exclusive: false,
79 | sprite: null
80 | };
81 | claims.set(client, claim);
82 | }
83 |
84 | const sprite = claim.sprite || getSprite();
85 | if (!sprite) {
86 | return null;
87 | }
88 |
89 | // re-using an existing sprite and making it exclusive
90 | // so make sure it's not available anymore
91 | if (sprite === claim.sprite && available.has(sprite.index)) {
92 | const i = availableQueue.indexOf(sprite.index);
93 | availableQueue.splice(i, 1);
94 | available.delete(sprite.index);
95 | }
96 |
97 | if (sprite.client && sprite.client !== client) {
98 | const otherClaim = claims.get(sprite.client);
99 | if (otherClaim) {
100 | otherClaim.sprite = null;
101 | otherClaim.exclusive = false;
102 | }
103 | }
104 | claim.sprite = sprite;
105 | claim.exclusive = true;
106 |
107 | return sprite;
108 | };
109 |
110 | this.destroy = () => {
111 | sprites.forEach(s => s.destroy());
112 | sprites.length = 0;
113 |
114 | claims.clear();
115 |
116 | available.clear();
117 | availableQueue.length = 0;
118 |
119 | // brt.destroy();
120 | };
121 | }
122 |
123 | function SpritePool({
124 | max = 1024,
125 | min = 64,
126 | maxTextureSize = 4096
127 | } = {}) {
128 |
129 | const minLevel = nextLog2(min);
130 | const maxLevel = nextLog2(Math.min(max, maxTextureSize));
131 |
132 | const levels = new Map();
133 | const clients = new Set();
134 |
135 | function getSpriteLevel(level) {
136 | if (levels.has(level)) {
137 | return levels.get(level);
138 | }
139 |
140 | const spriteLevel = new SpriteLevel(level, maxTextureSize);
141 | levels.set(level, spriteLevel);
142 | return spriteLevel;
143 | }
144 |
145 | this.get = name => {
146 | let visible = false;
147 | const client = {
148 | name,
149 | release() {
150 | if (visible) {
151 | levels.forEach(level => level.release(client));
152 | visible = false;
153 | }
154 | },
155 | render(minResolution, callback, forceRender) {
156 | const level = Math.max(minLevel, Math.min(maxLevel, nextLog2(minResolution)));
157 | let sprite = null;
158 | for (let l = maxLevel; l >= level && !sprite; l--) {
159 | sprite = getSpriteLevel(l).requestSprite(client);
160 | }
161 |
162 | visible = true;
163 |
164 | if (!sprite) {
165 | return null;
166 | }
167 |
168 | if (forceRender || sprite.client !== client) {
169 | sprite.client = client;
170 | callback(sprite.rt);
171 | }
172 |
173 | return sprite.pixiSprite;
174 | },
175 | destroy() {
176 | client.release();
177 | clients.delete(client);
178 | }
179 | };
180 | clients.add(client);
181 | return client;
182 | };
183 |
184 | this.destroy = () => {
185 | clients.forEach((claims, client) => client.destroy());
186 | levels.forEach(level => level.destroy());
187 | };
188 | }
189 |
190 | export default SpritePool;
--------------------------------------------------------------------------------
/src/util/normalize.js:
--------------------------------------------------------------------------------
1 | /*
2 | Adapted from https://github.com/jkroso/normalize-svg-path
3 | MIT License
4 | - Code style change for readability
5 | - Don't convert lines to curves, since they waste points
6 | */
7 |
8 | const π = Math.PI;
9 | const c120 = radians(120);
10 |
11 | function line(x1, y1, x2, y2) {
12 | // return ['C', x1, y1, x2, y2, x2, y2];
13 | return ['L', x2, y2];
14 | }
15 |
16 | function radians(degress) {
17 | return degress * (π / 180);
18 | }
19 |
20 | function rotate(x, y, rad) {
21 | return {
22 | x: x * Math.cos(rad) - y * Math.sin(rad),
23 | y: x * Math.sin(rad) + y * Math.cos(rad)
24 | };
25 | }
26 |
27 | /* eslint-disable max-params */
28 | function quadratic(x1, y1, cx, cy, x2, y2) {
29 | return [
30 | 'C',
31 | x1 / 3 + 2 / 3 * cx,
32 | y1 / 3 + 2 / 3 * cy,
33 | x2 / 3 + 2 / 3 * cx,
34 | y2 / 3 + 2 / 3 * cy,
35 | x2,
36 | y2
37 | ];
38 | }
39 |
40 | // This function is ripped from
41 | // github.com/DmitryBaranovskiy/raphael/blob/4d97d4/raphael.js#L2216-L2304
42 | // which references w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
43 | // TODO: make it human readable
44 |
45 | function arc(x1, y1, rx, ry, angle, largeArcFlag, sweepFlag, x2, y2, recursive) {
46 | let f1 = 0;
47 | let f2 = 0;
48 | let cx = 0;
49 | let cy = 0;
50 |
51 | if (!recursive) {
52 | let xy = rotate(x1, y1, -angle);
53 | x1 = xy.x;
54 | y1 = xy.y;
55 |
56 | xy = rotate(x2, y2, -angle);
57 | x2 = xy.x;
58 | y2 = xy.y;
59 |
60 | const x = (x1 - x2) / 2;
61 | const y = (y1 - y2) / 2;
62 | let h = x * x / (rx * rx) + y * y / (ry * ry);
63 | if (h > 1) {
64 | h = Math.sqrt(h);
65 | rx = h * rx;
66 | ry = h * ry;
67 | }
68 |
69 | const rx2 = rx * rx;
70 | const ry2 = ry * ry;
71 | let k = (largeArcFlag === sweepFlag ? -1 : 1) *
72 | Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
73 | if (k === Infinity) {
74 | // neutralize
75 | k = 1;
76 | }
77 | cx = k * rx * y / ry + (x1 + x2) / 2;
78 | cy = k * -ry * x / rx + (y1 + y2) / 2;
79 | f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
80 | f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
81 |
82 | f1 = x1 < cx ? π - f1 : f1;
83 | f2 = x2 < cx ? π - f2 : f2;
84 |
85 | if (f1 < 0) {
86 | f1 = π * 2 + f1;
87 | }
88 | if (f2 < 0) {
89 | f2 = π * 2 + f2;
90 | }
91 | if (sweepFlag && f1 > f2) {
92 | f1 = f1 - π * 2;
93 | }
94 | if (!sweepFlag && f2 > f1) {
95 | f2 = f2 - π * 2;
96 | }
97 | } else {
98 | [f1, f2, cx, cy] = recursive;
99 | }
100 |
101 | // greater than 120 degrees requires multiple segments
102 | let res = 0;
103 | if (Math.abs(f2 - f1) > c120) {
104 | const f2old = f2;
105 | const x2old = x2;
106 | const y2old = y2;
107 | f2 = f1 + c120 * (sweepFlag && f2 > f1 ? 1 : -1);
108 | x2 = cx + rx * Math.cos(f2);
109 | y2 = cy + ry * Math.sin(f2);
110 | res = arc(x2, y2, rx, ry, angle, 0, sweepFlag, x2old, y2old, [f2, f2old, cx, cy]);
111 | }
112 | const t = Math.tan((f2 - f1) / 4);
113 | const hx = 4 / 3 * rx * t;
114 | const hy = 4 / 3 * ry * t;
115 | let curve = [
116 | 2 * x1 - (x1 + hx * Math.sin(f1)),
117 | 2 * y1 - (y1 - hy * Math.cos(f1)),
118 | x2 + hx * Math.sin(f2),
119 | y2 - hy * Math.cos(f2),
120 | x2,
121 | y2
122 | ];
123 | if (recursive) {
124 | return curve;
125 | }
126 | if (res) {
127 | curve = curve.concat(res);
128 | }
129 | for (let i = 0; i < curve.length;) {
130 | const rot = rotate(curve[i], curve[i + 1], angle);
131 | curve[i++] = rot.x;
132 | curve[i++] = rot.y;
133 | }
134 | return curve;
135 | }
136 | /* eslint-enable max-params */
137 |
138 | export default function normalize(path) {
139 | // init state;
140 | const result = [];
141 | let prev;
142 | let bezierX = 0;
143 | let bezierY = 0;
144 | let startX = 0;
145 | let startY = 0;
146 | let quadX = null;
147 | let quadY = null;
148 | let x = 0;
149 | let y = 0;
150 |
151 | path.forEach(seg => {
152 | const command = seg[0];
153 |
154 | if (command === 'M') {
155 | startX = seg[1];
156 | startY = seg[2];
157 | } else if (command === 'A') {
158 | seg = arc(x, y, seg[1], seg[2], radians(seg[3]), seg[4], seg[5], seg[6], seg[7]);
159 | // split multi part
160 | seg.unshift('C');
161 | if (seg.length > 7) {
162 | result.push(seg.splice(0, 7));
163 | seg.unshift('C');
164 | }
165 | } else if (command === 'S') {
166 | // default control point;
167 | let cx = x;
168 | let cy = y;
169 | if (prev === 'C' || prev === 'S') {
170 | cx += cx - bezierX; // reflect the previous command's control
171 | cy += cy - bezierY; // point relative to the current point
172 | }
173 | seg = ['C', cx, cy, seg[1], seg[2], seg[3], seg[4]];
174 | } else if (command === 'T') {
175 | if (prev === 'Q' || prev === 'T') {
176 | quadX = x * 2 - quadX; // as with 'S' reflect previous control point;
177 | quadY = y * 2 - quadY;
178 | } else {
179 | quadX = x;
180 | quadY = y;
181 | }
182 | seg = quadratic(x, y, quadX, quadY, seg[1], seg[2]);
183 | } else if (command === 'Q') {
184 | quadX = seg[1];
185 | quadY = seg[2];
186 | seg = quadratic(x, y, seg[1], seg[2], seg[3], seg[4]);
187 | } else if (command === 'H') {
188 | seg = line(x, y, seg[1], y);
189 | } else if (command === 'V') {
190 | seg = line(x, y, x, seg[1]);
191 | } else if (command === 'Z') {
192 | seg = line(x, y, startX, startY);
193 | }
194 |
195 | // update state
196 | prev = command;
197 | x = seg[seg.length - 2];
198 | y = seg[seg.length - 1];
199 | if (seg.length > 4) {
200 | bezierX = seg[seg.length - 4];
201 | bezierY = seg[seg.length - 3];
202 | } else {
203 | bezierX = x;
204 | bezierY = y;
205 | }
206 | result.push(seg);
207 | });
208 |
209 | return result;
210 | }
211 |
--------------------------------------------------------------------------------
/src/images/morph-logo-text.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/images/morph-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
76 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
233 | ;
274 | }
275 | };
276 |
277 | const NodeInspector = withStyles(styles, { withTheme: true })(Def);
278 | export default NodeInspector;
--------------------------------------------------------------------------------
109 |
110 |
111 | {
112 | displayColorPicker ?
113 |
114 |
;
124 | }
125 | };
126 |
127 | const ColorPicker = withStyles(styles)(Def);
128 | export default ColorPicker;
--------------------------------------------------------------------------------
/src/drawing/SVGDrawable.js:
--------------------------------------------------------------------------------
1 | import assign from 'object-assign';
2 |
3 | const constructors = [];
4 |
5 | function SVGDrawable(parent, drawable) {
6 | const children = new Map();
7 | this.element = null;
8 |
9 | function removeChild(childPath) {
10 | const svgDrawable = children.get(childPath);
11 | if (svgDrawable) {
12 | children.delete(childPath);
13 | }
14 | }
15 |
16 | this.update = () => {
17 | // update matrix - copy from drawable
18 | if (parent && drawable && !drawable.visible && this.element) {
19 | parent.removeChild(this.element);
20 | this.element = null;
21 | }
22 | if (drawable && drawable.visible && this.element) {
23 | this.element.id = drawable.id;
24 |
25 | const dataset = this.element.dataset;
26 | Object.keys(dataset).forEach(k => delete dataset[k]);
27 | if (drawable.data && typeof drawable.data === 'object') {
28 | // Object.keys(drawable.data).forEach(k => delete dataset[k]);
29 | assign(dataset, drawable.data);
30 | }
31 |
32 | // if (drawable.visible) {
33 | // this.element.removeAttribute('visibility');
34 | // } else {
35 | // this.element.setAttribute('visibility', 'collapse');
36 | // }
37 |
38 | if (drawable.opacity < 1) {
39 | this.element.setAttribute('opacity', drawable.opacity);
40 | } else {
41 | this.element.removeAttribute('opacity');
42 | }
43 |
44 | const {
45 | a,
46 | b,
47 | c,
48 | d,
49 | tx,
50 | ty
51 | } = drawable.matrix;
52 | if (a === 1 && b === 0 && c === 0 && d === 1 && tx === 0 && ty === 0) {
53 | // identity. don't need any transform
54 | this.element.removeAttribute('transform');
55 | } else {
56 | this.element.setAttribute('transform', `matrix(${[a, b, c, d, tx, ty].join(', ')})`);
57 | }
58 | }
59 | if (drawable && drawable.visible) {
60 | // update children
61 | drawable.children.forEach(childDrawable => {
62 | let svgDrawable = children.get(childDrawable);
63 | if (!svgDrawable) {
64 | let ChildConstructor = SVGDrawable;
65 | for (let i = 0; i < constructors.length; i++) {
66 | const [D, S] = constructors[i];
67 | if (childDrawable instanceof D) {
68 | ChildConstructor = S;
69 | break;
70 | }
71 | }
72 |
73 | svgDrawable = new ChildConstructor(this.element, childDrawable);
74 | children.set(childDrawable, svgDrawable);
75 | }
76 | svgDrawable.update();
77 | });
78 | }
79 | };
80 |
81 | const callDestroy = () => this.destroy();
82 | this.destroy = () => {
83 | if (parent && this.element && this.element.parentElement === parent) {
84 | parent.removeChild(this.element);
85 | }
86 |
87 | if (drawable) {
88 | drawable.off('destroy', callDestroy);
89 | drawable.off('remove', removeChild);
90 | }
91 |
92 | children.clear();
93 | };
94 |
95 | if (drawable) {
96 | drawable.on('destroy', callDestroy);
97 | drawable.on('remove', removeChild);
98 | }
99 | }
100 |
101 | SVGDrawable.register = (drawable, svgDrawable) => constructors.push([drawable, svgDrawable]);
102 |
103 | export default SVGDrawable;
--------------------------------------------------------------------------------
/src/drawing/SVGText.js:
--------------------------------------------------------------------------------
1 | import SVGDrawable from './SVGDrawable';
2 | import Text from './Text';
3 |
4 | import createSVGElement from './createSVGElement';
5 |
6 | const stylesheets = new WeakMap();
7 | const elementSizes = new WeakMap();
8 |
9 | function fontStyleRule(size) {
10 | return `.font-${size} {
11 | font-family: Arial;
12 | font-size: ${size}px;
13 | text-anchor: middle;
14 | dominant-baseline: middle;
15 | }`;
16 | }
17 |
18 | function setFontStyle(svg, element, size) {
19 | let sheetSizes = stylesheets.get(svg);
20 | if (elementSizes.has(element)) {
21 | // clear out old style if it exists
22 | const oldSize = elementSizes.get(element);
23 | if (oldSize === size) {
24 | return;
25 | }
26 |
27 | element.classList.remove('font-' + oldSize);
28 | if (oldSize && sheetSizes && sheetSizes.has(oldSize)) {
29 | const sheetInfo = sheetSizes.get(oldSize);
30 | const { elements, styleElement } = sheetInfo;
31 | if (elements && elements.has(element)) {
32 | elements.delete(element);
33 | if (!elements.size && styleElement.parentNode) {
34 | styleElement.parentNode.removeChild(styleElement);
35 | sheetSizes.delete(oldSize);
36 | }
37 | }
38 | }
39 | }
40 | if (!size) {
41 | return;
42 | }
43 |
44 | elementSizes.set(element, size);
45 |
46 | if (!sheetSizes) {
47 | sheetSizes = new Map();
48 | stylesheets.set(svg, sheetSizes);
49 | }
50 | let sheetInfo = sheetSizes.get(size);
51 | if (!sheetInfo) {
52 | const styleElement = createSVGElement('style', svg.ownerDocument);
53 | svg.insertBefore(styleElement, svg.firstChild);
54 | const rule = fontStyleRule(size);
55 | styleElement.appendChild(svg.ownerDocument.createTextNode(rule));
56 | sheetInfo = {
57 | styleElement,
58 | elements: new Set()
59 | };
60 | sheetSizes.set(size, sheetInfo);
61 | }
62 | sheetInfo.elements.add(element);
63 | element.classList.add('font-' + size);
64 | }
65 |
66 | function SVGText(parent, drawable) {
67 | SVGDrawable.call(this, parent, drawable);
68 |
69 | let textElement = null;
70 |
71 | const svg = parent.ownerSVGElement;
72 |
73 | const superUpdate = this.update;
74 | this.update = () => {
75 | const text = drawable && drawable.text || '';
76 | if (!this.element) {
77 | textElement = this.element = createSVGElement('text');
78 | textElement.appendChild(document.createTextNode(text));
79 |
80 | if (parent) {
81 | parent.appendChild(this.element);
82 | }
83 | } else {
84 | textElement.firstChild.nodeValue = text;
85 | }
86 |
87 | setFontStyle(svg, textElement, drawable.visible ? drawable.size : undefined);
88 |
89 | if (drawable && text) {
90 | const hex = ('00000' + drawable.color.toString(16)).slice(-6);
91 | textElement.setAttribute('fill', '#' + hex);
92 | }
93 |
94 | superUpdate.call(this);
95 | };
96 |
97 | const superDestroy = this.destroy;
98 | this.destroy = () => {
99 | if (textElement) {
100 | setFontStyle(svg, textElement, undefined);
101 | }
102 | superDestroy.call(this);
103 | };
104 | }
105 |
106 | SVGText.prototype = Object.create(SVGDrawable.prototype);
107 | SVGDrawable.register(Text, SVGText);
108 |
109 | export default SVGText;
--------------------------------------------------------------------------------
/src/components/Slider.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Slider from 'rc-slider';
4 | import 'rc-slider/assets/index.css';
5 |
6 | /*
7 | Material UI stuff
8 | */
9 | import withStyles from '@material-ui/core/styles/withStyles';
10 | import PropTypes from 'prop-types';
11 | import Tooltip from '@material-ui/core/Tooltip';
12 |
13 | const styles = theme => ({
14 | container: {
15 | padding: `0 ${theme.spacing.unit * 2}px`
16 | }
17 | });
18 |
19 | const Handle = Slider.Handle;
20 |
21 | function createSliderWithTooltip(Component) {
22 | return class HandleWrapper extends React.Component {
23 | static propTypes = {
24 | classes: PropTypes.object.isRequired,
25 | theme: PropTypes.object.isRequired,
26 | marks: PropTypes.object,
27 | tipFormatter: PropTypes.func,
28 | handleStyle: PropTypes.arrayOf(PropTypes.object),
29 | tipProps: PropTypes.object
30 | }
31 |
32 | static defaultProps = {
33 | tipFormatter: value => value,
34 | handleStyle: [{}],
35 | tipProps: {}
36 | }
37 |
38 | constructor(props) {
39 | super(props);
40 | this.state = { visibles: {} };
41 | }
42 |
43 | handleTooltipVisibleChange = (index, visible) => {
44 | this.setState((prevState) => {
45 | return {
46 | visibles: {
47 | ...prevState.visibles,
48 | [index]: visible
49 | }
50 | };
51 | });
52 | }
53 | handleWithTooltip = ({ value, dragging, index, disabled, ...restProps }) => {
54 | const {
55 | tipFormatter,
56 | tipProps,
57 | theme
58 | } = this.props;
59 |
60 | const {
61 | title = tipFormatter(value),
62 | placement = 'top',
63 | ...restTooltipProps
64 | } = tipProps;
65 |
66 | // todo: replace prefixCls with className?
67 | // todo: override tooltipOpen to remove animation
68 |
69 | const handleStyle = {
70 | borderColor: theme.palette.primary.main
71 | };
72 |
73 | return (
74 |
115 |
:
121 | null
122 | }
123 |
108 |
;
113 | }
114 | };
115 | }
116 |
117 | const Def = withStyles(styles, { withTheme: true })(createSliderWithTooltip(Slider));
118 | export default Def;
119 |
120 | // const Range = withStyles(styles)(createSliderWithTooltip(Slider.Range));
121 | // export Range
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | education, socio-economic status, nationality, personal appearance, race,
10 | religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at support@datavized.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 |
--------------------------------------------------------------------------------
/src/drawing/PixiLinePath.js:
--------------------------------------------------------------------------------
1 | import PixiDrawable from './PixiDrawable';
2 | import LinePath from './LinePath';
3 |
4 | import { Graphics, GraphicsRenderer } from '@pixi/graphics';
5 | import { Renderer } from '@pixi/core';
6 | import { Container } from '@pixi/display';
7 |
8 | Renderer.registerPlugin('graphics', GraphicsRenderer);
9 |
10 | function PixiLinePath(parent, drawable) {
11 | PixiDrawable.call(this, parent, drawable);
12 |
13 | const points = drawable && drawable.points;
14 |
15 | const superUpdate = this.update;
16 | this.update = () => {
17 | const drawable = this.drawable;
18 |
19 | // create mesh or container if haven't done it yet
20 | if (!this.pixiObject) {
21 | if (points && points.length > 1) {
22 | const graphics = new Graphics();
23 | graphics.lineColor = 0;
24 | graphics.lineAlpha = 1;
25 | graphics.lineWidth = drawable.lineWidth;
26 |
27 | const firstPoint = points[0];
28 | graphics.moveTo(firstPoint[0], firstPoint[1]);
29 | for (let i = 1; i < points.length; i++) {
30 | const point = points[i];
31 | graphics.lineTo(point[0], point[1]);
32 | }
33 |
34 | this.pixiObject = graphics;
35 | } else {
36 | this.pixiObject = new Container();
37 | }
38 | if (parent) {
39 | parent.addChild(this.pixiObject);
40 | }
41 | }
42 |
43 | const pixiObject = this.pixiObject;
44 | if (drawable && pixiObject.graphicsData &&
45 | (pixiObject.lineColor !== drawable.color || pixiObject.lineAlpha !== drawable.opacity)) {
46 |
47 | pixiObject.lineColor = drawable.color;
48 | pixiObject.graphicsData.forEach(data => {
49 | data.lineColor = drawable.color;
50 | data.lineAlpha = drawable.opacity;
51 | });
52 | pixiObject.dirty++;
53 |
54 | /*
55 | PIXI Doesn't provide a way to change the colors of lines
56 | once they are converted to geometry, so we need to reach
57 | under the hood to do it. This is a bit slow and clunky,
58 | but it's much faster than it would be to regenerate the
59 | entire geometry from scratch every time
60 | */
61 |
62 | // eslint-disable-next-line no-underscore-dangle
63 | const webglData = pixiObject._webGL;
64 | if (webglData) {
65 | const color = drawable.color;
66 | const alpha = drawable.opacity;
67 |
68 | /* eslint-disable no-bitwise */
69 | const r = (color >> 16 & 255) / 255; // red
70 | const g = (color >> 8 & 255) / 255; // green
71 | const b = (color & 255) / 255; // blue
72 | /* eslint-enable no-bitwise */
73 |
74 | Object.keys(webglData).forEach(i => {
75 | webglData[i].data.forEach(webglGraphicsData => {
76 | for (let i = 0, n = webglGraphicsData.points.length; i < n; i += 6) {
77 | const ri = i + 2;
78 | const gi = i + 3;
79 | const bi = i + 4;
80 | const ai = i + 5;
81 | webglGraphicsData.points[ri] = r;
82 | webglGraphicsData.glPoints[ri] = r;
83 |
84 | webglGraphicsData.points[gi] = g;
85 | webglGraphicsData.glPoints[gi] = g;
86 |
87 | webglGraphicsData.points[bi] = b;
88 | webglGraphicsData.glPoints[bi] = b;
89 |
90 | webglGraphicsData.points[ai] = alpha;
91 | webglGraphicsData.glPoints[ai] = alpha;
92 | }
93 | webglGraphicsData.dirty = true;
94 | });
95 | });
96 | }
97 | }
98 | superUpdate.call(this);
99 | };
100 | }
101 |
102 | PixiLinePath.prototype = Object.create(PixiDrawable.prototype);
103 | PixiDrawable.register(LinePath, PixiLinePath);
104 |
105 | export default PixiLinePath;
--------------------------------------------------------------------------------
/src/components/SelectChartType.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Map as map } from 'immutable';
4 |
5 | import charts from '../charts';
6 | import { defaultTree } from '../evolution';
7 |
8 | /*
9 | Material UI components
10 | */
11 | import withStyles from '@material-ui/core/styles/withStyles';
12 | import GridListTileBar from '@material-ui/core/GridListTileBar';
13 |
14 | import Tip from './Tip';
15 | import Section from './Section';
16 |
17 | const styles = theme => ({
18 | root: {
19 | display: 'flex',
20 | flexDirection: 'column',
21 | justifyContent: 'center',
22 | flex: 1,
23 | minHeight: 0
24 | },
25 | main: {
26 | flex: 1,
27 | overflowY: 'auto',
28 | margin: `${theme.spacing.unit}px 10%`
29 | },
30 | gridList: {
31 | display: 'grid',
32 | gridGap: `${theme.spacing.unit}px`,
33 | gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 256px))',
34 | gridAutoRows: 'minmax(150px, 256px)',
35 | justifyContent: 'center'
36 | },
37 | '@media (max-width: 450px), (max-height: 450px)': {
38 | gridList: {
39 | gridTemplateColumns: 'repeat(auto-fill, 140px)',
40 | gridAutoRows: '140px'
41 | },
42 | instructions: {
43 | margin: `${theme.spacing.unit * 1}px 0`
44 | }
45 | },
46 | tile: {
47 | cursor: 'pointer',
48 | border: '4px solid transparent',
49 | boxSizing: 'border-box',
50 | display: 'inline-block',
51 | position: 'relative',
52 | padding: theme.spacing.unit,
53 |
54 | '& > img': {
55 | maxWidth: '100%',
56 | maxHeight: '100%'
57 | }
58 | },
59 | selected: {
60 | border: `4px solid ${theme.palette.primary.main}`
61 | }
62 | });
63 |
64 | const chartTypes = Object.values(charts);
65 |
66 | const Def = class SelectChartType extends Section {
67 | setChartType = chartType => {
68 | this.props.setData(data => {
69 | const previousChartType = data.get('chartType');
70 | if (previousChartType !== chartType) {
71 | data = data.set('chartType', chartType);
72 |
73 | // add default gene tree with single node for chartType
74 | const allTreesData = map().set(chartType, defaultTree(charts[chartType]));
75 | data = data.set('tree', allTreesData);
76 | }
77 |
78 | return data;
79 | });
80 | }
81 |
82 | render() {
83 | const { classes, data, onNext/*, navigation*/ } = this.props;
84 | const chartType = data.get('chartType') || '';
85 | return
87 |
88 |
91 |
118 | {/*navigation*/}
119 | Step 3 - Design
89 |Choose any chart type, then select Organize to prepare visualization.
90 |
92 |
117 |
93 | {chartTypes.map(chart =>
94 | {
100 | this.setChartType(chart.key);
101 | if (onNext) {
102 | setTimeout(onNext, 0);
103 | }
104 | }}
105 | >
106 | {
}
109 |
116 |
131 |
138 | {content}
139 |
140 | { canCompact ? : null }
141 | 
142 |
;
143 | }
144 | };
145 |
146 | const Tip = withStyles(styles, { withTheme: true })(Def);
147 | export default Tip;
--------------------------------------------------------------------------------
/src/charts/PanZoom.js:
--------------------------------------------------------------------------------
1 | import {
2 | ZOOM_SPEED,
3 | MOVE_THRESHOLD
4 | } from './constants';
5 |
6 | export default function PanZoom(element, onPan, onZoom) {
7 | function wheel(event) {
8 | const delta = event.deltaY === undefined && event.detail !== undefined ? -event.detail : -event.deltaY || 0;
9 | const wheelScale = event.deltaMode === 1 ? 100 : 1;
10 |
11 | event.preventDefault();
12 |
13 | onZoom(Math.pow(1.0001, delta * wheelScale * ZOOM_SPEED));
14 | }
15 |
16 | let dragging = false;
17 | let moved = false;
18 | let zoomed = false;
19 | let pinchStartDist = 0;
20 | let dragStartX = 0;
21 | let dragStartY = 0;
22 | let dragX = 0;
23 | let dragY = 0;
24 |
25 | function start(x, y) {
26 | dragging = true;
27 | dragX = dragStartX = x;
28 | dragY = dragStartY = y;
29 | }
30 |
31 | function move(x, y) {
32 | if (dragging) {
33 |
34 | if (Math.abs(dragStartX - x) <= MOVE_THRESHOLD &&
35 | Math.abs(dragStartY - y) <= MOVE_THRESHOLD) {
36 | return;
37 | }
38 |
39 | moved = true;
40 |
41 | const dX = x - dragX;
42 | const dY = y - dragY;
43 | dragX = x;
44 | dragY = y;
45 |
46 | onPan(dX, dY);
47 | }
48 | }
49 |
50 | function mouseDown(event) {
51 | const target = event.target;
52 | let el = element;
53 | while (el !== target && el.parentNode) {
54 | el = el.parentNode;
55 | }
56 | if (el === target) {
57 | start(event.pageX, event.pageY);
58 | event.preventDefault();
59 | }
60 | }
61 |
62 | function stop() {
63 | dragging = false;
64 | moved = false;
65 | zoomed = false;
66 | }
67 |
68 | function mouseMove(event) {
69 | const x = event.pageX;
70 | const y = event.pageY;
71 | move(x, y);
72 | }
73 |
74 | function touchStart(event) {
75 | if (event.touches.length === 1) {
76 | start(event.touches[0].pageX, event.touches[0].pageY);
77 | } else if (event.touches.length === 2) {
78 | const t0 = event.touches[0];
79 | const t1 = event.touches[1];
80 | const dx = t0.pageX - t1.pageX;
81 | const dy = t0.pageY - t1.pageY;
82 | pinchStartDist = Math.sqrt(dx * dx + dy * dy);
83 | }
84 | }
85 |
86 | function touchMove(event) {
87 | event.preventDefault();
88 |
89 | if (event.touches.length === 2) {
90 | const t0 = event.touches[0];
91 | const t1 = event.touches[1];
92 | const dx = t0.pageX - t1.pageX;
93 | const dy = t0.pageY - t1.pageY;
94 | const pinchDist = Math.sqrt(dx * dx + dy * dy);
95 | const pinchDelta = pinchDist - pinchStartDist;
96 | const factor = pinchDelta > 0 ? 1.01 : 0.99;
97 |
98 | zoomed = true;
99 |
100 | onZoom(factor);
101 |
102 | event.preventDefault();
103 | event.stopPropagation();
104 |
105 | return;
106 | }
107 |
108 | if (!zoomed) {
109 | //todo: invert x direction on iOS
110 | move(event.touches[0].pageX, event.touches[0].pageY);
111 | }
112 | }
113 |
114 | function touchEnd(event) {
115 | if (!event.touches.length || event.touches.length < 2 && zoomed) {
116 | stop();
117 | }
118 | }
119 |
120 | this.start = () => {
121 | // todo: handle touch/pinch as well
122 | window.addEventListener('wheel', wheel);
123 | element.addEventListener('mousedown', mouseDown);
124 | window.addEventListener('mouseup', stop);
125 | window.addEventListener('mousemove', mouseMove);
126 |
127 | element.addEventListener('touchstart', touchStart);
128 | element.addEventListener('touchmove', touchMove);
129 | element.addEventListener('touchend', touchEnd);
130 | };
131 |
132 | this.stop = () => {
133 | stop();
134 |
135 | // todo: handle touch/pinch as well
136 | window.removeEventListener('wheel', wheel);
137 | element.removeEventListener('mousedown', mouseDown);
138 | window.removeEventListener('mouseup', stop);
139 | window.removeEventListener('mousemove', mouseMove);
140 |
141 | element.removeEventListener('touchstart', touchStart);
142 | element.removeEventListener('touchmove', touchMove);
143 | element.removeEventListener('touchend', touchEnd);
144 | };
145 |
146 | Object.defineProperties(this, {
147 | dragging: {
148 | get: () => dragging
149 | },
150 | moved: {
151 | get: () => moved
152 | },
153 | changed: {
154 | get: () => moved || zoomed
155 | }
156 | });
157 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "morph",
3 | "version": "0.0.1",
4 | "description": "Morph is an open-source tool for creating designs, animations or interactive visualizations from data.",
5 | "homepage": "https://morph.graphics",
6 | "author": {
7 | "name": "Brian Chirls",
8 | "company": "Datavized Technologies",
9 | "url": "https://github.com/brianchirls"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/datavized/morph.git"
14 | },
15 | "bugs": {
16 | "url": "https://github.com/datavized/morph/issues"
17 | },
18 | "scripts": {
19 | "lint": "eslint ./; true",
20 | "lint-fix": "eslint --fix ./; true",
21 | "start": "NODE_ENV=development webpack-dev-server",
22 | "dev": "NODE_ENV=development webpack",
23 | "build": "NODE_ENV=production webpack",
24 | "test": "echo \"Error: no test specified\" && exit 1"
25 | },
26 | "license": "MPL-2.0",
27 | "devDependencies": {
28 | "@babel/core": "^7.1.0",
29 | "@babel/plugin-proposal-class-properties": "^7.1.0",
30 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
31 | "@babel/plugin-syntax-dynamic-import": "^7.0.0",
32 | "@babel/plugin-transform-react-jsx": "^7.0.0",
33 | "@babel/plugin-transform-react-jsx-self": "^7.0.0",
34 | "@babel/plugin-transform-react-jsx-source": "^7.0.0",
35 | "@babel/plugin-transform-runtime": "^7.1.0",
36 | "@babel/polyfill": "^7.0.0",
37 | "@babel/preset-env": "^7.1.0",
38 | "@babel/preset-react": "^7.0.0",
39 | "autoprefixer": "^9.1.5",
40 | "babel-eslint": "^9.0.0",
41 | "babel-loader": "^8.0.2",
42 | "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
43 | "case-sensitive-paths-webpack-plugin": "^2.1.2",
44 | "clean-webpack-plugin": "^0.1.19",
45 | "copy-webpack-plugin": "^4.5.2",
46 | "css-loader": "^1.0.0",
47 | "datavized-code-style": "github:datavized/code-style",
48 | "dotenv": "^6.0.0",
49 | "eslint": "^5.6.0",
50 | "eslint-config-crockford": "^2.0.0",
51 | "eslint-loader": "^2.1.1",
52 | "eslint-plugin-import": "^2.14.0",
53 | "eslint-plugin-jsx-a11y": "^6.1.1",
54 | "eslint-plugin-react": "^7.11.1",
55 | "exports-loader": "^0.7.0",
56 | "fast-async": "^7.0.6",
57 | "favicons-webpack-plugin": "0.0.9",
58 | "file-loader": "^2.0.0",
59 | "html-loader": "^0.5.5",
60 | "html-webpack-plugin": "^3.2.0",
61 | "imagemin-mozjpeg": "^7.0.0",
62 | "imagemin-webpack-plugin": "^2.3.0",
63 | "postcss-flexbugs-fixes": "^4.1.0",
64 | "postcss-loader": "^3.0.0",
65 | "react-dev-utils": "^5.0.2",
66 | "react-hot-loader": "^4.3.11",
67 | "style-loader": "^0.23.0",
68 | "unused-files-webpack-plugin": "^3.4.0",
69 | "url-loader": "^1.1.1",
70 | "webpack": "^4.19.1",
71 | "webpack-build-notifier": "^0.1.29",
72 | "webpack-bundle-analyzer": "^3.0.2",
73 | "webpack-cli": "^3.1.1",
74 | "webpack-dev-server": "^3.1.8",
75 | "webpack-glsl-loader": "^1.0.1",
76 | "webpack-merge": "^4.1.4",
77 | "webpack-sources": "^1.3.0",
78 | "workbox-webpack-plugin": "^3.6.1"
79 | },
80 | "dependencies": {
81 | "@material-ui/core": "^3.1.0",
82 | "@material-ui/icons": "^3.0.1",
83 | "@pixi/app": "5.0.0-alpha.2",
84 | "@pixi/constants": "5.0.0-alpha.2",
85 | "@pixi/core": "5.0.0-alpha.2",
86 | "@pixi/display": "5.0.0-alpha.2",
87 | "@pixi/graphics": "5.0.0-alpha.2",
88 | "@pixi/math": "5.0.0-alpha.2",
89 | "@pixi/mesh": "5.0.0-alpha.2",
90 | "@pixi/sprite": "5.0.0-alpha.2",
91 | "@pixi/text": "5.0.0-alpha.2",
92 | "abs-svg-path": "^0.1.1",
93 | "adaptive-bezier-curve": "^1.0.3",
94 | "cdt2d": "^1.0.0",
95 | "classnames": "^2.2.6",
96 | "clean-pslg": "^1.1.2",
97 | "clipboard-copy": "^2.0.1",
98 | "error-stack-parser": "^2.0.2",
99 | "event-emitter": "^0.3.5",
100 | "file-saver": "^1.3.8",
101 | "gif.js": "^0.2.0",
102 | "gif.js.optimized": "^1.0.1",
103 | "idb-keyval": "^3.1.0",
104 | "immutable": "^3.8.2",
105 | "ismobilejs": "^0.4.1",
106 | "jszip": "^3.1.5",
107 | "object-assign": "^4.1.1",
108 | "parse-svg-path": "^0.1.2",
109 | "prop-types": "^15.6.2",
110 | "quadtree-js": "github:timohausmann/quadtree-js#hitman",
111 | "quick-gif.js": "0.0.1",
112 | "rc-slider": "^8.6.3",
113 | "react": "^16.5.2",
114 | "react-color": "^2.14.1",
115 | "react-confirm": "^0.1.18",
116 | "react-dom": "^16.5.2",
117 | "react-dropzone": "^5.1.0",
118 | "serialize-error": "^2.1.0",
119 | "vec2-copy": "^1.0.0",
120 | "webm-writer": "^0.2.1",
121 | "worker-loader": "^2.0.0",
122 | "xlsx": "^0.14.0"
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/components/UploadDialog.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import withStyles from '@material-ui/core/styles/withStyles';
4 | import PropTypes from 'prop-types';
5 | import Dialog from '@material-ui/core/Dialog';
6 | import DialogActions from '@material-ui/core/DialogActions';
7 | import DialogContent from '@material-ui/core/DialogContent';
8 | import DialogTitle from '@material-ui/core/DialogTitle';
9 | import LinearProgress from '@material-ui/core/LinearProgress';
10 | import Button from '@material-ui/core/Button';
11 | import Select from '@material-ui/core/Select';
12 | import List from '@material-ui/core/List';
13 | import MenuItem from '@material-ui/core/MenuItem';
14 | import FormControl from '@material-ui/core/FormControl';
15 | import Typography from '@material-ui/core/Typography';
16 |
17 | import OverwriteWarning from './OverwriteWarning';
18 | import ListEntry from './ListEntry';
19 |
20 | const styles = theme => ({
21 | dialog: {
22 | minWidth: '35%',
23 | maxWidth: '90%'
24 | },
25 | uploadInstructions: {
26 | cursor: 'pointer',
27 | color: theme.palette.text.primary
28 | }
29 | });
30 |
31 | const Def = ({
32 | classes,
33 | open,
34 | onClose,
35 | onClick,
36 | overwriteWarning,
37 | fileError,
38 | waiting,
39 | worksheet,
40 | worksheets,
41 | cancelUpload,
42 | handleChangeWorksheet,
43 | onSubmitWorksheetSelection
44 | }) => {
45 | // todo: display any errors
46 |
47 | let content = null;
48 |
49 | if (waiting) {
50 | content =
82 | {/**/}
83 |
90 | { overwriteWarning ? -
84 |
234 | {tip && typeof tip === 'object' ? tip : {tip} }
235 |
272 | {navigation}
273 |
236 |
237 |
257 |
271 |
238 | {title}
239 | { !controlsExpanded ? : null}
245 |
254 |
255 | {controlsExpanded || !isCompact ? children : null}
256 |
258 |
270 |