diff --git a/src/panel/components/EvaluationsPanel.spec.tsx b/src/panel/components/EvaluationsPanel.spec.tsx
index efa801d..3708a9f 100644
--- a/src/panel/components/EvaluationsPanel.spec.tsx
+++ b/src/panel/components/EvaluationsPanel.spec.tsx
@@ -1,8 +1,9 @@
import React from "react";
import { shallow } from "enzyme";
-import { Button } from "@blueprintjs/core";
+import { Button, InputGroup } from "@blueprintjs/core";
import { EvaluationsPanel } from "./EvaluationsPanel";
import { useEvaluationsContext } from "../libs/EvaluationsContext";
+import { PropItem } from "./PropList";
jest.mock("../libs/EvaluationsContext");
const setEvaluations = jest.fn();
@@ -17,6 +18,15 @@ const setEvaluations = jest.fn();
},
},
},
+ {
+ raw: "<% DATA.quality %>",
+ result: "better",
+ context: {
+ EVENT: {
+ detail: "better",
+ },
+ },
+ },
],
setEvaluations,
});
@@ -28,12 +38,25 @@ describe("EvaluationsPanel", () => {
it("should work", () => {
const wrapper = shallow();
- expect(wrapper.find("tbody").find("tr").length).toBe(1);
+ expect(wrapper.find("tbody").find("tr").length).toBe(2);
});
it("should handle clear", () => {
const wrapper = shallow();
wrapper.find(Button).invoke("onClick")(null);
- expect(setEvaluations).toBeCalled();
+ expect(setEvaluations).toBeCalledWith([]);
+ });
+
+ it("should handle filter", () => {
+ const wrapper = shallow();
+ wrapper.find(InputGroup).invoke("onChange")({
+ target: {
+ value: "detail",
+ },
+ } as any);
+ expect(wrapper.find("tbody").find("tr").length).toBe(1);
+ expect(wrapper.find(PropItem).at(0).prop("propValue")).toBe(
+ "<% EVENT.detail %>"
+ );
});
});
diff --git a/src/panel/components/EvaluationsPanel.tsx b/src/panel/components/EvaluationsPanel.tsx
index ddd97a8..6d237cb 100644
--- a/src/panel/components/EvaluationsPanel.tsx
+++ b/src/panel/components/EvaluationsPanel.tsx
@@ -1,20 +1,45 @@
import React from "react";
-import { Button, Tooltip, ButtonGroup } from "@blueprintjs/core";
+import { Button, Tooltip, ButtonGroup, InputGroup } from "@blueprintjs/core";
import { PanelSelector } from "./PanelSelector";
import { useEvaluationsContext } from "../libs/EvaluationsContext";
import { PropList, PropItem } from "./PropList";
export function EvaluationsPanel(): React.ReactElement {
const { evaluations, setEvaluations } = useEvaluationsContext();
+ const [q, setQ] = React.useState();
const handleClear = React.useCallback(() => {
setEvaluations([]);
}, [setEvaluations]);
+ const handleFilterChange = React.useCallback(
+ (event: React.ChangeEvent) => {
+ setQ(event.target.value);
+ },
+ []
+ );
+
+ const filteredEvaluations = React.useMemo(() => {
+ if (!q) {
+ return evaluations;
+ }
+ return evaluations.filter((item) =>
+ item.raw.toLocaleLowerCase().includes(q.toLocaleLowerCase())
+ );
+ }, [evaluations, q]);
+
return (
-
+
@@ -32,7 +57,7 @@ export function EvaluationsPanel(): React.ReactElement {
- {evaluations.map((item, key) => (
+ {filteredEvaluations.map((item, key) => (
|