@nteract/data-explorer
Version:
Transform for data resource JSON
156 lines (155 loc) • 6.68 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_table_1 = __importDefault(require("react-table"));
const react_table_hoc_fixed_columns_1 = __importDefault(require("react-table-hoc-fixed-columns"));
const css_1 = __importDefault(require("../css/"));
const ReactTableFixedColumns = react_table_hoc_fixed_columns_1.default(react_table_1.default);
const switchMode = (currentMode) => {
const nextMode = {
"=": ">",
">": "<",
"<": "=",
};
return nextMode[currentMode];
};
// Only some field types are filterable
// Iterate over a union type
// https://stackoverflow.com/a/59420158/5129731
// Members come from values of Field.type
const filterableFields = ["integer", "number", "string"];
const NumberFilter = (props) => {
const { filterState, filterName, updateFunction, onChange } = props;
const mode = filterState[filterName] || "=";
return (React.createElement("form", { style: {
border: "1px solid gray",
background: "white",
borderRadius: "5px",
width: "100%",
} },
React.createElement("input", { type: "text", id: "name", name: "user_name", style: { width: "calc(100% - 30px)", border: "none" }, onChange: (event) => {
onChange(event.currentTarget.value);
}, placeholder: "number" }),
React.createElement("button", { onClick: () => {
updateFunction({ [filterName]: switchMode(mode) });
} }, mode)));
};
const stringFilter = () => ({ onChange }) => (React.createElement("form", null,
React.createElement("input", { type: "text", id: "string-filter", name: "string-filter", onChange: (event) => {
onChange(event.currentTarget.value);
}, placeholder: "string" })));
const numberFilterWrapper = (filterState, filterName, updateFunction) => ({ onChange }) => (React.createElement(NumberFilter, { onChange: onChange, filterState: filterState, filterName: filterName, updateFunction: updateFunction }));
const filterNumbers = (mode = "=") => (filter, row) => {
const filterValue = Number(filter.value);
if (mode === "=") {
return row[filter.id] === filterValue;
}
else if (mode === "<") {
return row[filter.id] < filterValue;
}
else if (mode === ">") {
return row[filter.id] > filterValue;
}
return row[filter.id];
};
const filterStrings = () => (filter, row) => {
return (row[filter.id].toLowerCase().indexOf(filter.value.toLowerCase()) !== -1);
};
const columnFilters = {
integer: numberFilterWrapper,
number: numberFilterWrapper,
string: stringFilter,
};
const filterMethod = {
integer: filterNumbers,
number: filterNumbers,
string: filterStrings,
};
const filterableFieldSet = new Set(filterableFields);
function isFilterableFieldType(fieldType) {
return filterableFieldSet.has(fieldType);
}
// Non-primitive field types cannot be outputted directly as React children
// Members come from possible values of Field.type
const shouldStringifyFieldSet = new Set(["boolean", "object"]);
class DataResourceTransformGrid extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
filters: {},
showFilters: false,
};
}
render() {
const { data: { data, schema }, height, theme, } = this.props;
const { filters, showFilters } = this.state;
const { primaryKey = [] } = schema;
const tableColumns = schema.fields.map((field) => {
if (isFilterableFieldType(field.type)) {
return {
Header: field.name,
accessor: (rowValue) => rowValue[field.name],
id: field.name,
fixed: primaryKey.indexOf(field.name) !== -1 && "left",
filterMethod: (filter, row) => {
if (isFilterableFieldType(field.type)) {
return filterMethod[field.type](filters[field.name])(filter, row);
}
},
// If we don't have a filter defined for this field type, pass an empty div
Filter: columnFilters[field.type](filters, field.name, (newFilter) => {
this.setState({ filters: Object.assign(Object.assign({}, filters), newFilter) });
}),
};
}
else {
return {
Header: field.name,
id: field.name,
accessor: (rowValue) => {
return shouldStringifyFieldSet.has(field.type)
? JSON.stringify(rowValue[field.name])
: rowValue[field.name];
},
fixed: primaryKey.indexOf(field.name) !== -1 && "left",
};
}
});
return (React.createElement(css_1.default, { theme: theme },
React.createElement("button", {
// icon="filter"
onClick: () => this.setState({ showFilters: !showFilters }) },
showFilters ? "Hide" : "Show",
" Filters"),
React.createElement(ReactTableFixedColumns, { data: data, columns: tableColumns, style: {
height: `${height}px`,
}, className: "-striped -highlight", filterable: showFilters })));
}
}
DataResourceTransformGrid.defaultProps = {
metadata: {},
height: 500,
};
exports.default = DataResourceTransformGrid;