diff --git a/dashboard/src/src/experiments/content/DatabasePage/DatabasePage.js b/dashboard/src/src/experiments/content/DatabasePage/DatabasePage.js
index f8540518d..9ee9e1828 100644
--- a/dashboard/src/src/experiments/content/DatabasePage/DatabasePage.js
+++ b/dashboard/src/src/experiments/content/DatabasePage/DatabasePage.js
@@ -52,6 +52,12 @@ class TrialsProvider {
const trialIndices = queryTrials.map(trial => trial.id);
trialIndices.sort();
const trials = [];
+ /**
+ * Map to check whether each param column is sortable.
+ * Array params are not considered sortable,
+ * except if they contains only 1 element.
+ */
+ const sortableParamCols = {};
for (let trialID of trialIndices) {
const rawTrial = await this.backend.query(
`trials/${experiment}/${trialID}`
@@ -65,10 +71,26 @@ class TrialsProvider {
);
// Prepare rendering for array parameters
for (let key of Object.keys(flattenedParameters)) {
+ let sortableCell = true;
if (Array.isArray(flattenedParameters[key])) {
- flattenedParameters[key] = flattenedParameters[
- key
- ].map((value, i) =>
{value.toString()}
);
+ if (flattenedParameters[key].length === 1) {
+ // Array contains only 1 element.
+ // Flatten it and assume element is displayable as-is.
+ flattenedParameters[key] = flattenedParameters[key][0];
+ } else {
+ // Real array with many values.
+ // Render it immediately and mark cell as not sortable.
+ flattenedParameters[key] = flattenedParameters[
+ key
+ ].map((value, i) => {value.toString()}
);
+ sortableCell = false;
+ }
+ }
+ // Param column is sortable if all its cells are sortable.
+ if (sortableParamCols.hasOwnProperty(key)) {
+ sortableParamCols[key] = sortableParamCols[key] && sortableCell;
+ } else {
+ sortableParamCols[key] = sortableCell;
}
}
// Save flattened keys in specific property `paramKeys` for later
@@ -114,7 +136,23 @@ class TrialsProvider {
header: 'Statistics',
},
];
- this.trials[experiment] = { headers: trialHeaders, trials: trials };
+ // Map to specify sortable columns.
+ const sortableCols = {
+ ...sortableParamCols,
+ id: true,
+ submitTime: true,
+ startTime: true,
+ endTime: true,
+ objective: true,
+ statistics: false,
+ };
+ // Array to specify sortable columns by index.
+ const sortable = trialHeaders.map(header => sortableCols[header.key]);
+ this.trials[experiment] = {
+ headers: trialHeaders,
+ trials: trials,
+ sortable: sortable,
+ };
}
return this.trials[experiment];
}
@@ -148,6 +186,7 @@ class DatabasePage extends React.Component {
diff --git a/dashboard/src/src/experiments/content/DatabasePage/TrialTable.js b/dashboard/src/src/experiments/content/DatabasePage/TrialTable.js
index 5b98867fc..084b758e0 100644
--- a/dashboard/src/src/experiments/content/DatabasePage/TrialTable.js
+++ b/dashboard/src/src/experiments/content/DatabasePage/TrialTable.js
@@ -10,7 +10,7 @@ import {
TableCell,
} from 'carbon-components-react';
-const TrialTable = ({ rows, headers, experiment }) => {
+const TrialTable = ({ rows, headers, sortable, experiment }) => {
return (
{
- {headers.map(header => (
-
+ {headers.map((header, indexHeader) => (
+
{header.header}
))}