From 46f8abbebe1c376bc303d9603e577474dbcc70f3 Mon Sep 17 00:00:00 2001 From: gky360 Date: Wed, 26 Jun 2019 21:39:09 +0900 Subject: [PATCH 01/15] make group name and result name filterable --- frontend/src/components/ExperimentsTable.jsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index df9dc6cc..e1fd4144 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -91,6 +91,7 @@ const ExperimentsTable = (props) => { }, className: 'text-center', sortable: false, + filterable: false, minWidth: 40, Aggregated: (row) => { const groupedResultKeys = row.subRows.map((r) => { @@ -152,6 +153,7 @@ const ExperimentsTable = (props) => { style: defaultStyle, show: !(knownLogKeysConfig[logKey] || {}).hidden, aggregate: () => '', + filterable: false, })); const argsList = sortKeys(argKeys, knownArgKeysConfig).map((argKey) => ({ @@ -168,6 +170,7 @@ const ExperimentsTable = (props) => { style: defaultStyle, show: !(knownArgKeysConfig[argKey] || {}).hidden, aggregate: () => '', + filterable: false, })); const columns = [ @@ -202,6 +205,7 @@ const ExperimentsTable = (props) => { expanded={expanded} onExpandedChange={(nextExpanded) => onTableExpandedUpdate(project.id, nextExpanded)} pageSize={resultList.length} + filterable defaultSortMethod={sortMethod} defaultSorted={[ { From b0f7fbe11e12460f3ff6f269c26777824b45c73f Mon Sep 17 00:00:00 2001 From: gky360 Date: Wed, 26 Jun 2019 22:01:57 +0900 Subject: [PATCH 02/15] change filter method for name column --- frontend/src/components/ExperimentsTable.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index e1fd4144..74046ef6 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -9,6 +9,7 @@ import { getLastLogDict, sortMethod, sortKeys, + displayResultNameFull, } from '../utils'; import ResultName from './experiments_table_cell/ResultName'; @@ -17,6 +18,7 @@ import SubComponent from './experiments_table_cell/SubComponent'; import VisibilityCheckbox from './VisibilityCheckbox'; import TableConfigurator from './TableConfigurator'; + const emptyStr = '-'; const ExperimentsTable = (props) => { @@ -129,6 +131,15 @@ const ExperimentsTable = (props) => { return null; }, minWidth: 250, + filterMethod: (filter, row /* , column */) => { + // filter by displayed result name + const { _original } = row; + if (!_original) { + // aggregated row + return true; + } + return displayResultNameFull(project, _original).includes(filter.value); + }, }, ]; if (isGrouped) { From 43dd1bc6333c8b2ecc3d47ac443fd17f3f366853 Mon Sep 17 00:00:00 2001 From: gky360 Date: Wed, 26 Jun 2019 22:23:34 +0900 Subject: [PATCH 03/15] change filter method for group column --- frontend/src/components/ExperimentsTable.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index 74046ef6..e193958a 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -147,6 +147,7 @@ const ExperimentsTable = (props) => { Header: '', id: 'group', accessor: (p) => getGrandParentDirectoryName(p), + filterMethod: (filter, row /* , column */) => row[filter.id].includes(filter.value), }); } const groupedKey = isGrouped ? ['group'] : []; From f769d74bffdd9bfbeea35f08816f63fddfcf39f3 Mon Sep 17 00:00:00 2001 From: gky360 Date: Wed, 26 Jun 2019 22:54:42 +0900 Subject: [PATCH 04/15] misc --- frontend/src/components/ExperimentsTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index e193958a..ff6bedd4 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -132,12 +132,12 @@ const ExperimentsTable = (props) => { }, minWidth: 250, filterMethod: (filter, row /* , column */) => { - // filter by displayed result name const { _original } = row; if (!_original) { // aggregated row return true; } + // filter by displayed result name return displayResultNameFull(project, _original).includes(filter.value); }, }, From e91f9d5f6d27a693bc57dc64e5eda2fb176392fd Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 18 Jul 2019 10:07:41 +0900 Subject: [PATCH 05/15] replace filter with custom component --- frontend/src/components/ExperimentsTable.jsx | 14 +++----------- .../experiments_table_cell/ResultFilter.jsx | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/experiments_table_cell/ResultFilter.jsx diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index ff6bedd4..a8b023a6 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -9,12 +9,12 @@ import { getLastLogDict, sortMethod, sortKeys, - displayResultNameFull, } from '../utils'; import ResultName from './experiments_table_cell/ResultName'; import ToggleResult from './experiments_table_cell/ToggleResult'; import SubComponent from './experiments_table_cell/SubComponent'; +import ResultFilter from './experiments_table_cell/ResultFilter'; import VisibilityCheckbox from './VisibilityCheckbox'; import TableConfigurator from './TableConfigurator'; @@ -131,15 +131,7 @@ const ExperimentsTable = (props) => { return null; }, minWidth: 250, - filterMethod: (filter, row /* , column */) => { - const { _original } = row; - if (!_original) { - // aggregated row - return true; - } - // filter by displayed result name - return displayResultNameFull(project, _original).includes(filter.value); - }, + Filter: , }, ]; if (isGrouped) { @@ -147,7 +139,7 @@ const ExperimentsTable = (props) => { Header: '', id: 'group', accessor: (p) => getGrandParentDirectoryName(p), - filterMethod: (filter, row /* , column */) => row[filter.id].includes(filter.value), + Filter: , }); } const groupedKey = isGrouped ? ['group'] : []; diff --git a/frontend/src/components/experiments_table_cell/ResultFilter.jsx b/frontend/src/components/experiments_table_cell/ResultFilter.jsx new file mode 100644 index 00000000..1ceaef11 --- /dev/null +++ b/frontend/src/components/experiments_table_cell/ResultFilter.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const ResultFilter = ({ + filterKey, +}) => ( +
+ +
+); + +ResultFilter.propTypes = { + filterKey: PropTypes.string.isRequired, +}; + +export default ResultFilter; From d63540848e625e5d39a76b056375043dd9db819f Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 18 Jul 2019 10:28:38 +0900 Subject: [PATCH 06/15] WIP --- frontend/src/actions/index.js | 10 ++++++++++ frontend/src/containers/PlotContainer.jsx | 3 +++ frontend/src/reducers/index.jsx | 15 +++++++++++++++ 3 files changed, 28 insertions(+) diff --git a/frontend/src/actions/index.js b/frontend/src/actions/index.js index 91835cbe..e87cea13 100644 --- a/frontend/src/actions/index.js +++ b/frontend/src/actions/index.js @@ -234,6 +234,16 @@ export const updateResultSelect = (projectId, resultId, selected) => ({ selected, }); +// result filter + +export const RESULT_FILTER_UPDATE = 'RESULT_FILTER_UPDATE'; + +export const updateResultFilter = (projectId, filterKey, filterText) => ({ + type: RESULT_FILTER_UPDATE, + filterKey, + filterText, +}); + // lines config export const LINES_CONFIG_LINE_UPDATE = 'LINES_CONFIG_LINE_UPDATE'; diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 9bf6ca3b..bfe5a040 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -11,6 +11,7 @@ import { updateLineInAxis, updateAxisScale, toggleLogKeySelect, updateResultSelect, + updateResultFilter, updateResultsConfigSelect, updateXAxisKey, updateAxisScaleRangeType, updateAxisScaleRangeNumber, @@ -166,6 +167,7 @@ PlotContainer.propTypes = { updateAxisScale: PropTypes.func.isRequired, toggleLogKeySelect: PropTypes.func.isRequired, updateResultSelect: PropTypes.func.isRequired, + updateResultFilter: PropTypes.func.isRequired, updateResultsConfigSelect: PropTypes.func.isRequired, updateXAxisKey: PropTypes.func.isRequired, updateAxisScaleRangeType: PropTypes.func.isRequired, @@ -210,6 +212,7 @@ export default connect(mapStateToProps, { updateAxisScale, toggleLogKeySelect, updateResultSelect, + updateResultFilter, updateResultsConfigSelect, updateXAxisKey, updateAxisScaleRangeType, diff --git a/frontend/src/reducers/index.jsx b/frontend/src/reducers/index.jsx index 1a64317f..7f816e8c 100644 --- a/frontend/src/reducers/index.jsx +++ b/frontend/src/reducers/index.jsx @@ -224,9 +224,24 @@ const resultsStatusReducer = (state = {}, action) => { return state; }; +const resultFilterReducer = (state = {}, action) => { + switch (action.type) { + case ActionTypes.RESULT_FILTER_UPDATE: { + const { filterKey, filterText } = action; + return { + ...state, + [filterKey]: filterText, + }; + } + default: + return state; + } +}; + const projectStatusReducer = combineReducers({ chartDownloadStatus: chartDownloadStatusReducer, resultsStatus: resultsStatusReducer, + resultFilter: resultFilterReducer, }); const projectsStatusReducer = (state = {}, action) => { From f0efd61f3216c4e79548679d7b895a71ca764a77 Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 8 Aug 2019 10:07:41 +0900 Subject: [PATCH 07/15] use redux --- frontend/src/actions/index.js | 1 + frontend/src/components/ExperimentsTable.jsx | 6 +++-- .../experiments_table_cell/ResultFilter.jsx | 22 ++++++++++++++----- frontend/src/containers/PlotContainer.jsx | 1 + 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/frontend/src/actions/index.js b/frontend/src/actions/index.js index fe925445..70438788 100644 --- a/frontend/src/actions/index.js +++ b/frontend/src/actions/index.js @@ -252,6 +252,7 @@ export const RESULT_FILTER_UPDATE = 'RESULT_FILTER_UPDATE'; export const updateResultFilter = (projectId, filterKey, filterText) => ({ type: RESULT_FILTER_UPDATE, + projectId, filterKey, filterText, }); diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index a8b023a6..52708259 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -32,6 +32,7 @@ const ExperimentsTable = (props) => { onResultsConfigSelectUpdate, onResultUpdate, onResultSelect, + onResultFilterUpdate, onCommandSubmit, onTableExpandedUpdate, onTableColumnsVisibilityUpdate, @@ -131,7 +132,7 @@ const ExperimentsTable = (props) => { return null; }, minWidth: 250, - Filter: , + Filter: , }, ]; if (isGrouped) { @@ -139,7 +140,7 @@ const ExperimentsTable = (props) => { Header: '', id: 'group', accessor: (p) => getGrandParentDirectoryName(p), - Filter: , + Filter: , }); } const groupedKey = isGrouped ? ['group'] : []; @@ -270,6 +271,7 @@ ExperimentsTable.propTypes = { onResultsConfigSelectUpdate: PropTypes.func.isRequired, onResultUpdate: PropTypes.func.isRequired, onResultSelect: PropTypes.func.isRequired, + onResultFilterUpdate: PropTypes.func.isRequired, onCommandSubmit: PropTypes.func.isRequired, onTableExpandedUpdate: PropTypes.func.isRequired, onTableColumnsVisibilityUpdate: PropTypes.func.isRequired, diff --git a/frontend/src/components/experiments_table_cell/ResultFilter.jsx b/frontend/src/components/experiments_table_cell/ResultFilter.jsx index 1ceaef11..3069f0f3 100644 --- a/frontend/src/components/experiments_table_cell/ResultFilter.jsx +++ b/frontend/src/components/experiments_table_cell/ResultFilter.jsx @@ -1,16 +1,26 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; const ResultFilter = ({ + projectId, filterKey, -}) => ( -
- -
-); + onResultFilterUpdate, +}) => { + const onChange = useCallback((e) => { + onResultFilterUpdate(projectId, filterKey, e.target.value); + }, [projectId, filterKey, onResultFilterUpdate]); + + return ( +
+ +
+ ); +}; ResultFilter.propTypes = { + projectId: PropTypes.number.isRequired, filterKey: PropTypes.string.isRequired, + onResultFilterUpdate: PropTypes.func.isRequired, }; export default ResultFilter; diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 16854a2e..85d88dd3 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -142,6 +142,7 @@ class PlotContainer extends React.Component { onResultsConfigSelectUpdate={this.props.updateResultsConfigSelect} onResultUpdate={this.props.updateResult} onResultSelect={this.props.updateResultSelect} + onResultFilterUpdate={this.props.updateResultFilter} onCommandSubmit={this.props.createCommand} onTableExpandedUpdate={this.props.updateTableExpanded} onTableColumnsVisibilityUpdate={this.handleExperimentsTableColumnsVisibilityUpdate} From d053cd78a256221cb02095efcd375d3837668147 Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 8 Aug 2019 10:15:08 +0900 Subject: [PATCH 08/15] use state --- frontend/src/components/ExperimentsTable.jsx | 7 +++++-- .../components/experiments_table_cell/ResultFilter.jsx | 8 +++++++- frontend/src/containers/PlotContainer.jsx | 1 + frontend/src/store/uiPropTypes.js | 2 ++ 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index 52708259..740cb9ac 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -26,6 +26,7 @@ const ExperimentsTable = (props) => { project, results, resultsStatus, + resultFilter, stats, projectConfig, globalConfig, @@ -132,7 +133,7 @@ const ExperimentsTable = (props) => { return null; }, minWidth: 250, - Filter: , + Filter: , }, ]; if (isGrouped) { @@ -140,7 +141,7 @@ const ExperimentsTable = (props) => { Header: '', id: 'group', accessor: (p) => getGrandParentDirectoryName(p), - Filter: , + Filter: , }); } const groupedKey = isGrouped ? ['group'] : []; @@ -265,6 +266,7 @@ ExperimentsTable.propTypes = { project: uiPropTypes.project.isRequired, results: uiPropTypes.results.isRequired, resultsStatus: uiPropTypes.resultsStatus, + resultFilter: uiPropTypes.resultFilter, projectConfig: uiPropTypes.projectConfig.isRequired, globalConfig: uiPropTypes.globalConfig.isRequired, stats: uiPropTypes.stats.isRequired, @@ -279,6 +281,7 @@ ExperimentsTable.propTypes = { ExperimentsTable.defaultProps = { resultsStatus: {}, + resultFilter: {}, }; export default ExperimentsTable; diff --git a/frontend/src/components/experiments_table_cell/ResultFilter.jsx b/frontend/src/components/experiments_table_cell/ResultFilter.jsx index 3069f0f3..fff5a5ce 100644 --- a/frontend/src/components/experiments_table_cell/ResultFilter.jsx +++ b/frontend/src/components/experiments_table_cell/ResultFilter.jsx @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; const ResultFilter = ({ projectId, filterKey, + filterText, onResultFilterUpdate, }) => { const onChange = useCallback((e) => { @@ -12,7 +13,7 @@ const ResultFilter = ({ return (
- +
); }; @@ -20,7 +21,12 @@ const ResultFilter = ({ ResultFilter.propTypes = { projectId: PropTypes.number.isRequired, filterKey: PropTypes.string.isRequired, + filterText: PropTypes.string, onResultFilterUpdate: PropTypes.func.isRequired, }; +ResultFilter.defaultProps = { + filterText: '', +}; + export default ResultFilter; diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 85d88dd3..f3a8a04f 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -136,6 +136,7 @@ class PlotContainer extends React.Component { project={project} results={results} resultsStatus={projectStatus.resultsStatus} + resultFilter={projectStatus.resultFilter} stats={stats} projectConfig={projectConfig} globalConfig={globalConfig} diff --git a/frontend/src/store/uiPropTypes.js b/frontend/src/store/uiPropTypes.js index 48e0e59b..fc69aa3a 100644 --- a/frontend/src/store/uiPropTypes.js +++ b/frontend/src/store/uiPropTypes.js @@ -161,6 +161,8 @@ export const resultStatus = PropTypes.shape({ export const resultsStatus = PropTypes.objectOf(resultStatus); +export const resultFilter = PropTypes.objectOf(PropTypes.string); + export const projectStatus = PropTypes.shape({ chartDownloadStatus: PropTypes.oneOf(Object.values(CHART_DOWNLOAD_STATUS)), resultsStatus, From aca0985c4f29aac22bcf1bf3fac727e6d6dc2e11 Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 8 Aug 2019 10:25:04 +0900 Subject: [PATCH 09/15] pass filtered results to PlotContainer --- frontend/src/containers/PlotContainer.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index f3a8a04f..56bdc39d 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -204,10 +204,13 @@ const mapStateToProps = (state, ownProps) => { const projectConfig = config.projectsConfig[projectId] || defaultProjectConfig; const globalConfig = config.global; const { stats } = status; + + const filteredResults = { ...results }; // TODO: filtering + return { projectId, project, - results, + results: filteredResults, projectStatus, projectConfig, globalConfig, From 54c17293a0526395f03909de1e6693f6b9e79a81 Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 15 Aug 2019 10:28:51 +0900 Subject: [PATCH 10/15] add func to filter results --- frontend/src/containers/PlotContainer.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 56bdc39d..75a97de2 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -191,6 +191,16 @@ PlotContainer.propTypes = { updateTargetResultType: PropTypes.func.isRequired, }; +const filterResults = (results, resultFilter) => { + const filteredResults = Object.keys(results).reduce((pre, key) => { + const result = results[key]; + // TODO: filter + const nextResults = { ...pre, [key]: result }; + return nextResults; + }, {}); + return filteredResults; +}; + const mapStateToProps = (state, ownProps) => { const projectId = Number(ownProps.params.projectId); const { @@ -203,9 +213,10 @@ const mapStateToProps = (state, ownProps) => { const projectStatus = status.projectsStatus[projectId] || defaultProjectStatus; const projectConfig = config.projectsConfig[projectId] || defaultProjectConfig; const globalConfig = config.global; + const { resultFilter } = projectStatus; const { stats } = status; - const filteredResults = { ...results }; // TODO: filtering + const filteredResults = filterResults(results, resultFilter); return { projectId, From 7c338652626d50f72a68da4f37fc782fb9e749c9 Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 22 Aug 2019 10:26:45 +0900 Subject: [PATCH 11/15] impl filtering --- frontend/src/containers/PlotContainer.jsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 75a97de2..563ea9a4 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -192,11 +192,18 @@ PlotContainer.propTypes = { }; const filterResults = (results, resultFilter) => { - const filteredResults = Object.keys(results).reduce((pre, key) => { - const result = results[key]; - // TODO: filter - const nextResults = { ...pre, [key]: result }; - return nextResults; + const filteredResults = Object.keys(results).reduce((pre, resultId) => { + const result = results[resultId]; + const isMatched = Object.keys(resultFilter).every((filterKey) => { + // TODO: support filtering for group + const filterText = resultFilter[filterKey]; + const targetText = result[filterKey]; + return !targetText || targetText.includes(filterText); + }); + if (isMatched) { + return { ...pre, [resultId]: result }; + } + return pre; }, {}); return filteredResults; }; @@ -213,7 +220,7 @@ const mapStateToProps = (state, ownProps) => { const projectStatus = status.projectsStatus[projectId] || defaultProjectStatus; const projectConfig = config.projectsConfig[projectId] || defaultProjectConfig; const globalConfig = config.global; - const { resultFilter } = projectStatus; + const { resultFilter = {} } = projectStatus; const { stats } = status; const filteredResults = filterResults(results, resultFilter); From 3191e463198fc0c46b83358a67a798832007a71c Mon Sep 17 00:00:00 2001 From: gky360 Date: Thu, 22 Aug 2019 10:51:29 +0900 Subject: [PATCH 12/15] run 'yarn format:scripts' --- frontend/src/components/ExperimentsTable.jsx | 19 ++++++-- .../experiments_table_cell/ResultFilter.jsx | 23 +++++----- frontend/src/containers/PlotContainer.jsx | 45 ++++++++++--------- 3 files changed, 53 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index 9a869756..979a88ee 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -18,7 +18,6 @@ import ResultFilter from './experiments_table_cell/ResultFilter'; import VisibilityCheckbox from './VisibilityCheckbox'; import TableConfigurator from './TableConfigurator'; - const emptyStr = '-'; const ExperimentsTable = (props) => { @@ -134,7 +133,14 @@ const ExperimentsTable = (props) => { return null; }, minWidth: 250, - Filter: , + Filter: ( + + ), }, ]; if (isGrouped) { @@ -142,7 +148,14 @@ const ExperimentsTable = (props) => { Header: '', id: 'group', accessor: (p) => getGrandParentDirectoryName(p), - Filter: , + Filter: ( + + ), }); } const groupedKey = isGrouped ? ['group'] : []; diff --git a/frontend/src/components/experiments_table_cell/ResultFilter.jsx b/frontend/src/components/experiments_table_cell/ResultFilter.jsx index fff5a5ce..cc96c106 100644 --- a/frontend/src/components/experiments_table_cell/ResultFilter.jsx +++ b/frontend/src/components/experiments_table_cell/ResultFilter.jsx @@ -1,19 +1,22 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; -const ResultFilter = ({ - projectId, - filterKey, - filterText, - onResultFilterUpdate, -}) => { - const onChange = useCallback((e) => { - onResultFilterUpdate(projectId, filterKey, e.target.value); - }, [projectId, filterKey, onResultFilterUpdate]); +const ResultFilter = ({ projectId, filterKey, filterText, onResultFilterUpdate }) => { + const onChange = useCallback( + (e) => { + onResultFilterUpdate(projectId, filterKey, e.target.value); + }, + [projectId, filterKey, onResultFilterUpdate] + ); return (
- +
); }; diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index 6faab318..1fb1c003 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -242,24 +242,27 @@ const mapStateToProps = (state, ownProps) => { }; }; -export default connect(mapStateToProps, { - getProject, - getResultList, - updateResult, - clearResultList, - createCommand, - resetProjectConfig, - updateLineInAxis, - updateAxisScale, - toggleLogKeySelect, - updateResultSelect, - updateResultFilter, - updateResultsConfigSelect, - updateXAxisKey, - updateAxisScaleRangeType, - updateAxisScaleRangeNumber, - updateTableExpanded, - updateTableColumnsVisibility, - updateChartDownloadStatus, - updateTargetResultType, -})(PlotContainer); +export default connect( + mapStateToProps, + { + getProject, + getResultList, + updateResult, + clearResultList, + createCommand, + resetProjectConfig, + updateLineInAxis, + updateAxisScale, + toggleLogKeySelect, + updateResultSelect, + updateResultFilter, + updateResultsConfigSelect, + updateXAxisKey, + updateAxisScaleRangeType, + updateAxisScaleRangeNumber, + updateTableExpanded, + updateTableColumnsVisibility, + updateChartDownloadStatus, + updateTargetResultType, + } +)(PlotContainer); From 70ec2d76d84b60cbc63fef7f5003ff3dd77b5807 Mon Sep 17 00:00:00 2001 From: gky360 Date: Tue, 17 Sep 2019 10:23:44 +0900 Subject: [PATCH 13/15] support filtering for groups --- frontend/src/components/ExperimentsTable.jsx | 4 ++-- frontend/src/containers/PlotContainer.jsx | 5 ++--- frontend/src/utils/index.js | 2 ++ 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index 979a88ee..c64c0e03 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -5,7 +5,7 @@ import ReactTable from 'react-table'; import * as uiPropTypes from '../store/uiPropTypes'; import { argValue2string, - getGrandParentDirectoryName, + getResultGroupName, getLastLogDict, sortMethod, sortKeys, @@ -147,7 +147,7 @@ const ExperimentsTable = (props) => { nameColumns.unshift({ Header: '', id: 'group', - accessor: (p) => getGrandParentDirectoryName(p), + accessor: (p) => getResultGroupName(p), Filter: ( { const filteredResults = Object.keys(results).reduce((pre, resultId) => { const result = results[resultId]; const isMatched = Object.keys(resultFilter).every((filterKey) => { - // TODO: support filtering for group const filterText = resultFilter[filterKey]; - const targetText = result[filterKey]; + const targetText = filterKey === 'group' ? getResultGroupName(result) : result[filterKey]; return !targetText || targetText.includes(filterText); }); if (isMatched) { diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index c1c4f97c..ba0814e8 100644 --- a/frontend/src/utils/index.js +++ b/frontend/src/utils/index.js @@ -39,6 +39,8 @@ export const getRelativeResultPathName = (project = {}, result = {}) => export const getGrandParentDirectoryName = (result = {}) => path.basename(path.resolve(result.pathName, '..')); +export const getResultGroupName = (result = {}) => getGrandParentDirectoryName(result); + export const displayResultNameFull = (project = {}, result = {}) => result.name || getRelativeResultPathName(project, result); From 555dee93f9c7749a23adcb3d17f5c2920300ac5c Mon Sep 17 00:00:00 2001 From: gky360 Date: Wed, 25 Sep 2019 16:30:30 +0900 Subject: [PATCH 14/15] support filtering results with default name --- frontend/src/containers/PlotContainer.jsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/src/containers/PlotContainer.jsx b/frontend/src/containers/PlotContainer.jsx index d3024182..1737dd29 100644 --- a/frontend/src/containers/PlotContainer.jsx +++ b/frontend/src/containers/PlotContainer.jsx @@ -33,7 +33,7 @@ import LogVisualizer from '../components/LogVisualizer'; import SideBar from '../components/SideBar'; import ResultTypeSelector from '../components/ResultTypeSelector'; import { defaultProjectStatus, defaultProjectConfig } from '../constants'; -import { startPolling, stopPolling, getResultGroupName } from '../utils'; +import { startPolling, stopPolling, getResultGroupName, displayResultNameFull } from '../utils'; class PlotContainer extends React.Component { componentDidMount() { @@ -201,12 +201,23 @@ PlotContainer.propTypes = { updateTargetResultType: PropTypes.func.isRequired, }; -const filterResults = (results, resultFilter) => { +const getTargetTextForFilter = (project, result, filterKey) => { + switch (filterKey) { + case 'group': + return getResultGroupName(result); + case 'name': + return displayResultNameFull(project, result); + default: + return result[filterKey]; + } +}; + +const filterResults = (project, results, resultFilter) => { const filteredResults = Object.keys(results).reduce((pre, resultId) => { const result = results[resultId]; const isMatched = Object.keys(resultFilter).every((filterKey) => { const filterText = resultFilter[filterKey]; - const targetText = filterKey === 'group' ? getResultGroupName(result) : result[filterKey]; + const targetText = getTargetTextForFilter(project, result, filterKey); return !targetText || targetText.includes(filterText); }); if (isMatched) { @@ -228,7 +239,7 @@ const mapStateToProps = (state, ownProps) => { const { resultFilter = {} } = projectStatus; const { stats } = status; - const filteredResults = filterResults(results, resultFilter); + const filteredResults = filterResults(project, results, resultFilter); return { projectId, From 3ab70e6e5dabb42bc7d891376676003ff3d1ad51 Mon Sep 17 00:00:00 2001 From: gky360 Date: Tue, 1 Oct 2019 10:50:55 +0900 Subject: [PATCH 15/15] rename function --- frontend/src/components/ExperimentsTable.jsx | 4 ++-- frontend/src/containers/PlotContainer.jsx | 9 +++++++-- frontend/src/utils/index.js | 2 -- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/ExperimentsTable.jsx b/frontend/src/components/ExperimentsTable.jsx index c64c0e03..979a88ee 100644 --- a/frontend/src/components/ExperimentsTable.jsx +++ b/frontend/src/components/ExperimentsTable.jsx @@ -5,7 +5,7 @@ import ReactTable from 'react-table'; import * as uiPropTypes from '../store/uiPropTypes'; import { argValue2string, - getResultGroupName, + getGrandParentDirectoryName, getLastLogDict, sortMethod, sortKeys, @@ -147,7 +147,7 @@ const ExperimentsTable = (props) => { nameColumns.unshift({ Header: '', id: 'group', - accessor: (p) => getResultGroupName(p), + accessor: (p) => getGrandParentDirectoryName(p), Filter: ( { switch (filterKey) { case 'group': - return getResultGroupName(result); + return getGrandParentDirectoryName(result); case 'name': return displayResultNameFull(project, result); default: diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index ba0814e8..c1c4f97c 100644 --- a/frontend/src/utils/index.js +++ b/frontend/src/utils/index.js @@ -39,8 +39,6 @@ export const getRelativeResultPathName = (project = {}, result = {}) => export const getGrandParentDirectoryName = (result = {}) => path.basename(path.resolve(result.pathName, '..')); -export const getResultGroupName = (result = {}) => getGrandParentDirectoryName(result); - export const displayResultNameFull = (project = {}, result = {}) => result.name || getRelativeResultPathName(project, result);