From 986750f91960c87a61c3f8176d6a2a0b96d2c9dd Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Thu, 8 Jul 2021 10:13:41 -0600 Subject: [PATCH 1/8] added checkboxes to table component --- viz-lib/src/visualizations/table/Renderer.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index 3812e82b82..dfc6e8bc8f 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -116,9 +116,16 @@ export default function Renderer({ options, data }: any) { return null; } + const rowSelection = { + onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { + console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); + }, + }; + return (
Date: Thu, 8 Jul 2021 19:04:22 -0600 Subject: [PATCH 2/8] addded prepareData but still troubleshooting funcctionality --- viz-lib/src/visualizations/table/Renderer.tsx | 43 ++++++++++++++++++- .../src/visualizations/table/columns/link.tsx | 1 + 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index dfc6e8bc8f..c1fd66d53b 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -1,10 +1,11 @@ -import { filter, map, get, initial, last, reduce } from "lodash"; +import { filter, map, get, initial, last, reduce, extend, trim } from "lodash"; import React, { useMemo, useState, useEffect } from "react"; import Table from "antd/lib/table"; import Input from "antd/lib/input"; import InfoCircleFilledIcon from "@ant-design/icons/InfoCircleFilled"; import Popover from "antd/lib/popover"; import { RendererPropTypes } from "@/visualizations/prop-types"; +import { formatSimpleTemplate } from "@/lib/value-format"; import { prepareColumns, initRows, filterRows, sortRows } from "./utils"; @@ -84,6 +85,10 @@ export default function Renderer({ options, data }: any) { const [searchTerm, setSearchTerm] = useState(""); const [orderBy, setOrderBy] = useState([]); + console.log("options: ", options); + + console.log("data: ", data); + const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]); const tableColumns = useMemo(() => { @@ -116,9 +121,45 @@ export default function Renderer({ options, data }: any) { return null; } + function prepareData(row: any, { column }: any) { + row = extend({ "@": row["cell_id"] }, row); + + console.log("prepare row: ", row); + + const href = trim(formatSimpleTemplate(column.linkUrlTemplate, row)); + if (href === "") { + return {}; + } + + const title = trim(formatSimpleTemplate(column.linkTitleTemplate, row)); + const text = trim(formatSimpleTemplate(column.linkTextTemplate, row)); + + const result = { + href, + text: text !== "" ? text : href, + }; + + if (title !== "") { + // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type '{ href: s... Remove this comment to see the full error message + result.title = title; + } + if (column.linkOpenInNewTab) { + // @ts-expect-error ts-migrate(2339) FIXME: Property 'target' does not exist on type '{ href: ... Remove this comment to see the full error message + result.target = "_blank"; + } + + console.log("prepare result: ", result); + + return result; + } + const rowSelection = { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); + selectedRows.forEach(row => { + // prepareData(row); + console.log("row: ", row.record.cell_id); + }); }, }; diff --git a/viz-lib/src/visualizations/table/columns/link.tsx b/viz-lib/src/visualizations/table/columns/link.tsx index 209fd97707..b4ac28e5b3 100644 --- a/viz-lib/src/visualizations/table/columns/link.tsx +++ b/viz-lib/src/visualizations/table/columns/link.tsx @@ -111,6 +111,7 @@ export default function initLinkColumn(column: any) { } function LinkColumn({ row }: any) { + console.log("link column: ", row); // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type '{}'. // eslint-disable-line react/prop-types const { text, ...props } = prepareData(row); From 4e79939e3b7a9fb9e05327b33c81a7fd12a74ff9 Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Fri, 9 Jul 2021 10:51:10 -0600 Subject: [PATCH 3/8] prepare data is preparing props for link to new dashboard but by single value still --- viz-lib/src/visualizations/table/Renderer.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index c1fd66d53b..02409c09c3 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -1,4 +1,4 @@ -import { filter, map, get, initial, last, reduce, extend, trim } from "lodash"; +import { filter, map, get, initial, last, reduce, extend, trim, result } from "lodash"; import React, { useMemo, useState, useEffect } from "react"; import Table from "antd/lib/table"; import Input from "antd/lib/input"; @@ -85,10 +85,6 @@ export default function Renderer({ options, data }: any) { const [searchTerm, setSearchTerm] = useState(""); const [orderBy, setOrderBy] = useState([]); - console.log("options: ", options); - - console.log("data: ", data); - const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]); const tableColumns = useMemo(() => { @@ -121,10 +117,16 @@ export default function Renderer({ options, data }: any) { return null; } - function prepareData(row: any, { column }: any) { - row = extend({ "@": row["cell_id"] }, row); + function prepareData(row: any) { + let column: any = {}; - console.log("prepare row: ", row); + options.columns.forEach((newColumn: any) => { + if (newColumn.name === "cell_id") { + console.log("cell id column: ", newColumn); + column = newColumn; + } + }); + row = extend({ "@": row[column.name] }, row); const href = trim(formatSimpleTemplate(column.linkUrlTemplate, row)); if (href === "") { @@ -147,8 +149,7 @@ export default function Renderer({ options, data }: any) { // @ts-expect-error ts-migrate(2339) FIXME: Property 'target' does not exist on type '{ href: ... Remove this comment to see the full error message result.target = "_blank"; } - - console.log("prepare result: ", result); + console.log("prepare data result: ", result); return result; } @@ -157,8 +158,7 @@ export default function Renderer({ options, data }: any) { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); selectedRows.forEach(row => { - // prepareData(row); - console.log("row: ", row.record.cell_id); + prepareData(row.record); }); }, }; From 6ace415a9e23ad0d67cd902b80a7171c7d9b098e Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Fri, 9 Jul 2021 11:24:05 -0600 Subject: [PATCH 4/8] added link to dashboard from selected object --- viz-lib/src/visualizations/table/Renderer.tsx | 15 +++++++++++++-- viz-lib/src/visualizations/table/columns/link.tsx | 1 - 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index 02409c09c3..e538e08a05 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -1,4 +1,4 @@ -import { filter, map, get, initial, last, reduce, extend, trim, result } from "lodash"; +import { filter, map, get, initial, last, reduce, extend, trim } from "lodash"; import React, { useMemo, useState, useEffect } from "react"; import Table from "antd/lib/table"; import Input from "antd/lib/input"; @@ -84,6 +84,7 @@ SearchInput.defaultProps = { export default function Renderer({ options, data }: any) { const [searchTerm, setSearchTerm] = useState(""); const [orderBy, setOrderBy] = useState([]); + const [selectedRows, setSelectedRows] = useState({}); const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]); @@ -154,15 +155,24 @@ export default function Renderer({ options, data }: any) { return result; } + // function Link({ row }: any) { + // // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type '{}'. + // // eslint-disable-line react/prop-types + // const { text, ...props } = prepareData(row); + // return link to dashboard; + // } + const rowSelection = { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); selectedRows.forEach(row => { - prepareData(row.record); + setSelectedRows(row.record); }); }, }; + const { ...props } = prepareData(selectedRows); + return (
+ Link to chart ); } diff --git a/viz-lib/src/visualizations/table/columns/link.tsx b/viz-lib/src/visualizations/table/columns/link.tsx index b4ac28e5b3..209fd97707 100644 --- a/viz-lib/src/visualizations/table/columns/link.tsx +++ b/viz-lib/src/visualizations/table/columns/link.tsx @@ -111,7 +111,6 @@ export default function initLinkColumn(column: any) { } function LinkColumn({ row }: any) { - console.log("link column: ", row); // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type '{}'. // eslint-disable-line react/prop-types const { text, ...props } = prepareData(row); From 4de6575361422581bdc591ef544d28529562a21f Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Fri, 9 Jul 2021 16:29:23 -0600 Subject: [PATCH 5/8] removed some redundant console logs --- viz-lib/src/visualizations/table/Renderer.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index e538e08a05..61487b9a8b 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -84,7 +84,7 @@ SearchInput.defaultProps = { export default function Renderer({ options, data }: any) { const [searchTerm, setSearchTerm] = useState(""); const [orderBy, setOrderBy] = useState([]); - const [selectedRows, setSelectedRows] = useState({}); + const [selectedRows, setSelectedRows] = useState({}); const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]); @@ -123,12 +123,13 @@ export default function Renderer({ options, data }: any) { options.columns.forEach((newColumn: any) => { if (newColumn.name === "cell_id") { - console.log("cell id column: ", newColumn); column = newColumn; } }); row = extend({ "@": row[column.name] }, row); + console.log("preparing row: ", row); + const href = trim(formatSimpleTemplate(column.linkUrlTemplate, row)); if (href === "") { return {}; @@ -155,13 +156,6 @@ export default function Renderer({ options, data }: any) { return result; } - // function Link({ row }: any) { - // // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type '{}'. - // // eslint-disable-line react/prop-types - // const { text, ...props } = prepareData(row); - // return link to dashboard; - // } - const rowSelection = { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); @@ -171,6 +165,8 @@ export default function Renderer({ options, data }: any) { }, }; + console.log("selected rows: ", selectedRows); + const { ...props } = prepareData(selectedRows); return ( From 31e0b52161aa67c83175cb4ec334c54077709e5b Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Mon, 12 Jul 2021 10:15:26 -0600 Subject: [PATCH 6/8] adjusted prepareData function to work with an array of data objects based on selection --- viz-lib/src/visualizations/table/Renderer.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index 61487b9a8b..42baad4264 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -84,7 +84,7 @@ SearchInput.defaultProps = { export default function Renderer({ options, data }: any) { const [searchTerm, setSearchTerm] = useState(""); const [orderBy, setOrderBy] = useState([]); - const [selectedRows, setSelectedRows] = useState({}); + const [selectedData, setSelectedData] = useState([]); const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]); @@ -118,17 +118,19 @@ export default function Renderer({ options, data }: any) { return null; } - function prepareData(row: any) { + function prepareData(rows: any) { let column: any = {}; + let row = { rows: rows }; options.columns.forEach((newColumn: any) => { if (newColumn.name === "cell_id") { column = newColumn; } }); - row = extend({ "@": row[column.name] }, row); - console.log("preparing row: ", row); + // TODO: We might want to create an object with the array of rows being the selection made and iterate over it to get the name of each row and extend as @ in the object + row = extend({ "@": row.rows.map((rows: any) => rows[column.name]) }, row); + console.log("prepared row: ", row); const href = trim(formatSimpleTemplate(column.linkUrlTemplate, row)); if (href === "") { @@ -159,15 +161,13 @@ export default function Renderer({ options, data }: any) { const rowSelection = { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); - selectedRows.forEach(row => { - setSelectedRows(row.record); - }); + setSelectedData([...selectedRows.map(row => row.record)]); }, }; - console.log("selected rows: ", selectedRows); + console.log("selected rows: ", selectedData); - const { ...props } = prepareData(selectedRows); + const { ...props } = prepareData(selectedData); return (
From 6061237a9b62462e7578cc7b15acaf213534b33f Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Mon, 12 Jul 2021 16:42:12 -0600 Subject: [PATCH 7/8] added functionality to pass in multiple values to the plot dashboard --- viz-lib/src/lib/value-format.tsx | 2 +- viz-lib/src/visualizations/table/Renderer.tsx | 16 ++++++---------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/viz-lib/src/lib/value-format.tsx b/viz-lib/src/lib/value-format.tsx index 96693d2d3b..fde7758f87 100644 --- a/viz-lib/src/lib/value-format.tsx +++ b/viz-lib/src/lib/value-format.tsx @@ -90,7 +90,7 @@ export function formatSimpleTemplate(str: any, data: any) { } return str.replace(/{{\s*([^\s]+?)\s*}}/g, (match, prop) => { if (hasOwnProperty.call(data, prop) && !isUndefined(data[prop])) { - return data[prop]; + return typeof data[prop] === "string" ? data[prop] : JSON.stringify(data[prop]); } return match; }); diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index 42baad4264..bcf3441e5f 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -120,25 +120,23 @@ export default function Renderer({ options, data }: any) { function prepareData(rows: any) { let column: any = {}; - let row = { rows: rows }; + let prepared = { rows: rows }; options.columns.forEach((newColumn: any) => { - if (newColumn.name === "cell_id") { + if (newColumn.linkUrlTemplate !== "{{ @ }}") { column = newColumn; } }); - // TODO: We might want to create an object with the array of rows being the selection made and iterate over it to get the name of each row and extend as @ in the object - row = extend({ "@": row.rows.map((rows: any) => rows[column.name]) }, row); - console.log("prepared row: ", row); + prepared = extend({ "@": prepared.rows.map((rows: any) => rows[column.name]) }, prepared); - const href = trim(formatSimpleTemplate(column.linkUrlTemplate, row)); + const href = trim(formatSimpleTemplate(column.linkUrlTemplate, prepared)); if (href === "") { return {}; } - const title = trim(formatSimpleTemplate(column.linkTitleTemplate, row)); - const text = trim(formatSimpleTemplate(column.linkTextTemplate, row)); + const title = trim(formatSimpleTemplate(column.linkTitleTemplate, prepared)); + const text = trim(formatSimpleTemplate(column.linkTextTemplate, prepared)); const result = { href, @@ -153,14 +151,12 @@ export default function Renderer({ options, data }: any) { // @ts-expect-error ts-migrate(2339) FIXME: Property 'target' does not exist on type '{ href: ... Remove this comment to see the full error message result.target = "_blank"; } - console.log("prepare data result: ", result); return result; } const rowSelection = { onChange: (selectedRowKeys: Record, selectedRows: Record[]) => { - console.log(`selected keys: ${selectedRowKeys}`, "selected row: ", selectedRows); setSelectedData([...selectedRows.map(row => row.record)]); }, }; From 7833ae97a6a974a8172e8d1838e1bd95b3a501f8 Mon Sep 17 00:00:00 2001 From: Gino Villalpando Date: Mon, 12 Jul 2021 16:43:29 -0600 Subject: [PATCH 8/8] removed redundant console log --- viz-lib/src/visualizations/table/Renderer.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx index bcf3441e5f..aef1c2ddbe 100644 --- a/viz-lib/src/visualizations/table/Renderer.tsx +++ b/viz-lib/src/visualizations/table/Renderer.tsx @@ -161,8 +161,6 @@ export default function Renderer({ options, data }: any) { }, }; - console.log("selected rows: ", selectedData); - const { ...props } = prepareData(selectedData); return (