48 | );
49 | }
50 | }
51 |
52 | export default connect(mapStateToProps)(Button);
53 |
--------------------------------------------------------------------------------
/modules/stacked-calendar/src/__tests__/utils.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | extractHourAndValue,
3 | extractValueRange,
4 | createHourlyValueMap,
5 | // TODO add unit tests for the three functions below
6 | // createHourlyValueDistribution,
7 | // withDerivedLayout,
8 | // withDerivedData,
9 | } from '../utils';
10 |
11 | test('utils: extractHourAndValue', () => {
12 | const data = [
13 | {order_time: 0, metric: 0.0, count: 100},
14 | {order_time: 1, metric: 0.5, count: 200},
15 | {order_time: 2, metric: 1.0, count: 300},
16 | ];
17 | const output = [
18 | {hour: 0, value: 0.0},
19 | {hour: 1, value: 0.5},
20 | {hour: 2, value: 1.0},
21 | ];
22 | expect(extractHourAndValue(data, d => d.order_time, d => d.metric)).toEqual(
23 | output
24 | );
25 | });
26 |
27 | test('utils: extractValueRange', () => {
28 | const data = [
29 | {hour: 0, value: 0.1},
30 | {hour: 1, value: 0.5},
31 | {hour: 2, value: 0.9},
32 | ];
33 | expect(extractValueRange([])).toEqual([0, 1]);
34 | expect(extractValueRange(data)).toEqual([0.1, 0.9]);
35 | });
36 |
37 | test('utils: createHourlyValueMap', () => {
38 | const data = [
39 | {hour: 0, value: 0.1},
40 | {hour: 0, value: 0.2},
41 | {hour: 1, value: 0.5},
42 | {hour: 2, value: 0.6},
43 | {hour: 3, value: 1.0},
44 | {hour: 3, value: 0.8},
45 | ];
46 | const output = {
47 | 0: [0.1, 0.2],
48 | 1: [0.5],
49 | 2: [0.6],
50 | 3: [1.0, 0.8],
51 | };
52 | expect(createHourlyValueMap([])).toEqual({});
53 | expect(createHourlyValueMap(data)).toEqual(output);
54 | });
55 |
56 | test('utils: createHourlyValueDistribution', () => {
57 | // TODO
58 | });
59 |
60 | test('utils: withDerivedLayout', () => {
61 | // TODO
62 | });
63 |
64 | test('utils: withDerivedData', () => {
65 | // TODO
66 | });
67 |
--------------------------------------------------------------------------------
/modules/manifold/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mlvis/manifold",
3 | "version": "1.1.4",
4 | "publishConfig": {
5 | "access": "public"
6 | },
7 | "description": "Model-Agnostic Visual Debugging Tool for Machine Learning",
8 | "license": "Apache-2.0",
9 | "author": "Firenze11 ",
10 | "main": "index.js",
11 | "repository": {
12 | "type": "git",
13 | "url": "git+https://github.com/uber/manifold.git"
14 | },
15 | "homepage": "https://github.com/uber/manifold#readme",
16 | "keywords": [
17 | "ml",
18 | "visualization",
19 | "react",
20 | "redux",
21 | "es6"
22 | ],
23 | "dependencies": {
24 | "@babel/polyfill": "^7.0.0",
25 | "@loaders.gl/arrow": "^1.2.0-alpha.1",
26 | "@loaders.gl/core": "^1.1.0",
27 | "@mlvis/feature-list-view": "^1.1.4",
28 | "@mlvis/mlvis-common": "^1.1.4",
29 | "@mlvis/multi-way-plot": "^1.1.4",
30 | "@tensorflow/tfjs": "^0.15.3",
31 | "baseui": "^9.2.0",
32 | "d3-color": "^1.3.0",
33 | "d3-scale": "^3.0.0",
34 | "d3-scale-chromatic": "^1.3.3",
35 | "d3-shape": "^1.3.5",
36 | "file-saver": "^1.3.3",
37 | "global": "^4.3.2",
38 | "kepler.gl": "^1.1.7",
39 | "lodash.clone": "^4.5.0",
40 | "lodash.get": "^4.4.2",
41 | "lodash.setwith": "^4.3.2",
42 | "mathjs": "^5.2.3",
43 | "numeral": "^2.0.6",
44 | "papaparse": "^4.6.3",
45 | "prop-types": "^15.7.2",
46 | "random": "^2.1.1",
47 | "react-d3-axis": "^0.1.1",
48 | "reduce-reducers": "^1.0.4",
49 | "redux": "^4.0.0",
50 | "redux-actions": "^2.6.5",
51 | "redux-thunk": "^2.3.0",
52 | "reselect": "^4.0.0"
53 | },
54 | "peerDependencies": {
55 | "react": "^16.9.0",
56 | "styled-components": "^4.2.0",
57 | "styletron-engine-atomic": "^1.4.1",
58 | "styletron-react": "^5.2.1"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/arrow-left.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class ArrowLeft extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-arrowleft',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/manifold/src/components/ui/headline/tabs.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled from 'styled-components';
4 |
5 | const Container = styled.div`
6 | display: flex;
7 | flex-direction: row;
8 | align-items: stretch;
9 | `;
10 |
11 | export const Tab = styled.div`
12 | font-weight: 500;
13 | height: 100%
14 | width: max-content;
15 | padding-top: 12px;
16 | margin-right: 20px;
17 | cursor: ${props => (props.onClick ? 'pointer' : 'default')}
18 | border-bottom: ${props => '2px solid ' + props.themeColor};
19 | opacity: ${props => (props.isInactive ? 0.2 : 1)}
20 | `;
21 |
22 | export class TabGroup extends PureComponent {
23 | static defaultProps = {
24 | /** An array of tab titles */
25 | tabs: PropTypes.arrayOf(PropTypes.string),
26 | /** Callback on tab change */
27 | onTabChange: PropTypes.func,
28 | /** Theme colorof the tab */
29 | themeColor: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | tabs: [],
34 | onTabChange: () => {},
35 | themeColor: '#000',
36 | };
37 |
38 | state = {
39 | activeTab: 0,
40 | };
41 |
42 | _onTabChange = (tab, i) => {
43 | const {onTabChange} = this.props;
44 | this.setState(
45 | {
46 | activeTab: i,
47 | },
48 | onTabChange(tab, i)
49 | );
50 | };
51 |
52 | render() {
53 | const {tabs, themeColor} = this.props;
54 | const {activeTab} = this.state;
55 | return (
56 |
57 | {tabs.map((tab, i) => (
58 | this._onTabChange(tab, i)}
60 | themeColor={themeColor}
61 | isInactive={i !== activeTab}
62 | key={i}
63 | >
64 | {tab}
65 |
66 | ))}
67 |
68 | );
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/minus.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Minus extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-minus',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/modules/manifold/src/components/ui/segment-groups-control/segment-group-panel.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import SegmentButtonGroup from './segment-button-group';
5 | import {SegmentPanel} from '../styled-components';
6 | import {updateSegmentGroups} from './utils';
7 |
8 | export default class SegmentGroupPanel extends PureComponent {
9 | static propTypes = {
10 | /** candidate segments shared across all segment groups: e.g., [0, 1, 2, 3] */
11 | candidates: PropTypes.arrayOf(PropTypes.number),
12 | /** selected segments for each segment group: e.g., [[1], [2, 3]] */
13 | selected: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
14 | /** callback function to surface the updated segment grouping */
15 | onUpdateSegmentGroups: PropTypes.func,
16 | /** colors indicatin each group */
17 | colors: PropTypes.arrayOf(PropTypes.string),
18 | };
19 |
20 | static defaultProps = {
21 | candidates: [],
22 | selected: [[], []],
23 | onUpdateSegmentGroups: () => {},
24 | colors: ['#f00', '#000'],
25 | };
26 |
27 | _updateSelectedSegmentGroups = ({groupId, segmentId}) => {
28 | const newSelected = updateSegmentGroups(
29 | this.props.selected,
30 | groupId,
31 | segmentId
32 | );
33 | this.props.onUpdateSegmentGroups(newSelected);
34 | };
35 |
36 | render() {
37 | const {colors, candidates, selected} = this.props;
38 |
39 | return (
40 |
41 | {[0, 1].map(groupId => (
42 |
50 | ))}
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/modules/manifold/src/io.js:
--------------------------------------------------------------------------------
1 | import {fetch, Request, Headers} from 'global';
2 |
3 | const toParam = p => encodeURIComponent(JSON.stringify(p));
4 |
5 | // [WIP] actions for sending requests if connected to a backend.
6 | export function loadData({featureDataset, predDatasets, dataFilter}) {
7 | const h = new Headers({
8 | Accept: 'application/json',
9 | });
10 | const opts = {
11 | method: 'GET',
12 | headers: h,
13 | };
14 | const req = new Request(
15 | 'manifold_py/api/load_data?' +
16 | `feature_dataset=${featureDataset}&pred_datasets=${toParam(
17 | predDatasets
18 | )}&data_filter=${toParam(dataFilter)}`,
19 | opts
20 | );
21 | return fetch(req);
22 | }
23 |
24 | // [WIP] actions for sending requests if connected to a backend.
25 | export function modelsPerformance({
26 | nClusters = 5,
27 | metric = 'performance',
28 | baseModels = [],
29 | segmentFilters = [],
30 | }) {
31 | const h = new Headers({
32 | Accept: 'application/json',
33 | });
34 | const opts = {
35 | method: 'GET',
36 | headers: h,
37 | };
38 | const req = new Request(
39 | 'manifold_py/api/models_performance?' +
40 | `n_clusters=${nClusters}&metric=${metric}&` +
41 | `base_models=${toParam(baseModels)}&segment_filters=${toParam(
42 | segmentFilters
43 | )}`,
44 | opts
45 | );
46 | return fetch(req);
47 | }
48 |
49 | // [WIP] actions for sending requests if connected to a backend.
50 | export function featuresDistribution({
51 | nClusters = 5,
52 | segmentGroups = [[1], [0, 2, 3]],
53 | }) {
54 | const h = new Headers({
55 | Accept: 'application/json',
56 | });
57 | const opts = {
58 | method: 'GET',
59 | headers: h,
60 | };
61 | const req = new Request(
62 | 'manifold_py/api/features_distribution?' +
63 | `segment_groups=${toParam(segmentGroups)}`,
64 | opts
65 | );
66 | return fetch(req);
67 | }
68 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/play.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Play extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-play',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/utils/gen-data.js:
--------------------------------------------------------------------------------
1 | import random from 'random';
2 |
3 | /**
4 | * generate one random ID, unique for single client
5 | *
6 | * @param {Number} seed: random seed, use Date.now() by default
7 | * @return a unique ID string
8 | */
9 | export const generateRandomId = (seed = Date.now()) =>
10 | (seed * Math.random()).toString(36).substr(2, 6);
11 |
12 | /**
13 | * generate n random points with position x and y in [0, 1]
14 | *
15 | * @param {Number} n: number of points
16 | * @return a list of randomly positioned points
17 | */
18 | export const generateRandomPoints = n =>
19 | Array(n)
20 | .fill(0)
21 | .map(_ => ({x: Math.random(), y: Math.random()}));
22 |
23 | /**
24 | * generate k random steps within the domain of [0, 1]
25 | *
26 | * @param {Number} k: number of steps
27 | * @return a list of krandom steps of length k + 1 [0, 0.25, 0.34, 0.78, ..., 1]
28 | */
29 | export const generateRandomSteps = k =>
30 | Array(k)
31 | .fill(0)
32 | .map(_ => Math.random() / 2)
33 | .reduce((acc, val, idx) => [...acc, acc[idx] + (1 - acc[idx]) * val], [0])
34 | .slice(0, -1)
35 | .concat([1]);
36 |
37 | /**
38 | * generate n random values following normal distribution
39 | *
40 | * @param {Number} n: number of steps
41 | * @param {Number} mu: mean
42 | * @param {Number} sigma: standard deviation
43 | * @return {Array}
44 | */
45 | export const generateRandomNormal = (n, mu, sigma) => {
46 | return Array(n)
47 | .fill(0)
48 | .map(random.normal(mu, sigma));
49 | };
50 |
51 | /**
52 | * generate n random values following log-normal distribution
53 | *
54 | * @param {Number} n: number of steps
55 | * @param {Number} mu: mean
56 | * @param {Number} sigma: standard deviation
57 | * @return {Array}
58 | */
59 | export const generateRandomLogNormal = (n, mu, sigma) => {
60 | return Array(n)
61 | .fill(0)
62 | .map(random.logNormal(mu, sigma));
63 | };
64 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/pin.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Pin extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | size: 'tiny',
34 | predefinedClassName: 'data-ex-icons-pin',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/pause.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Pause extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-pause',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/manifold/src/components/ui/side-bar.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled from 'styled-components';
4 | import {Cancel} from '@mlvis/mlvis-common/icons';
5 |
6 | const Container = styled.div`
7 | transition: 0.5s;
8 | transition-timing-function: ease-in-out;
9 | width: ${props => (props.isOpen ? props.width + 'px' : 0)};
10 | padding: ${props => (props.isOpen ? '12px 24px' : '12px 0')};
11 | overflow-x: hidden;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: stretch;
15 | position: relative;
16 | div {
17 | opacity: ${props => (props.isOpen ? 1 : 0)};
18 | transition: 0.5s;
19 | transition-delay: 0.5s;
20 | }
21 | `;
22 |
23 | const StyledIcon = styled.div``;
24 |
25 | const IconButton = styled.div`
26 | cursor: pointer;
27 | margin-right: 12px;
28 | padding: 12px;
29 | position: absolute;
30 | transition: 0.3s;
31 | transition-delay: 0.2s;
32 | right: 0;
33 | top: 0px;
34 | `;
35 |
36 | export default class SideBar extends PureComponent {
37 | static propTypes = {
38 | /** True if the side bar is open. */
39 | isOpen: PropTypes.bool,
40 | /** Width of the side bar. */
41 | width: PropTypes.number,
42 | /** Callback on toggle open the side bar. */
43 | onToggleOpen: PropTypes.func,
44 | };
45 |
46 | static defaultProps = {
47 | isOpen: false,
48 | width: 300,
49 | onToggleOpen: () => {},
50 | };
51 |
52 | _onClose = () => {
53 | this.props.onToggleOpen(false);
54 | };
55 |
56 | render() {
57 | const {children, isOpen, width, className} = this.props;
58 | return (
59 |
60 |
61 |
62 |
63 | {children}
64 |
65 | );
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/messages.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Messages extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-messages',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/add.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Add extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-add',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/arrow-down.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class ArrowDown extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-arrowdown',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/upload.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Upload extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | predefinedClassName: PropTypes.string,
31 | };
32 |
33 | static defaultProps = {
34 | height: '16px',
35 | predefinedClassName: 'data-ex-icons-upload',
36 | };
37 |
38 | render() {
39 | return (
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/line-chart.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class LineChart extends Component {
27 | static propTypes = {
28 | height: PropTypes.string,
29 | };
30 |
31 | static defaultProps = {
32 | height: '16px',
33 | predefinedClassName: 'data-ex-icons-linechart',
34 | };
35 |
36 | render() {
37 | return (
38 |
39 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/modules/feature-list-view/src/constants.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import {FEATURE_TYPE, COLOR} from '@mlvis/mlvis-common/constants';
3 |
4 | // height of each feature view chart
5 | export const ITEM_HEIGHT = 72;
6 | // for tooltips in feature views
7 | // width in number of pixels for one character
8 | export const CHAR_WIDTH = 7;
9 | // number of characters separating each text
10 | export const CHAR_SEPARATION = 2;
11 |
12 | export const HEADER_HEIGHT = 16;
13 | export const FOOTER_HEIGHT = 18;
14 |
15 | export const RIGHT_MARGIN_WIDTH = 36;
16 |
17 | export const CHART_PROP_TYPES = {
18 | id: PropTypes.string.isRequired,
19 | x: PropTypes.number,
20 | y: PropTypes.number,
21 | width: PropTypes.number,
22 | height: PropTypes.number,
23 | data: PropTypes.shape({
24 | distributions: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
25 | distributionsMaxValues: PropTypes.arrayOf(PropTypes.number),
26 | distributionsNormalized: PropTypes.arrayOf(
27 | PropTypes.arrayOf(PropTypes.number)
28 | ),
29 | divergence: PropTypes.number,
30 | domain: PropTypes.arrayOf(
31 | PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
32 | ),
33 | categoriesSortedOrder: PropTypes.arrayOf(PropTypes.number),
34 | name: PropTypes.string,
35 | type: PropTypes.oneOf(Object.values(FEATURE_TYPE)),
36 | values: PropTypes.arrayOf(
37 | PropTypes.arrayOf(
38 | PropTypes.oneOfType([
39 | PropTypes.string,
40 | PropTypes.number,
41 | PropTypes.bool,
42 | PropTypes.instanceOf(Date),
43 | ])
44 | )
45 | ),
46 | }),
47 | colors: PropTypes.arrayOf(PropTypes.string),
48 | xScale: PropTypes.func,
49 | };
50 |
51 | export const CHART_DEFAULT_PROPS = {
52 | id: 'default-numerical-feature-id',
53 | x: 0,
54 | y: 0,
55 | width: 0,
56 | height: 0,
57 | data: null,
58 | colors: [COLOR.GREEN, COLOR.PURPLE],
59 | xScale: () => 0,
60 | };
61 |
--------------------------------------------------------------------------------
/bindings/jupyter/docs/stacked-calendar.md:
--------------------------------------------------------------------------------
1 | # Stacked Calendar
2 |
3 | The Stacked Calendar component aggregates hourly-stamped values and visualizes the results in the form of a calendar.
4 |
5 | The columns and rows are corresponding to the day_of_week and hour_of_day, respectively.
6 | The data values of each cell (hour) are aggregated, percentiled, and mapped to color gradients to reveal the value distributions.
7 |
8 | ## Usage
9 |
10 |
11 | ```python
12 | from mlvis import StackedCalendar
13 | from IPython.display import display
14 | import pandas as pd
15 |
16 | PREFIX = 'https://d1a3f4spazzrp4.cloudfront.net/mlvis/'
17 | data_frame = pd.read_csv(PREFIX + 'jupyter/stacked-calendar-sample.csv')
18 | data = data_frame.to_dict('records')
19 |
20 | calendar = StackedCalendar(props={"data": data, "valueRange": [0, 1.5]})
21 | display(calendar)
22 | ```
23 |
24 |
25 |
26 | ## Data Format
27 |
28 |
29 | ```python
30 | print(pd.DataFrame(data)[10000:10010])
31 | ```
32 |
33 | hour_of_week value
34 | 10000 66 0.272818888
35 | 10001 66 0.645657585
36 | 10002 66 0.243684833
37 | 10003 66 0.237157524
38 | 10004 66 0.238575395
39 | 10005 66 0.175796772
40 | 10006 66 0.226707148
41 | 10007 66 0.221181026
42 | 10008 66 0.263068202
43 | 10009 66 0.140494919
44 |
45 |
46 | ## Properties
47 |
48 | #### `data` (List, required)
49 |
50 | - Default: []
51 |
52 | The input data list, each datum should at least two attributes: _hour_of_week_ (range: [0, 167]) and _value_.
53 |
54 | #### `valueRange` (List, optional)
55 |
56 | - Default: [0, 1]
57 |
58 | The value range used for the color mapping. If data is not specified, valueRange is default to [0, 1]. Otherwise, it will be derived as the [min, max] of the values.
59 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/files.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import PropTypes from 'prop-types';
23 | import React from 'react';
24 | import Base from './base';
25 |
26 | export default class Files extends React.Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 | static defaultProps = {
32 | height: '16px',
33 | predefinedClassName: 'data-ex-icons-minus',
34 | };
35 |
36 | render() {
37 | return (
38 |
39 |
40 |
41 | );
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/modules/manifold/src/components/ui/segment-filters-control/segment-panel-list.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import PropTypes from 'prop-types';
3 | import styled, {css} from 'styled-components';
4 |
5 | import {FILTER, FIELD} from '../../../constants';
6 | import SegmentPanel from './segment-panel';
7 |
8 | const SegmentPanelListContainer = styled.div`
9 | color: #666;
10 | font-family: ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif;
11 | font-size: 12px;
12 |
13 | ${props =>
14 | props.withPadding &&
15 | css`
16 | background: #fff;
17 | padding: 12px;
18 | `};
19 | `;
20 |
21 | export default class SegmentPanelList extends PureComponent {
22 | static propTypes = {
23 | columnDefs: PropTypes.arrayOf(FIELD),
24 | segmentFilters: PropTypes.arrayOf(
25 | PropTypes.shape({
26 | key: PropTypes.string.isRequired,
27 | filters: PropTypes.arrayOf(FILTER),
28 | })
29 | ),
30 | onUpdateFilterValue: PropTypes.func,
31 | onRemoveSegment: PropTypes.func,
32 | };
33 |
34 | static defaultProps = {
35 | baseCols: [],
36 | columnDefs: [],
37 | segmentFilters: [{key: '0', filters: []}, {key: '1', filters: []}],
38 | onUpdateFilterValue: () => {},
39 | };
40 |
41 | render() {
42 | const {
43 | segmentFilters,
44 | columnDefs,
45 | onRemoveSegment,
46 | onUpdateFilterValue,
47 | } = this.props;
48 |
49 | return (
50 |
51 | {segmentFilters.map((singleSegmentFilters, i) => (
52 |
61 | ))}
62 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/clock.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Clock extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-clock',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/arrow-right.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class ArrowRight extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-arrowright',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
44 |
45 | );
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/left-arrow.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class LeftArrow extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-left-arrow',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/bindings/jupyter-modules/jupyter-ma-causal/src/containers/staticbar-svg-container/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {connect} from 'react-redux';
3 | import {format as d3Format} from 'd3-format';
4 |
5 | import {getLineDataFactory} from '../../selectors/factories';
6 |
7 | import {
8 | getChartWidth,
9 | getChartHeight,
10 | getChartPadding,
11 | } from '../../selectors/staticbar-selectors';
12 |
13 | const mapStateToProps = (state, props) => {
14 | const {index, lineName} = props;
15 | // lineName: the name of the line representing the uplifting effect
16 | const getLineData = getLineDataFactory(index, lineName);
17 | return {
18 | data: getLineData(state),
19 | width: getChartWidth(state),
20 | height: getChartHeight(state),
21 | padding: getChartPadding(state),
22 | };
23 | };
24 |
25 | const mapDispatchToProps = {};
26 |
27 | class Chart extends Component {
28 | render() {
29 | const {
30 | data,
31 | width,
32 | height,
33 | padding: {left, right, top, bottom},
34 | groupName, // treatment or control
35 | } = this.props;
36 |
37 | const format = d3Format('.2f');
38 |
39 | return (
40 |
63 | );
64 | }
65 | }
66 |
67 | export default connect(
68 | mapStateToProps,
69 | mapDispatchToProps
70 | )(Chart);
71 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/cube-3d.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Cube3D extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-cube3d',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/modules/manifold/src/__tests__/selector-adaptors.spec.js:
--------------------------------------------------------------------------------
1 | import {
2 | getSegmentIds,
3 | getSegmentOrdering,
4 | getRawDataRange,
5 | getDensityRange,
6 | getModelIds,
7 | getFeatures,
8 | } from '../selectors/adaptors';
9 |
10 | // Use `.resultFunc` to test individual selector logic without having to mock dependency selectors
11 | // https://github.com/reduxjs/reselect#q-how-do-i-test-a-selector
12 |
13 | test('selector: base/getSegmentIds', () => {
14 | const ids1 = [0, 1, 2, 3, 4];
15 | expect(getSegmentIds.resultFunc(false, 5, [7, 8, 9])).toEqual(ids1);
16 | expect(getSegmentIds.resultFunc(true, 5, [7, 8, 9])).toEqual([0, 1, 2]);
17 | });
18 |
19 | test('selector: base/getSegmentOrdering', () => {
20 | expect(getSegmentOrdering.resultFunc([0, 1, 2, 3, 4], [[3, 4], [0]])).toEqual(
21 | [1, 2, 0, 3, 4]
22 | );
23 | });
24 |
25 | test('selector: adapter/getRawDataRange', () => {
26 | const perfBySegment = [
27 | {data: [{percentiles: [-10, 0, 5]}, {percentiles: [-1, 0, 1]}]},
28 | {data: [{percentiles: [-1, 0, 10]}, {percentiles: [-5, 0, 1]}]},
29 | ];
30 | expect(getRawDataRange.resultFunc(perfBySegment)).toEqual([-10, 10]);
31 | });
32 |
33 | test('selector: adapter/getDensityRange', () => {
34 | const perfBySegment = [
35 | {
36 | data: [{density: [[1, 6, 5], []]}, {density: [[2, 3, 4], []]}],
37 | segmentId: 1,
38 | },
39 | {
40 | data: [{density: [[4, 2, 5], []]}, {density: [[1, 3, 7], []]}],
41 | segmentId: 0,
42 | },
43 | ];
44 | expect(getDensityRange.resultFunc(perfBySegment)).toEqual([[0, 7], [0, 6]]);
45 | });
46 |
47 | test('selector: adapter/getModelIds', () => {
48 | const perfBySegment = [{data: [{}, {}, {}]}, {data: [{}, {}, {}]}];
49 | expect(getModelIds.resultFunc(perfBySegment)).toEqual([0, 1, 2]);
50 | });
51 |
52 | test('selector: adapter/getFeatures', () => {
53 | const rawFeatures = [{divergence: 0}, {divergence: 1}, {divergence: 2}];
54 | const features = getFeatures.resultFunc(rawFeatures, 0.5);
55 | expect(features.length).toBe(2);
56 | });
57 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/file.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class File extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-file',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/email.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Email extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-email',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/table.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Table extends Component {
27 | static propTypes = {
28 | height: PropTypes.string,
29 | };
30 |
31 | static defaultProps = {
32 | height: '16px',
33 | predefinedClassName: 'data-ex-icons-table',
34 | };
35 |
36 | render() {
37 | return (
38 |
39 |
44 |
45 | );
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/utils/color.js:
--------------------------------------------------------------------------------
1 | import {interpolatePuBu} from 'd3-scale-chromatic';
2 |
3 | const DEFAULT_COLOR = [255, 128, 128];
4 |
5 | const clampValue = (min, max) => value =>
6 | value < min ? min : value > max ? max : value;
7 |
8 | /**
9 | * map an input value to a given color scale, and return a color hex string
10 | *
11 | * @param {Number} value: input value
12 | * @param {Boolean} clamp: whether to clamp the input value to [0, 1], default yes
13 | * @param {[Number]} defaultColor: fallback color
14 | * @return interpolated color in hex string format #1234FF
15 | */
16 | export const interpolateColorToHex = ({
17 | value,
18 | clamp = true,
19 | defaultColor = DEFAULT_COLOR,
20 | interpolator = interpolatePuBu,
21 | }) => {
22 | const newValue = clamp ? clampValue(0, 1)(value) : value;
23 |
24 | if (!Number.isFinite(newValue)) {
25 | // [r, g, b] => `rgb(r, g, b)`
26 | return `rgb(${defaultColor.join(', ')})`;
27 | }
28 |
29 | return interpolator(newValue);
30 | };
31 |
32 | /**
33 | * map an input value to a given color scale, and return a rgb array
34 | *
35 | * @param {Number} value: intpu value
36 | * @param {Boolean} clamp: whether to clamp the input value to [0, 1], default yes
37 | * @param {[Number]} defaultColor: fallback color
38 | * @return interpolated color in [255, 255, 255] format
39 | */
40 | export const interpolateColor = ({
41 | value,
42 | clamp = true,
43 | defaultColor = DEFAULT_COLOR,
44 | interpolator = interpolatePuBu,
45 | }) => {
46 | return interpolateColorToHex({value, clamp, defaultColor, interpolator})
47 | .match(/[0-9]+/g)
48 | .map(n => Number(n));
49 | };
50 |
51 | export function hexToRGB(hex, alpha) {
52 | var r = parseInt(hex.slice(1, 3), 16),
53 | g = parseInt(hex.slice(3, 5), 16),
54 | b = parseInt(hex.slice(5, 7), 16);
55 |
56 | if (alpha || alpha === 0) {
57 | const _alpha = Math.max(Math.min(alpha, 1), 0);
58 | return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + _alpha + ')';
59 | } else {
60 | return 'rgb(' + r + ', ' + g + ', ' + b + ')';
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/bindings/jupyter/js/webpack.config.js:
--------------------------------------------------------------------------------
1 | const {resolve} = require('path');
2 |
3 | const ROOT = resolve(__dirname, '../../..');
4 | const JUPYTER_MODULES = resolve(__dirname, '../../jupyter-modules');
5 |
6 | const AliasConfig = require(resolve(ROOT, 'alias.config.js')).AliasConfig;
7 | const getLocalModuleAliases = AliasConfig();
8 | const getJupyterModuleAliases = AliasConfig(JUPYTER_MODULES);
9 |
10 | const externals = [
11 | '@jupyter-widgets/base',
12 | 'base/js/namespace',
13 | 'base/js/events',
14 | 'base/js/utils',
15 | ];
16 |
17 | module.exports = [
18 | {
19 | entry: {
20 | app: [resolve('./src/index.js')],
21 | },
22 | devtool: 'source-maps',
23 | output: {
24 | path: resolve('../mlvis/static'),
25 | filename: 'index.js',
26 | libraryTarget: 'amd',
27 | },
28 | resolve: {
29 | extensions: ['.js'],
30 | alias: {
31 | // resolving deck.gl version conflict issue:
32 | // deck.gl does not allow different versions of deck.gl instances
33 | // running at the same time. So these settings corece all packages
34 | // to use the same deck.gl instance
35 | '@deck.gl': resolve(ROOT, 'node_modules', '@deck.gl'),
36 | '@luma.gl': resolve(ROOT, 'node_modules', '@luma.gl'),
37 | ...getJupyterModuleAliases(),
38 | ...getLocalModuleAliases(),
39 | },
40 | },
41 | module: {
42 | rules: [
43 | {
44 | test: /\.js$/,
45 | loader: 'babel-loader',
46 | options: {
47 | rootMode: 'upward',
48 | },
49 | exclude: [/node_modules/],
50 | },
51 | {
52 | test: /\.css$/,
53 | use: ['style-loader', 'css-loader'],
54 | },
55 | ],
56 | },
57 | externals,
58 | },
59 | {
60 | entry: {
61 | app: [resolve('./src/extension.js')],
62 | },
63 | output: {
64 | path: resolve('../mlvis/static'),
65 | filename: 'extension.js',
66 | libraryTarget: 'amd',
67 | },
68 | resolve: {
69 | extensions: ['.js'],
70 | },
71 | },
72 | ];
73 |
--------------------------------------------------------------------------------
/modules/manifold/src/constants/constants.js:
--------------------------------------------------------------------------------
1 | import {absoluteError, logLoss} from '@mlvis/mlvis-common/utils';
2 |
3 | export const COLORS = {
4 | PINK: '#ff0099',
5 | BLUE: '#818c81',
6 | };
7 |
8 | export const MODEL_TYPE = {
9 | REGRESSION: 'REGRESSION',
10 | BIN_CLASS: 'BIN_CLASS',
11 | MULT_CLASS: 'MULT_CLASS',
12 | };
13 |
14 | export const MODEL_TYPE_FROM_N_CLASSES = nClasses => {
15 | return nClasses === 1
16 | ? MODEL_TYPE.REGRESSION
17 | : nClasses === 2
18 | ? MODEL_TYPE.BIN_CLASS
19 | : MODEL_TYPE.MULT_CLASS;
20 | };
21 |
22 | export const METRIC = {
23 | ABSOLUTE_ERROR: {
24 | name: 'absolute error',
25 | description:
26 | 'the absolute value of difference between predicted value and ground truth',
27 | func: absoluteError,
28 | },
29 | LOG_LOSS: {
30 | name: 'log loss',
31 | description: 'the logarithmic loss for predicted probability values',
32 | func: logLoss,
33 | },
34 | };
35 |
36 | export const METRIC_OPTIONS = {
37 | REGRESSION: [METRIC.ABSOLUTE_ERROR],
38 | BIN_CLASS: [METRIC.LOG_LOSS],
39 | MULT_CLASS: [METRIC.LOG_LOSS],
40 | };
41 |
42 | export const SEGMENTATION_METHOD = {
43 | MANUAL: 'manual',
44 | AUTO: 'auto',
45 | };
46 |
47 | export const SCORE_PREFIX = '@score:';
48 | export const scoreColName = modelId => `${SCORE_PREFIX}model_${modelId}`;
49 | export const PRED_PREFIX = `@pred:`;
50 | export const predColName = (modelId, classId) =>
51 | `${PRED_PREFIX}model_${modelId}_class_${classId}`;
52 | export const GROUND_TRUTH_NAME = `@groundTruth`;
53 | export const makeUuid = dataId => `uuid${dataId}`;
54 |
55 | // view constants
56 | export const THEME_COLOR = '#276ef1';
57 | export const VIEW_MODE = {
58 | SINGLE: 'SINGLE',
59 | COORDINATED: 'COORDINATED',
60 | };
61 | export const VIEW_TAB = {
62 | PERF: 'PERF',
63 | FEATURE: 'FEATURE',
64 | };
65 |
66 | export const VIEW_NAME = {
67 | PERF: 'Performance comparison',
68 | FEATURE: 'Feature attribution',
69 | };
70 |
71 | export const HELP_TYPE = {
72 | PERF: 'PERF',
73 | FEATURE: 'FEATURE',
74 | };
75 |
76 | export const CONTROL_MARGIN = 20;
77 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/drag-n-drop.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class DragNDrop extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-dragndrop',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/search.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Search extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-search',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/reset.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Reset extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-reset',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/filter-funnel.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class FilterFunnel extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-filterfunnel',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/picture.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import PropTypes from 'prop-types';
23 | import React from 'react';
24 | import Base from './base';
25 |
26 | export default class Picture extends React.Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-minus',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/legend.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Legend extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-legend',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/histogram.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Histogram extends Component {
27 | static propTypes = {
28 | height: PropTypes.string,
29 | };
30 |
31 | static defaultProps = {
32 | height: '16px',
33 | predefinedClassName: 'data-ex-icons-histogram',
34 | };
35 |
36 | render() {
37 | return (
38 |
39 |
40 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/zoom.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Zoom extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | viewBox: '0, 0, 30, 30',
35 | predefinedClassName: 'data-ex-icons-zoom',
36 | };
37 |
38 | render() {
39 | return (
40 |
41 |
46 |
47 | );
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/share.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Share extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-share',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/modules/manifold/src/components/ui/help-dialog/step-progress.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled, {css, keyframes} from 'styled-components';
3 | import {dotRange} from '@mlvis/mlvis-common/utils';
4 |
5 | const ProgressTrack = styled.div`
6 | width: 100%;
7 | height: 2px;
8 | top: 2px;
9 | background-color: #eee;
10 | position: absolute;
11 | `;
12 |
13 | const ProgressContainer = styled.div`
14 | display: flex;
15 | width: ${props => (props.numSteps - 1) * 50 + 'px'};
16 | justify-content: space-between;
17 | position: relative;
18 | `;
19 |
20 | const pulse = keyframes`
21 | 0% {
22 | box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.8);
23 | }
24 | 70% {
25 | box-shadow: 0 0 0 6px rgba(33, 131, 221, 0);
26 | }
27 | 100% {
28 | box-shadow: 0 0 0 0 rgba(33, 131, 221, 0);
29 | }
30 | `;
31 |
32 | const animation = css`
33 | ${pulse} 3s infinite;
34 | `;
35 |
36 | const Step = styled.div`
37 | position: relative;
38 | width: 100%;
39 | :last-child {
40 | width: 0;
41 | }
42 | :before {
43 | content: '';
44 | position: absolute;
45 | width: 6px;
46 | height: 6px;
47 | border-radius: 50%;
48 | background-color: ${props =>
49 | props.isFinished || props.isCurrent ? props.color : '#ccc'};
50 | animation: ${props => (props.isCurrent ? animation : 'none')};
51 | z-index: 2;
52 | }
53 | :after {
54 | content: '';
55 | position: absolute;
56 | width: ${props => (props.isFinished ? '100%' : '0%')};
57 | height: 2px;
58 | top: 2px;
59 | left: 3px;
60 | background-color: ${props => props.color};
61 | transition: width 0.5s ease-in;
62 | }
63 | :last-child:after {
64 | display: none;
65 | }
66 | `;
67 |
68 | export const StepProgress = ({numSteps, currentStep, color, className}) => {
69 | return (
70 |
71 |
72 | {dotRange(numSteps).map(step => (
73 | step}
77 | isCurrent={currentStep === step}
78 | />
79 | ))}
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/cursor-click.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class CursorClick extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-cursorclick',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
46 |
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/save.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Save extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-save',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/square-select.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class SquareSelect extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-select',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/settings.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Settings extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-settings',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/docs.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Docs extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-docs',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
50 |
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/modules/stacked-calendar/README.md:
--------------------------------------------------------------------------------
1 | # Stacked Calendar
2 |
3 | The _Stacked Calendar_ component aggregates hourly-stamped values and visualizes the results in the form of a calendar.
4 |
5 | The columns and rows are corresponding to the day_of_week and hour_of_day, respectively.\
6 | The data values of each cell (hour) are aggregated, percentiled, and mapped to color gradients to reveal the value distributions.
7 |
8 | ## Usage
9 |
10 | ```js
11 | import StackedCalendar from '@mlvis/stacked-calendar';
12 |
13 | const App = ({data, valueRange}) => {
14 | /**
15 | * data: [
16 | * {hour_of_week: 0, value: 0.5},
17 | * {hour_of_week: 0, value: 1.0},
18 | * {hour_of_week: 1, value: 2.0},
19 | * ...
20 | * {hour_of_week: 167, value: 0.8},
21 | * {hour_of_week: 167, value: 0.4},
22 | * ],
23 | * valueRange: [0, 1]
24 | */
25 | return ;
26 | };
27 | ```
28 |
29 | ## Data Format
30 |
31 | | hour_of_week (range: [0, 167]) | value |
32 | | :----------------------------: | :---: |
33 | | 0 | 0.5 |
34 | | 0 | 1.0 |
35 | | 1 | 2.0 |
36 | | ... | ... |
37 | | 167 | 0.8 |
38 | | 167 | 0.4 |
39 |
40 | ## Installation
41 |
42 | To install the dependencies from NPM:
43 |
44 | ```bash
45 | npm install @mlvis/stacked-calendar
46 | # or
47 | yarn install @mlvis/stacked-calendar
48 | ```
49 |
50 | ## Properties
51 |
52 | #### `data` (Array, required)
53 |
54 | - Default: []
55 |
56 | The input data array, each datum should at least two attributes: _hour_of_week_ (range: [0, 167]) and _value_.
57 |
58 | #### `valueRange` (Array, optional)
59 |
60 | - Default: [0, 1]
61 |
62 | The value range used for the color mapping. If data is not specified, valueRange is default to [0, 1]. Otherwise, it will be derived as the [min, max] of the values.
63 |
64 | ## Source
65 |
66 | [packages/stacked-calendar](https://code.uberinternal.com/diffusion/VIMLVMN/browse/master/packages/stacked-calendar/)
67 |
68 |
69 |
70 | Content here won't be shown in stories.
71 | You can add some unfinished documentation here.
72 |
73 |
74 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/vert-dots.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class VertDots extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-vertdot',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/trash.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Trash extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-trash',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
44 |
49 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/layers.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import React, {Component} from 'react';
23 | import PropTypes from 'prop-types';
24 | import Base from './base';
25 |
26 | export default class Layers extends Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 |
32 | static defaultProps = {
33 | height: '16px',
34 | predefinedClassName: 'data-ex-icons-layers',
35 | };
36 |
37 | render() {
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/bindings/jupyter/notebooks/graph-builder.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {},
6 | "source": [
7 | "# Graph Builder\n",
8 | "\n",
9 | "## Usage"
10 | ]
11 | },
12 | {
13 | "cell_type": "code",
14 | "execution_count": 1,
15 | "metadata": {},
16 | "outputs": [
17 | {
18 | "data": {
19 | "application/vnd.jupyter.widget-view+json": {
20 | "model_id": "30dd102baceb4b6a8b2c09d8a6f9e05f",
21 | "version_major": 2,
22 | "version_minor": 0
23 | },
24 | "text/plain": [
25 | "GraphBuilder(props='{\"data\": {\"nodes\": [{\"id\": \"1\"}, {\"id\": \"2\"}, {\"id\": \"3\"}], \"edges\": [{\"id\": \"e1\", \"source…"
26 | ]
27 | },
28 | "metadata": {},
29 | "output_type": "display_data"
30 | }
31 | ],
32 | "source": [
33 | "from mlvis import GraphBuilder\n",
34 | "from IPython.display import display\n",
35 | "\n",
36 | "data = {\n",
37 | " \"nodes\": [\n",
38 | " {\"id\": '1'},\n",
39 | " {\"id\": '2'},\n",
40 | " {\"id\": '3'}\n",
41 | " ],\n",
42 | " \"edges\": [\n",
43 | " {\"id\": 'e1', \"sourceId\": '1', \"targetId\": '2'},\n",
44 | " {\"id\": 'e2', \"sourceId\": '1', \"targetId\": '3'},\n",
45 | " {\"id\": 'e3', \"sourceId\": '2', \"targetId\": '3'}\n",
46 | " ]\n",
47 | "}\n",
48 | "\n",
49 | "graph = GraphBuilder(props={'data': data,\n",
50 | " \"nodeSize\": 10, \n",
51 | " \"nodeColor\": \"#7743CE\", \n",
52 | " \"edgeWidth\": 1, \n",
53 | " \"edgeColor\": \"#777777\",\n",
54 | " \"height\": 500})\n",
55 | "\n",
56 | "display(graph)"
57 | ]
58 | }
59 | ],
60 | "metadata": {
61 | "kernelspec": {
62 | "display_name": "Python 3",
63 | "language": "python",
64 | "name": "python3"
65 | },
66 | "language_info": {
67 | "codemirror_mode": {
68 | "name": "ipython",
69 | "version": 3
70 | },
71 | "file_extension": ".py",
72 | "mimetype": "text/x-python",
73 | "name": "python",
74 | "nbconvert_exporter": "python",
75 | "pygments_lexer": "ipython3",
76 | "version": "3.7.0"
77 | }
78 | },
79 | "nbformat": 4,
80 | "nbformat_minor": 2
81 | }
82 |
--------------------------------------------------------------------------------
4 |
5 | The jupyter binding of this project is a [Python library](https://pypi.org/project/mlvis/) that consists of several prebuilt visualization components:
6 |
7 | - [Stacked Calendar](docs/stacked-calendar.md)
8 | - [Graph Builder](docs/graph-builder.md)
9 | - [Manifold](docs/manifold.md)
10 | - [Feature List View](docs/feature-list-view.md)
11 |
12 | ## Installation
13 |
14 | ```
15 | pip install mlvis
16 | ```
17 |
18 | Then install the nbextension into the Jupyter notebook
19 |
20 | ```
21 | jupyter nbextension install --py --symlink --sys-prefix mlvis
22 | jupyter nbextension enable --py --sys-prefix mlvis
23 | ```
24 |
25 | ## Development
26 |
27 | Instructions for building this project locally can be found in the [development documentation](docs/development.md).
28 |
--------------------------------------------------------------------------------
/bindings/jupyter/docs/graph-builder.md:
--------------------------------------------------------------------------------
1 | # Graph Builder
2 |
3 | ## Usage
4 |
5 | ```python
6 | from mlvis import GraphBuilder
7 | from IPython.display import display
8 |
9 | data = {
10 | "nodes": [
11 | {"id": '1'},
12 | {"id": '2'},
13 | {"id": '3'}
14 | ],
15 | "edges": [
16 | {"id": 'e1', "sourceId": '1', "targetId": '2'},
17 | {"id": 'e2', "sourceId": '1', "targetId": '3'},
18 | {"id": 'e3', "sourceId": '2', "targetId": '3'}
19 | ]
20 | }
21 |
22 | graph = GraphBuilder(props={'data': data,
23 | "nodeSize": 10,
24 | "nodeColor": "#7743CE",
25 | "edgeWidth": 1,
26 | "edgeColor": "#777777",
27 | "height": 500})
28 |
29 | display(graph)
30 | ```
31 |
32 | 
33 |
--------------------------------------------------------------------------------
/modules/feature-list-view/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@mlvis/feature-list-view",
3 | "version": "1.1.4",
4 | "license": "Apache-2.0",
5 | "description": "Feature List View component of the Manifold",
6 | "publishConfig": {
7 | "access": "public"
8 | },
9 | "contributors": [
10 | "Yang Wang 
25 |
26 | ## Data Format
27 |
28 |
29 | ```python
30 | print(pd.DataFrame(data)[10000:10010])
31 | ```
32 |
33 | hour_of_week value
34 | 10000 66 0.272818888
35 | 10001 66 0.645657585
36 | 10002 66 0.243684833
37 | 10003 66 0.237157524
38 | 10004 66 0.238575395
39 | 10005 66 0.175796772
40 | 10006 66 0.226707148
41 | 10007 66 0.221181026
42 | 10008 66 0.263068202
43 | 10009 66 0.140494919
44 |
45 |
46 | ## Properties
47 |
48 | #### `data` (List, required)
49 |
50 | - Default: []
51 |
52 | The input data list, each datum should at least two attributes: _hour_of_week_ (range: [0, 167]) and _value_.
53 |
54 | #### `valueRange` (List, optional)
55 |
56 | - Default: [0, 1]
57 |
58 | The value range used for the color mapping. If data is not specified, valueRange is default to [0, 1]. Otherwise, it will be derived as the [min, max] of the values.
59 |
--------------------------------------------------------------------------------
/modules/mlvis-common/src/icons/files.js:
--------------------------------------------------------------------------------
1 | // @noflow
2 | // Copyright (c) 2018 Uber Technologies, Inc.
3 | //
4 | // Permission is hereby granted, free of charge, to any person obtaining a copy
5 | // of this software and associated documentation files (the "Software"), to deal
6 | // in the Software without restriction, including without limitation the rights
7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | // copies of the Software, and to permit persons to whom the Software is
9 | // furnished to do so, subject to the following conditions:
10 | //
11 | // The above copyright notice and this permission notice shall be included in
12 | // all copies or substantial portions of the Software.
13 | //
14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | // THE SOFTWARE.
21 |
22 | import PropTypes from 'prop-types';
23 | import React from 'react';
24 | import Base from './base';
25 |
26 | export default class Files extends React.Component {
27 | static propTypes = {
28 | /** Set the height of the icon, ex. '16px' */
29 | height: PropTypes.string,
30 | };
31 | static defaultProps = {
32 | height: '16px',
33 | predefinedClassName: 'data-ex-icons-minus',
34 | };
35 |
36 | render() {
37 | return (
38 |