From c72d5b94442cd1717c4cf25470d937d51d1bd378 Mon Sep 17 00:00:00 2001 From: Durk Steed Date: Fri, 23 Jul 2021 13:30:50 -0400 Subject: [PATCH 01/18] add searchable dropdown for labels --- frontend/package.json | 18 +- frontend/src/components/DataCard/index.jsx | 44 +- frontend/yarn.lock | 7393 +++++++++++++------- 3 files changed, 4817 insertions(+), 2638 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 9653c04d..c2550830 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -36,45 +36,39 @@ "clean-webpack-plugin": "4.0.0-alpha.0", "css-loader": "5.2.4", "d3": "3.5.17", - "datatables.net": "1.10.13", "datatables.net-bs": "1.10.13", - "enzyme": "3.11.0", "es6-promise": "4.2.8", "eslint": "7.25.0", "eslint-loader": "4.0.2", "eslint-plugin-react": "7.23.2", "expose-loader": "2.0.0", - "mini-css-extract-plugin": "1.6.0", "file-loader": "6.2.0", "glob": "7.1.6", "immutability-helper": "3.1.1", "imports-loader": "2.0.0", "jquery": "3.3.1", "jsdom": "11.1.0", + "mini-css-extract-plugin": "1.6.0", "mocha": "3.4.2", "moment": "2.19.1", "node-sass": "6.0.0", "nvd3": "1.8.6", "optimize-css-assets-webpack-plugin": "5.0.4", - "popper.js":"1.14.3", + "popper.js": "1.14.3", "prop-types": "15.7.2", - "react": "16.14.0", + "react-bootstrap": "1.5.2", "react-dom": "16.14.0", - "react-test-renderer": "16.14.0", - + "react-dropdown-select": "^4.7.4", "react-nvd3": "0.5.7", - + "react-redux": "7.2.4", "react-table-6": "6.11.0", - "react-bootstrap": "1.5.2", - + "react-test-renderer": "16.14.0", "redux": "4.1.0", - "react-redux": "7.2.4", "redux-actions": "2.6.5", "redux-thunk": "2.3.0", - "resolve-url-loader": "4.0.0", "sass-loader": "11.1.1", "sinon": "10.0.0", diff --git a/frontend/src/components/DataCard/index.jsx b/frontend/src/components/DataCard/index.jsx index 0bbe60dd..0b501f49 100644 --- a/frontend/src/components/DataCard/index.jsx +++ b/frontend/src/components/DataCard/index.jsx @@ -7,6 +7,7 @@ import { Tooltip, OverlayTrigger } from "react-bootstrap"; +import Select from "react-dropdown-select"; const ADMIN = window.ADMIN; @@ -24,6 +25,8 @@ class DataCard extends React.Component { let card; const { labels, message, cards, passCard, annotateCard } = this.props; + let labelsOptions = labels.map(label => Object.assign(label, { value: label["pk"] })); + if (!(cards === undefined) && cards.length > 0) { //just get the labels from the cards card = ( @@ -32,22 +35,43 @@ class DataCard extends React.Component {

Card {cards[0].id + 1}

{cards[0].text["text"]}

- {labels.map(opt => ( -