17 | }
18 | return (
19 |
20 |
21 | {this.props.name}
22 |
23 |
24 | {this.props.description}
25 |
26 |
32 |
33 | );
34 | }
35 |
36 | /**
37 | * Updates this to use the given vlSpec.
38 | *
39 | * @param {Object} vlSpec The Vega-Lite spec to use.
40 | */
41 | updateView(vlSpec) {
42 | if (!vlSpec) {
43 | console.warn('no spec passed to viz view');
44 | return;
45 | }
46 |
47 | const loader = vega.loader();
48 |
49 | const original_http = loader.http;
50 | loader.http = (url, options) => {
51 | console.debug(url);
52 |
53 | if (url in datasets) {
54 | return datasets[url];
55 | }
56 | return original_http(url, options);
57 | };
58 |
59 | vegaEmbed(this.refs.vis, vlSpec, { renderer: this.props.renderer, loader: loader, mode: 'vega-lite', actions: { editor: false, export: false } });
60 | }
61 | }
62 |
63 | export default Visualization;
64 |
--------------------------------------------------------------------------------
/src/index/js/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 |
4 | import '../../scss/App.css';
5 |
6 | import ToolTile from './ToolTile';
7 | import SpecViewer from '../../../specviewer/js/components/SpecViewer';
8 | import Labeler from '../../../labeler/js/components/Labeler';
9 | import DatasetViewer from '../../../datasetviewer/js/components/DatasetViewer';
10 |
11 | const TOOLS = [
12 | {
13 | name: 'Spec Viewer',
14 | description: 'View many specs side by side',
15 | route: '/specviewer',
16 | },
17 | {
18 | name: 'Labeler',
19 | description: 'Label pairs of visualizations',
20 | route: '/labeler',
21 | },
22 | {
23 | name: 'Dataset Viewer',
24 | description: 'View specs generated for labeling (to be pooled)',
25 | route: '/datasetviewer'
26 | }
27 | ];
28 |
29 | class App extends Component {
30 | render() {
31 | const Home = () => {
32 | const tools = [];
33 |
34 | for (const tool of TOOLS) {
35 | tools.push(
36 |
37 | );
38 | }
39 |
40 | return (
41 |
42 |
43 | Tools for Draco
44 |
45 |
46 | {tools}
47 |
48 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | );
62 | }
63 | }
64 |
65 | export default App;
66 |
--------------------------------------------------------------------------------
/src/datasetviewer/scss/DatasetChooser.scss:
--------------------------------------------------------------------------------
1 | @import 'shared/scss/base.scss';
2 |
3 | .DatasetChooser {
4 | height: 35px;
5 | line-height: 35px;
6 | vertical-align: middle;
7 | margin-top: 1px;
8 | display: flex;
9 | flex-direction: row;
10 | margin-bottom: 16px;
11 | width: 600px;
12 |
13 | .search-title {
14 | flex: 0 0 auto;
15 | padding-left: 8px;
16 | padding-right: 8px;
17 | border-radius: 4px 0 0 4px;
18 | background-color: #e8e8e8;
19 | font-size: 16px;
20 | }
21 |
22 | .search-bar {
23 | flex: 1 1 auto;
24 | display: flex;
25 | position: relative;
26 | flex-direction: column;
27 | border: 1px solid #e8e8e8;
28 | border-radius: 0;
29 | }
30 |
31 | .dimensions {
32 | display: flex;
33 | flex-direction: row;
34 | background-color: $light-grey;
35 | border-radius: 0 4px 4px 0;
36 |
37 | .dim-option {
38 | padding-left: 8px;
39 | padding-right: 8px;
40 | cursor: pointer;
41 | }
42 |
43 | .dim-option.selected {
44 | background-color: $med-blue;
45 | border-radius: 4px;
46 | }
47 | }
48 |
49 | .search-input {
50 | flex: 1 1 auto;
51 | border: none;
52 | font-size: 12px;
53 | color: #b5b5b5;
54 | padding: 0 4px 0 8px;
55 | }
56 |
57 | .search-input::placeholder {
58 | color: #c9c8c8;
59 | }
60 |
61 | .search-input:focus {
62 | outline: none;
63 | }
64 |
65 | .dropdown-content {
66 | display: none;
67 | position: absolute;
68 | list-style-type: none;
69 | width: 100%;
70 | top: 35px;
71 | background-color: #fff;
72 | max-height: 240px;
73 | overflow-y: scroll;
74 | overflow-x: hidden;
75 | z-index: 1;
76 | margin: 0;
77 | padding: 0;
78 | font-size: 12px;
79 | border: 1px solid #e8e8e8;
80 | border-top-style: none;
81 | }
82 |
83 | .dropdown-item {
84 | margin: 0;
85 | padding: 0 8px 0 8px;
86 | cursor: pointer;
87 | }
88 |
89 | .dropdown-item:hover {
90 | background-color: #e8e8e8;
91 | }
92 |
93 | .search-bar:focus-within .dropdown-content {
94 | display: block;
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/src/specviewer/js/components/SpecViewer.js:
--------------------------------------------------------------------------------
1 | import '../../scss/SpecViewer.css';
2 |
3 | import * as stringify from 'json-stable-stringify';
4 | import React, { Component } from 'react';
5 | import Visualization from '../../../shared/js/components/Visualization';
6 |
7 | class SpecViewer extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = {
12 | data: undefined,
13 | specs: (new URL(window.location.href)).searchParams.get('data') || '/spec_pairs/data.json'
14 | };
15 | }
16 |
17 | componentDidMount() {
18 | fetch(this.state.specs)
19 | .then(response => response.json())
20 | .then(data => this.setState({ data: data }));
21 | }
22 |
23 | render() {
24 | const data = this.state.data;
25 |
26 | if (!data) {
27 | return loading...
;
28 | }
29 |
30 | const headers = data.headers;
31 |
32 | const pairs = [];
33 | for (let i = 0; i < data.specs.length; i++) {
34 | const pair = data.specs[i];
35 |
36 | const properties = Object.keys(pair.properties || {}).map((p, i) => {p}: {stringify(pair.properties[p])}
);
37 |
38 | pairs.push(
39 |
40 |
41 |
42 |
43 |
44 | {properties}
45 |
51 |
52 | You are viewing {this.state.specs}. Append ?data=spec_pairs/FILE.json to the URL to change the source.
53 |
54 |
55 |
56 | {headers.first.title}
{headers.first.subtitle}
57 |
58 |
59 | {headers.second.title}
{headers.second.subtitle}
60 |
61 | {pairs}
62 |
63 |
28 | {datasetOptions}
29 |
30 | );
31 |
32 |
33 | const dimensions = [];
34 | if (this.props.availableDimensions) {
35 | for (let i = 0; i < this.props.availableDimensions.length; i++) {
36 | const d = this.props.availableDimensions[i];
37 |
38 | const dimClasses = classnames({
39 | 'dim-option': true,
40 | 'selected': d === this.props.selectedDimension
41 | });
42 |
43 | dimensions.push(
44 | this.props.setDimension(d) }>{d}
45 | );
46 | }
47 | }
48 |
49 | return (
50 |
51 |
52 | {this.props.dataset}
53 |
54 |
55 | { this.setInputText(e); }}>
57 | {dropdown}
58 |
59 |
60 | dimensions:
61 | {dimensions}
62 |
63 |
loading...
;
37 | }
38 |
39 | let vizGroups;
40 | let info;
41 | let specView;
42 | if (!this.state.specs) {
43 | vizGroups = loading...
;
44 | } else {
45 | let pairs = 0;
46 | let count = 0;
47 |
48 |
49 | const groups = this.state.specs[this.state.currentDimension];
50 |
51 | vizGroups = [];
52 | for (let i = 0; i < groups.length; i++) {
53 | const group = groups[i];
54 |
55 | const visualizations = [];
56 | for (let j = 0; j < group.length; j++) {
57 | const spec = group[j];
58 |
59 | const specNoData = {};
60 | Object.assign(specNoData, spec);
61 | delete specNoData['data'];
62 |
63 |
64 | visualizations.push(
65 |
66 |
67 |
68 | );
69 | }
70 |
71 | vizGroups.push(
72 |
73 | {visualizations}
74 |
75 | );
76 |
77 | count += group.length;
78 |
79 | if (group.length > 0) {
80 | pairs += factorial(group.length) / (2 * factorial(group.length - 2));
81 | }
82 | }
83 |
84 | info = {count} visualizations and {pairs} pairs
;
85 | }
86 |
87 | return (
88 |
89 |
90 |
95 | {info}
96 |
97 | {vizGroups}
98 | {specView}
99 |
{t} | );
130 | const tableBody = data.slice(0, 20).map((r, i) =>
131 | {fields.map(f => | {r[f]} | )}
132 |
);
133 | const remaining = data.length - tableBody.length;
134 |
135 | table =
136 |
137 |
138 |
139 | {header}
140 |
141 |
142 |
143 | {tableBody}
144 |
145 |
146 | {remaining > 0 ?
...{remaining} more rows : ''}
147 |
{this.hover(UNK);}}>
160 | {this.state.user === 'anonymous' ?
Labeling as Anonymous!
Please add ?user=NAME to the URL!
: ''}
161 |
Task: {this.state.task || 'NO TASK'}
162 |
163 |
164 |
{this.choose(this.state.id, 'left');}}
166 | onMouseEnter={() => {this.hover(LEFT);}}>
167 | {leftViz}
168 |
169 |
170 |
{this.choose(this.state.id, 'same');}}
172 | onMouseEnter={() => {this.hover(EQUALS);}}>
173 |
174 | {this.state.hover}
175 |
176 |
177 |
{this.choose(this.state.id, 'terrible');}}
179 | onMouseEnter={() => {this.hover(TERRIBLE);}}>
180 | Both are
181 | really bad
182 |
183 |
184 |
{this.choose(this.state.id, 'right');}}
186 | onMouseEnter={() => {this.hover(RIGHT);}}>
187 | {rightViz}
188 |
189 |
190 |
191 |
192 |
{stringify(leftSpec, {space: 2})}
193 |
{specDiff}
194 |
{stringify(rightSpec, {space: 2})}
195 |
196 | { table }
197 |