Skip to content

Commit 21dfcb5

Browse files
sergiu-ojocsergiu-ojoc
authored
Merge pull request #580 from signals-dev/typescriptConvert
Typescript convert
2 parents 25cded6 + ec2e89b commit 21dfcb5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+2824
-2389
lines changed

‎client/src/components/Common/Dropdown.tsx‎

Lines changed: 28 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import Select from 'react-select';
33

44
type DropdownOption = {
@@ -13,7 +13,7 @@ type FilterOptions = {
1313
isFixed?: boolean;
1414
};
1515

16-
type Props = {
16+
interface Props {
1717
onChange: (tag) => any;
1818
isSearchable?: boolean;
1919
isMulti?: boolean;
@@ -23,7 +23,7 @@ type Props = {
2323
options?: FilterOptions[];
2424
formatLabel?: boolean;
2525
isDisabled?: boolean;
26-
};
26+
}
2727

2828
const optionsKnown: DropdownOption[] = [
2929
{ label: 'Investigate', icon: 'investigate' },
@@ -67,46 +67,29 @@ export const formatOptionLabel = (props: DropdownOption) => {
6767
);
6868
};
6969

70-
export class Dropdown extends Component<Props> {
71-
static defaultProps = {
72-
placeholder: 'Select a tag',
73-
isMulti: false,
74-
isSearchable: false,
75-
closeMenuOnSelect: true,
76-
options: filterOptions,
77-
formatLabel: true,
78-
isDisabled: false,
79-
};
80-
81-
render() {
82-
const {
83-
onChange,
84-
isSearchable,
85-
isMulti,
86-
closeMenuOnSelect,
87-
value,
88-
placeholder,
89-
options,
90-
formatLabel,
91-
isDisabled,
92-
} = this.props;
93-
94-
return (
95-
<Select
96-
formatOptionLabel={formatLabel && formatOptionLabel}
97-
options={options}
98-
classNamePrefix="tag-options"
99-
className="tag-select"
100-
placeholder={placeholder}
101-
onChange={onChange}
102-
isSearchable={isSearchable}
103-
isMulti={isMulti}
104-
closeMenuOnSelect={closeMenuOnSelect}
105-
value={value}
106-
isDisabled={isDisabled}
107-
/>
108-
);
109-
}
110-
}
111-
70+
const Dropdown: React.FC<Props> = ({
71+
onChange,
72+
isSearchable = false,
73+
isMulti = false,
74+
closeMenuOnSelect = true,
75+
value,
76+
placeholder = 'Select a tag',
77+
options = filterOptions,
78+
formatLabel = true,
79+
isDisabled = false,
80+
}: Props) => (
81+
<Select
82+
formatOptionLabel={formatLabel && formatOptionLabel}
83+
options={options}
84+
classNamePrefix="tag-options"
85+
className="tag-select"
86+
placeholder={placeholder}
87+
onChange={onChange}
88+
isSearchable={isSearchable}
89+
isMulti={isMulti}
90+
closeMenuOnSelect={closeMenuOnSelect}
91+
value={value}
92+
isDisabled={isDisabled}
93+
/>
94+
);
11295
export default Dropdown;

‎client/src/components/Header/Header.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
66
import * as fileDownload from 'react-file-download';
77
import { faChevronRight, faChevronLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons';
88
import { getCurrentExperimentDetails, getSelectedExperimentData } from 'src/model/selectors/experiment';
9-
import { filterEventsByTagAction, toggleTimeSyncModeAction, switchChartStyleAction } from 'src/model/actions/datarun';
10-
import {
11-
getIsTimeSyncModeEnabled,
12-
getDatarunDetails,
13-
getCurrentChartStyle,
14-
getActiveEventID,
15-
} from 'src/model/selectors/datarun';
9+
import { toggleTimeSyncModeAction, switchChartStyleAction } from 'src/model/actions/datarun';
10+
import { filterEventsByTagAction } from 'src/model/actions/events';
11+
import { getIsTimeSyncModeEnabled, getDatarunDetails, getCurrentChartStyle } from 'src/model/selectors/datarun';
12+
import { getActiveEventID } from 'src/model/selectors/events';
1613
import { AUTH_USER_DATA } from 'src/model/utils/constants';
17-
import { getSelectedExperiment } from '../../model/selectors/projects';
18-
import { onUserLogoutAction } from '../../model/actions/users';
19-
import { RootState } from '../../model/types';
14+
import { getSelectedExperiment } from 'src/model/selectors/projects';
15+
import { onUserLogoutAction } from 'src/model/actions/users';
16+
import { RootState } from 'src/model/types';
2017
import { VerticalDots, DownloadIcon, UploadIcon, LineIcon, StepIcon, LogoutIcon } from '../Common/icons';
2118
import Dropdown from '../Common/Dropdown';
2219
import UploadEvents from '../Timeseries/UploadEvents';

‎client/src/components/Landing/Experiments.tsx‎

Lines changed: 66 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,67 @@ import React from 'react';
22
import { connect } from 'react-redux';
33
import * as _ from 'lodash';
44
import { withRouter, useHistory } from 'react-router-dom';
5-
import Loader from '../Common/Loader';
5+
import { RootState, ExperimentDataType } from 'src/model/types';
6+
import { selectExperiment } from 'src/model/actions/landing';
67
import {
78
getFilteredExperiments,
89
getIsExperimentsLoading,
910
getSelectedPipeline,
1011
getSelectedExperiment,
11-
} from '../../model/selectors/projects';
12-
import { selectExperiment } from '../../model/actions/landing';
13-
import { RootState, ExperimentDataType } from '../../model/types';
14-
import { TagStats, Scale as MatrixScale } from './Matrix/types';
12+
} from 'src/model/selectors/projects';
13+
import Loader from '../Common/Loader';
14+
import { TagStats, MatrixScale } from './Matrix/types';
1515
import { fromTagToID } from './utils';
1616
import Matrix from './Matrix/Matrix';
1717

18-
let props: Props;
1918
type StateProps = ReturnType<typeof mapState>;
2019
type DispatchProps = ReturnType<typeof mapDispatch>;
2120
type Props = StateProps & DispatchProps;
22-
type renderExperimentProps = {
21+
22+
let props: Props;
23+
type ExperimentProps = {
2324
experiment: ExperimentDataType;
2425
tagStats: TagStats;
2526
matrixScale: MatrixScale;
2627
index: number;
27-
selectedPipeline: typeof props.selectedExperiment;
28+
selectedPipeline: typeof props.selectedPipeline;
2829
selectedExperiment: typeof props.selectedExperiment;
29-
onSelectExperiment: typeof props.onSelectExperiment;
30+
};
31+
32+
const countDatarunEvents = (experiment) => {
33+
const { dataruns } = experiment;
34+
return dataruns.map((datarun) => datarun.events.length).reduce((item, accumulator) => item + accumulator, 0);
35+
};
36+
37+
export const Experiment: React.FC<ExperimentProps> = ({
38+
experiment,
39+
tagStats,
40+
matrixScale,
41+
index,
42+
selectedPipeline,
43+
selectedExperiment,
44+
}: ExperimentProps) => {
45+
let history = useHistory();
46+
const activeClass = selectedPipeline || selectedExperiment === experiment.id ? 'active' : '';
47+
const eventCounts = countDatarunEvents(experiment);
48+
const { id, dataruns, name, date_creation, created_by } = experiment;
49+
50+
return (
51+
<div className={`cell ${activeClass}`} key={index} onClick={() => history.push(`/experiment/${id}`)}>
52+
<h3>
53+
#{index + 1} {name}
54+
</h3>
55+
<div className="item-data">
56+
<ul>
57+
<li>Signals: {dataruns.length}</li>
58+
<li>Events: {eventCounts}</li>
59+
<li>DC: {date_creation.substring(0, 10)}</li>
60+
<li>By: {`${created_by}`}</li>
61+
</ul>
62+
<Matrix experiment={experiment} tagStats={tagStats} scale={matrixScale} />
63+
</div>
64+
</div>
65+
);
3066
};
3167

3268
export const Experiments: React.FC<Props> = ({
@@ -35,32 +71,36 @@ export const Experiments: React.FC<Props> = ({
3571
onSelectExperiment,
3672
selectedPipeline,
3773
selectedExperiment,
38-
}) => {
74+
}: Props) => {
3975
// Compute maxTagNum, maxEventNum, and maxScore
4076
// which would be used for plotting Matrix
41-
42-
let maxTagNum = Number.MIN_SAFE_INTEGER;
43-
let maxEventNum = Number.MIN_SAFE_INTEGER;
44-
let maxScore = Number.MIN_SAFE_INTEGER;
77+
let maxTagNum: number = Number.MIN_SAFE_INTEGER;
78+
let maxEventNum: number = Number.MIN_SAFE_INTEGER;
79+
let maxScore: number = Number.MIN_SAFE_INTEGER;
4580
let tagStatsList: TagStats[] = [];
4681

47-
// @TODO - move this logic to selectors/experiment
48-
_.each(filteredExperiments, (experiment) => {
82+
filteredExperiments.forEach((currentExperiment) => {
83+
const { dataruns } = currentExperiment;
4984
let tagStats: { [index: string]: number } = {};
85+
5086
for (let i = 0; i < 7; i += 1) {
5187
tagStats[String(i)] = 0;
5288
}
53-
_.each(experiment.dataruns, (datarun) => {
54-
for (let i = 0; i < datarun.events.length; i += 1) {
55-
let tid = fromTagToID(datarun.events[i].tag);
56-
tid = tid === 'untagged' ? '0' : tid;
57-
if (!_.has(tagStats, tid)) {
58-
tagStats[tid] = 0;
89+
90+
dataruns.forEach((currentDatarun) => {
91+
const { events } = currentDatarun;
92+
for (let iterator = 0; iterator < events.length; iterator += 1) {
93+
let tagID: string = fromTagToID(events[iterator].tag);
94+
95+
tagID = tagID === 'untagged' ? '0' : tagID;
96+
if (!_.has(tagStats, tagID)) {
97+
tagStats[tagID] = 0;
5998
}
60-
tagStats[tid] += 1;
61-
maxTagNum = maxTagNum < tagStats[tid] ? tagStats[tid] : maxTagNum;
62-
maxScore = maxScore > datarun.events[i].score ? maxScore : datarun.events[i].score;
63-
maxEventNum = maxEventNum < datarun.events.length ? datarun.events.length : maxEventNum;
99+
100+
tagStats[tagID] += 1;
101+
maxTagNum = maxTagNum < tagStats[tagID] ? tagStats[tagID] : maxTagNum;
102+
maxScore = maxScore > events[iterator].score ? maxScore : events[iterator].score;
103+
maxEventNum = maxEventNum < events.length ? events.length : maxEventNum;
64104
}
65105
});
66106
tagStatsList.push(tagStats);
@@ -99,40 +139,6 @@ export const Experiments: React.FC<Props> = ({
99139
);
100140
};
101141

102-
const countDatarunEvents = (experiment) => {
103-
const { dataruns } = experiment;
104-
return dataruns.map((datarun) => datarun.events.length).reduce((item, accumulator) => item + accumulator, 0);
105-
};
106-
107-
export const Experiment: React.FC<renderExperimentProps> = ({
108-
experiment,
109-
tagStats,
110-
matrixScale,
111-
index,
112-
selectedPipeline,
113-
selectedExperiment,
114-
}) => {
115-
let history = useHistory();
116-
const activeClass = selectedPipeline || selectedExperiment === experiment.id ? 'active' : '';
117-
const eventCounts = countDatarunEvents(experiment);
118-
return (
119-
<div className={`cell ${activeClass}`} key={index} onClick={() => history.push(`/experiment/${experiment.id}`)}>
120-
<h3>
121-
{/* #{index + 1} {experiment.dataset}_{experiment.pipeline} */}#{index + 1} {experiment.name}
122-
</h3>
123-
<div className="item-data">
124-
<ul>
125-
<li>Signals: {experiment.dataruns.length}</li>
126-
<li>Events: {eventCounts}</li>
127-
<li>DC: {experiment.date_creation.substring(0, 10)}</li>
128-
<li>By: {`${experiment.created_by}`}</li>
129-
</ul>
130-
<Matrix experiment={experiment} tagStats={tagStats} scale={matrixScale} />
131-
</div>
132-
</div>
133-
);
134-
};
135-
136142
const mapState = (state: RootState) => ({
137143
filteredExperiments: getFilteredExperiments(state),
138144
isExperimentsLoading: getIsExperimentsLoading(state),

‎client/src/components/Landing/Landing.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import { connect } from 'react-redux';
3-
import { fetchProjects } from '../../model/actions/landing';
3+
import { fetchProjects } from 'src/model/actions/landing';
4+
import { getSelectedExperiment } from 'src/model/selectors/projects';
5+
import { RootState } from 'src/model/types';
6+
import { getProcessedDataRuns } from 'src/model/selectors/experiment';
47
import Projects from './Projects';
58
import Pipelines from './Pipelines';
69
import Experiments from './Experiments';
710

8-
import { getSelectedExperiment } from '../../model/selectors/projects';
9-
import { RootState } from '../../model/types';
1011
import './Landing.scss';
11-
import { getProcessedDataRuns } from '../../model/selectors/experiment';
1212

1313
type StateProps = ReturnType<typeof mapState>;
1414
type DispatchProps = ReturnType<typeof mapDispatch>;

0 commit comments

Comments
 (0)