1-col2 @@ -209,12 +232,7 @@ Array [ } > @@ -249,12 +267,7 @@ Array [ } > 2-col1 @@ -280,12 +293,7 @@ Array [ } > 2-col2 @@ -311,12 +319,7 @@ Array [ } > 2-col3 @@ -347,12 +350,7 @@ Array [ } > 3-col1 @@ -378,12 +376,7 @@ Array [ } > 3-col2 @@ -409,12 +402,7 @@ Array [ } > void; + isPending?: boolean; + reload?: () => void; }; type Props = { @@ -54,7 +54,7 @@ function showStatus(visible: boolean, status?: Status): ReactNode { An unknown error has occurred. )} - + Reload diff --git a/ui/src/components/treegrid.test.tsx b/ui/src/components/treegrid.test.tsx index ab2e3d6b9..581eed393 100644 --- a/ui/src/components/treegrid.test.tsx +++ b/ui/src/components/treegrid.test.tsx @@ -1,8 +1,8 @@ import AccountTreeIcon from "@mui/icons-material/AccountTree"; import CheckBoxIcon from "@mui/icons-material/CheckBox"; import IconButton from "@mui/material/IconButton"; -import renderer from "react-test-renderer"; import { TreeGrid, TreeGridData, TreeGridId } from "components/treegrid"; +import renderer from "react-test-renderer"; test("Table renders correctly", () => { const columns = [ diff --git a/ui/src/components/treegrid.tsx b/ui/src/components/treegrid.tsx index 3859651e6..fe1b52e17 100644 --- a/ui/src/components/treegrid.tsx +++ b/ui/src/components/treegrid.tsx @@ -34,6 +34,8 @@ export type TreeGridProps = { defaultExpanded?: TreeGridId[]; prefixElements?: (id: TreeGridId, data: TreeGridRowData) => ReactNode; loadChildren?: (id: TreeGridId) => Promise; + variableWidth?: boolean; + wrapBodyText?: boolean; }; export function TreeGrid(props: TreeGridProps) { @@ -106,7 +108,7 @@ export function TreeGrid(props: TreeGridProps) { - {col.title} + + + {col.title} + + ))} @@ -135,7 +153,7 @@ export function TreeGrid(props: TreeGridProps) { diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index c470cc5a4..ba2d84261 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -1,71 +1,80 @@ import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { EntityInstancesApiContext } from "apiContext"; -import { createCriteria, getCriteriaPlugin, GroupKind } from "cohort"; +import { createCriteria, GroupKind } from "cohort"; import { insertCohort, insertGroup } from "cohortsSlice"; import "criteria/concept"; import { Provider } from "react-redux"; import { StaticRouter } from "react-router-dom"; import { AppRouter } from "router"; import { store } from "store"; +import * as tanagra from "tanagra-api"; import { setUnderlays } from "underlaysSlice"; -import * as tanagra from "./tanagra-api"; - -test.each([ - [ - "source", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, - concept_id: { - int64Val: 1234, - }, - domain_id: { - int64Val: 5678, - }, - standard_concept: null, +import { Data } from "./concept"; + +// The Typescript compiler can't map the different parameters of the test cases +// to a single type without actually having a type defined. +type TestCase = { + name: string; + instance: { [key: string]: tanagra.AttributeValue | null }; + matches?: string[]; + notMatches?: string[]; +}; + +const testCases: TestCase[] = [ + { + name: "source", + instance: { + concept_name: { + stringVal: "test-concept", }, - matches: ["test-concept", "1234", "Source"], + concept_id: { + int64Val: 1234, + }, + domain_id: { + int64Val: 5678, + }, + standard_concept: null, }, - ], - [ - "standard", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, - concept_id: { - int64Val: 1234, - }, - standard_concept: { - stringVal: "S", - }, + matches: ["test-concept", "1234", "Source"], + }, + { + name: "standard", + instance: { + concept_name: { + stringVal: "test-concept", + }, + concept_id: { + int64Val: 1234, + }, + standard_concept: { + stringVal: "S", }, - matches: ["test-concept", "1234", "Standard"], }, - ], - [ - "missing concept_id", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, + matches: ["test-concept", "1234", "Standard"], + }, + { + name: "missing concept_id", + instance: { + concept_name: { + stringVal: "test-concept", }, - notMatches: ["test-concept"], }, - ], -])("%s", async (name, { instance, matches, notMatches }) => { - await renderCriteria([instance]); - - matches?.forEach((match) => screen.getByText(match)); - notMatches?.forEach((match) => { - expect(screen.queryByText(match)).not.toBeInTheDocument(); - }); -}); + notMatches: ["test-concept"], + }, +]; + +test.each(testCases)( + "$name", + async ({ instance, matches = [], notMatches = [] }) => { + await renderCriteria([instance]); + + matches?.forEach((match) => screen.getByText(match)); + notMatches?.forEach((match) => { + expect(screen.queryByText(match)).not.toBeInTheDocument(); + }); + } +); test("selection", async () => { const { getCriteria, rerender } = await renderCriteria([ @@ -84,9 +93,10 @@ test("selection", async () => { const checkboxes = screen.getAllByRole("checkbox"); expect(checkboxes.length).toBe(2); - expect(getCriteria().data.selected.length).toBe(0); + const getData = () => getCriteria().data as Data; + expect(getData().selected.length).toBe(0); - const getSelected = () => getCriteria().data.selected.map((row) => row.id); + const getSelected = () => getData().selected.map((row) => row.id); // Use act explicitly because DataGrid has a focus update that occurs after // the event (i.e. outside of act) which causes a warning. @@ -113,12 +123,16 @@ beforeAll(() => { setUnderlays([ { name: "test-underlay", + primaryEntity: "test-entity", + entities: [], + criteriaConfigs: [], + prepackagedConceptSets: [], }, ]) ); const action = store.dispatch( - insertCohort("test-cohort", "test-underlay", "test-entity", []) + insertCohort("test-cohort", "test-underlay", ["test-entity"]) ); store.dispatch( insertGroup( @@ -146,7 +160,7 @@ beforeAll(() => { }); async function renderCriteria( - instances: Array<{ [key: string]: tanagra.AttributeValue }> + instances: Array<{ [key: string]: tanagra.AttributeValue | null }> ) { const getCriteria = () => store.getState().cohorts[0].groups[0].criteria[0]; @@ -158,6 +172,7 @@ async function renderCriteria( }); }); }, + generateDatasetSqlQuery: jest.fn(), }; const cohort = store.getState().cohorts[0]; @@ -170,9 +185,7 @@ async function renderCriteria( - - {getCriteriaPlugin(getCriteria()).renderEdit(jest.fn())} - + diff --git a/ui/src/criteria/concept.tsx b/ui/src/criteria/concept.tsx index a96859d98..b09db61bf 100644 --- a/ui/src/criteria/concept.tsx +++ b/ui/src/criteria/concept.tsx @@ -21,6 +21,7 @@ import produce from "immer"; import React, { useCallback, useContext, useMemo, useState } from "react"; import * as tanagra from "tanagra-api"; import { useImmer } from "use-immer"; +import { isValid } from "util/valid"; type Selection = { entity: string; @@ -54,7 +55,8 @@ interface Config extends CriteriaConfig { entities: EntityConfig[]; } -interface Data extends Config { +// Exported for testing purposes. +export interface Data extends Config { selected: Selection[]; } @@ -426,10 +428,6 @@ function ConceptEdit(props: ConceptEditProps) { ); } -function isValid(arg: Type) { - return arg !== null && typeof arg !== "undefined"; -} - function findEntity( entities: EntityConfig[], rowData?: TreeGridRowData, diff --git a/ui/src/datasets.tsx b/ui/src/datasets.tsx index 91309c3cc..698ea6bbd 100644 --- a/ui/src/datasets.tsx +++ b/ui/src/datasets.tsx @@ -1,6 +1,5 @@ import AddIcon from "@mui/icons-material/Add"; import EditIcon from "@mui/icons-material/Edit"; -import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; @@ -12,6 +11,7 @@ import Link from "@mui/material/Link"; import MenuItem from "@mui/material/MenuItem"; import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; +import Switch from "@mui/material/Switch"; import Tab from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; import TextField from "@mui/material/TextField"; @@ -28,7 +28,7 @@ import { insertCohort } from "cohortsSlice"; import Checkbox from "components/checkbox"; import Loading from "components/loading"; import { useMenu } from "components/menu"; -import { TreeGridData } from "components/treegrid"; +import { TreeGrid, TreeGridData, TreeGridRowData } from "components/treegrid"; import { insertConceptSet } from "conceptSetsSlice"; import { useAsyncWithApi } from "errors"; import { useAppDispatch, useAppSelector, useUnderlay } from "hooks"; @@ -44,6 +44,7 @@ import { Link as RouterLink, useHistory } from "react-router-dom"; import { createUrl } from "router"; import * as tanagra from "tanagra-api"; import { useImmer } from "use-immer"; +import { isValid } from "util/valid"; export function Datasets() { const dispatch = useAppDispatch(); @@ -57,6 +58,11 @@ export function Datasets() { const [selectedConceptSets, updateSelectedConceptSets] = useImmer( new Set() ); + const [excludedAttributes, updateExcludedAttributes] = useImmer( + new Map>() + ); + + const conceptSetEntities = useConceptSetEntities(selectedConceptSets); const [dialog, showNewCohort] = useNewCohortDialog({ callback: (name: string) => { @@ -163,7 +169,10 @@ export function Datasets() { {dialog} - + {cohorts .filter((cohort) => cohort.underlayName === underlay.name) .map((cohort) => ( @@ -203,7 +212,10 @@ export function Datasets() { {menu} - + Prepackaged {listConceptSets(false, underlay.prepackagedConceptSets)} Workspace @@ -223,7 +235,39 @@ export function Datasets() { 3. Values (Columns) - {/* TODO(tjennison): Implement attribute selection. */} + + {conceptSetEntities.map((entity) => ( + <> + {entity.name} + {entity.attributes.map((attribute) => ( + + + updateExcludedAttributes((selection) => { + const attributes = selection?.get(entity.name); + if (attributes?.has(attribute)) { + attributes?.delete(attribute); + } else { + attributes?.add(attribute); + } + }) + } + /> + {attribute} + + ))} + + ))} + @@ -231,6 +275,7 @@ export function Datasets() { ) : ( @@ -306,9 +351,65 @@ function useNewCohortDialog( ]; } +type ConceptSetEntity = { + name: string; + attributes: string[]; + filters: tanagra.Filter[]; +}; + +function useConceptSetEntities( + selectedConceptSets: Set +): ConceptSetEntity[] { + const underlay = useUnderlay(); + + const entities = new Map(); + const addFilter = (entity: string, filter?: tanagra.Filter | null) => { + if (!entities.has(entity)) { + entities.set(entity, []); + } + if (filter) { + entities.get(entity)?.push(filter); + } + }; + + underlay.prepackagedConceptSets.forEach((conceptSet) => { + if (selectedConceptSets.has(conceptSet.id)) { + addFilter(conceptSet.entity, conceptSet.filter); + } + }); + + const workspaceConceptSets = useAppSelector((state) => + state.conceptSets.filter((cs) => selectedConceptSets.has(cs.id)) + ); + workspaceConceptSets.forEach((conceptSet) => { + const plugin = getCriteriaPlugin(conceptSet.criteria); + if (plugin.occurrenceEntities().length != 1) { + throw new Error("Only one entity per concept set is supported."); + } + + const entity = plugin.occurrenceEntities()[0]; + addFilter(entity, plugin.generateFilter(entity, true)); + }); + + return Array.from(entities) + .sort() + .map(([entityName, filters]) => { + const attributes = underlay.entities + .find((entity) => entity.name === entityName) + ?.attributes?.map((attribute) => attribute.name || "unknown") + ?.filter((attribute) => !attribute.startsWith("t_")); + return { + name: entityName, + attributes: attributes || [], + filters, + }; + }); +} + type PreviewProps = { selectedCohorts: Set; selectedConceptSets: Set; + conceptSetEntities: ConceptSetEntity[]; }; function Preview(props: PreviewProps) { @@ -316,43 +417,15 @@ function Preview(props: PreviewProps) { const cohorts = useAppSelector((state) => state.cohorts.filter((cohort) => props.selectedCohorts.has(cohort.id)) ); - const workspaceConceptSets = useAppSelector((state) => - state.conceptSets.filter((cs) => props.selectedConceptSets.has(cs.id)) - ); const api = useContext(EntityInstancesApiContext); const [tab, setTab] = useState(0); + const [queriesMode, setQueriesMode] = useState(false); const tabDataState = useAsyncWithApi( useCallback(async () => { - const entities = new Map(); - const addFilter = (entity: string, filter?: tanagra.Filter | null) => { - if (!entities.has(entity)) { - entities.set(entity, []); - } - if (filter) { - entities.get(entity)?.push(filter); - } - }; - - underlay.prepackagedConceptSets.forEach((conceptSet) => { - if (props.selectedConceptSets.has(conceptSet.id)) { - addFilter(conceptSet.entity, conceptSet.filter); - } - }); - - workspaceConceptSets.forEach((conceptSet) => { - const plugin = getCriteriaPlugin(conceptSet.criteria); - if (plugin.occurrenceEntities().length != 1) { - throw new Error("Only one entity per concept set is supported."); - } - - const entity = plugin.occurrenceEntities()[0]; - addFilter(entity, plugin.generateFilter(entity, true)); - }); - return Promise.all( - Array.from(entities).map(async ([entity, filters]) => { + props.conceptSetEntities.map(async (entity) => { let filter: tanagra.Filter = { arrayFilter: { operands: cohorts @@ -364,25 +437,25 @@ function Preview(props: PreviewProps) { }, }; - if (entity !== underlay.primaryEntity) { + if (entity.name !== underlay.primaryEntity) { filter = { arrayFilter: { operator: tanagra.ArrayFilterOperator.And, operands: [ { relationshipFilter: { - outerVariable: entity, + outerVariable: entity.name, newVariable: underlay.primaryEntity, newEntity: underlay.primaryEntity, filter: filter, }, }, - ...(filters.length > 0 + ...(entity.filters.length > 0 ? [ { arrayFilter: { operator: tanagra.ArrayFilterOperator.Or, - operands: filters, + operands: entity.filters, }, }, ] @@ -392,27 +465,16 @@ function Preview(props: PreviewProps) { }; } - const attributes = underlay.entities - .find((e) => e.name === entity) - ?.attributes?.map((attribute) => attribute.name) - .filter( - (attribute): attribute is string => - !!attribute && !attribute.startsWith("t_") - ); - if (!attributes) { - throw new Error(`No attributes for "${entity}"`); - } - const entityDataset = { - entityVariable: entity, - selectedAttributes: attributes, + entityVariable: entity.name, + selectedAttributes: entity.attributes, filter: filter, }; const dataParts = await Promise.all([ (async () => { const res = await api.generateDatasetSqlQuery({ - entityName: entity, + entityName: entity.name, underlayName: underlay.name, generateDatasetSqlQueryRequest: { entityDataset, @@ -425,13 +487,40 @@ function Preview(props: PreviewProps) { return res.query; })(), (async () => { - // TODO(tjennison): Fetch entity instances and refactor processing - // code from criteria/concept. - return {}; + const res = await api.searchEntityInstances({ + entityName: entity.name, + underlayName: underlay.name, + searchEntityInstancesRequest: { + entityDataset, + }, + }); + + const data: TreeGridData = { + root: { data: {}, children: [] }, + }; + res?.instances?.slice(0, 100)?.forEach((instance, i) => { + const row: TreeGridRowData = {}; + for (const k in instance) { + const v = instance[k]; + if (!v) { + row[k] = ""; + } else if (isValid(v.int64Val)) { + row[k] = v.int64Val; + } else if (isValid(v.boolVal)) { + row[k] = v.boolVal; + } else { + row[k] = v.stringVal; + } + } + + data[i] = { data: row }; + data.root?.children?.push(i); + }); + return data; })(), ]); return { - entity, + entity: entity.name, sql: dataParts[0], data: dataParts[1], }; @@ -440,23 +529,56 @@ function Preview(props: PreviewProps) { }, [props.selectedCohorts, props.selectedConceptSets]) ); - const handleChange = (event: SyntheticEvent, newValue: number) => { + const onTabChange = (event: SyntheticEvent, newValue: number) => { setTab(newValue); }; + const onQueriesModeChange = (event: React.ChangeEvent) => { + setQueriesMode(event.target.checked); + }; + return ( <> - - + + {tabDataState.data?.map((data) => ( ))} - - - {tabDataState.data?.[tab]?.sql} - + Data + + Queries + + {queriesMode ? ( + + {tabDataState.data?.[tab]?.sql} + + ) : tabDataState.data?.[tab]?.data ? ( + + ({ + key: attribute, + width: 120, + title: attribute, + }) + )} + variableWidth + wrapBodyText + /> + + ) : undefined} ); diff --git a/ui/src/util/valid.tsx b/ui/src/util/valid.tsx new file mode 100644 index 000000000..a8465fcfe --- /dev/null +++ b/ui/src/util/valid.tsx @@ -0,0 +1,3 @@ +export function isValid(arg: Type) { + return arg !== null && typeof arg !== "undefined"; +}
1-col2 @@ -209,12 +232,7 @@ Array [ } >
@@ -249,12 +267,7 @@ Array [ } >
2-col1 @@ -280,12 +293,7 @@ Array [ } >
2-col2 @@ -311,12 +319,7 @@ Array [ } >
2-col3 @@ -347,12 +350,7 @@ Array [ } >
3-col1 @@ -378,12 +376,7 @@ Array [ } >
3-col2 @@ -409,12 +402,7 @@ Array [ } >
void; + isPending?: boolean; + reload?: () => void; }; type Props = { @@ -54,7 +54,7 @@ function showStatus(visible: boolean, status?: Status): ReactNode { An unknown error has occurred. )} - + Reload diff --git a/ui/src/components/treegrid.test.tsx b/ui/src/components/treegrid.test.tsx index ab2e3d6b9..581eed393 100644 --- a/ui/src/components/treegrid.test.tsx +++ b/ui/src/components/treegrid.test.tsx @@ -1,8 +1,8 @@ import AccountTreeIcon from "@mui/icons-material/AccountTree"; import CheckBoxIcon from "@mui/icons-material/CheckBox"; import IconButton from "@mui/material/IconButton"; -import renderer from "react-test-renderer"; import { TreeGrid, TreeGridData, TreeGridId } from "components/treegrid"; +import renderer from "react-test-renderer"; test("Table renders correctly", () => { const columns = [ diff --git a/ui/src/components/treegrid.tsx b/ui/src/components/treegrid.tsx index 3859651e6..fe1b52e17 100644 --- a/ui/src/components/treegrid.tsx +++ b/ui/src/components/treegrid.tsx @@ -34,6 +34,8 @@ export type TreeGridProps = { defaultExpanded?: TreeGridId[]; prefixElements?: (id: TreeGridId, data: TreeGridRowData) => ReactNode; loadChildren?: (id: TreeGridId) => Promise; + variableWidth?: boolean; + wrapBodyText?: boolean; }; export function TreeGrid(props: TreeGridProps) { @@ -106,7 +108,7 @@ export function TreeGrid(props: TreeGridProps) { - {col.title} + + + {col.title} + + ))} @@ -135,7 +153,7 @@ export function TreeGrid(props: TreeGridProps) { diff --git a/ui/src/criteria/concept.test.tsx b/ui/src/criteria/concept.test.tsx index c470cc5a4..ba2d84261 100644 --- a/ui/src/criteria/concept.test.tsx +++ b/ui/src/criteria/concept.test.tsx @@ -1,71 +1,80 @@ import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { EntityInstancesApiContext } from "apiContext"; -import { createCriteria, getCriteriaPlugin, GroupKind } from "cohort"; +import { createCriteria, GroupKind } from "cohort"; import { insertCohort, insertGroup } from "cohortsSlice"; import "criteria/concept"; import { Provider } from "react-redux"; import { StaticRouter } from "react-router-dom"; import { AppRouter } from "router"; import { store } from "store"; +import * as tanagra from "tanagra-api"; import { setUnderlays } from "underlaysSlice"; -import * as tanagra from "./tanagra-api"; - -test.each([ - [ - "source", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, - concept_id: { - int64Val: 1234, - }, - domain_id: { - int64Val: 5678, - }, - standard_concept: null, +import { Data } from "./concept"; + +// The Typescript compiler can't map the different parameters of the test cases +// to a single type without actually having a type defined. +type TestCase = { + name: string; + instance: { [key: string]: tanagra.AttributeValue | null }; + matches?: string[]; + notMatches?: string[]; +}; + +const testCases: TestCase[] = [ + { + name: "source", + instance: { + concept_name: { + stringVal: "test-concept", }, - matches: ["test-concept", "1234", "Source"], + concept_id: { + int64Val: 1234, + }, + domain_id: { + int64Val: 5678, + }, + standard_concept: null, }, - ], - [ - "standard", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, - concept_id: { - int64Val: 1234, - }, - standard_concept: { - stringVal: "S", - }, + matches: ["test-concept", "1234", "Source"], + }, + { + name: "standard", + instance: { + concept_name: { + stringVal: "test-concept", + }, + concept_id: { + int64Val: 1234, + }, + standard_concept: { + stringVal: "S", }, - matches: ["test-concept", "1234", "Standard"], }, - ], - [ - "missing concept_id", - { - instance: { - concept_name: { - stringVal: "test-concept", - }, + matches: ["test-concept", "1234", "Standard"], + }, + { + name: "missing concept_id", + instance: { + concept_name: { + stringVal: "test-concept", }, - notMatches: ["test-concept"], }, - ], -])("%s", async (name, { instance, matches, notMatches }) => { - await renderCriteria([instance]); - - matches?.forEach((match) => screen.getByText(match)); - notMatches?.forEach((match) => { - expect(screen.queryByText(match)).not.toBeInTheDocument(); - }); -}); + notMatches: ["test-concept"], + }, +]; + +test.each(testCases)( + "$name", + async ({ instance, matches = [], notMatches = [] }) => { + await renderCriteria([instance]); + + matches?.forEach((match) => screen.getByText(match)); + notMatches?.forEach((match) => { + expect(screen.queryByText(match)).not.toBeInTheDocument(); + }); + } +); test("selection", async () => { const { getCriteria, rerender } = await renderCriteria([ @@ -84,9 +93,10 @@ test("selection", async () => { const checkboxes = screen.getAllByRole("checkbox"); expect(checkboxes.length).toBe(2); - expect(getCriteria().data.selected.length).toBe(0); + const getData = () => getCriteria().data as Data; + expect(getData().selected.length).toBe(0); - const getSelected = () => getCriteria().data.selected.map((row) => row.id); + const getSelected = () => getData().selected.map((row) => row.id); // Use act explicitly because DataGrid has a focus update that occurs after // the event (i.e. outside of act) which causes a warning. @@ -113,12 +123,16 @@ beforeAll(() => { setUnderlays([ { name: "test-underlay", + primaryEntity: "test-entity", + entities: [], + criteriaConfigs: [], + prepackagedConceptSets: [], }, ]) ); const action = store.dispatch( - insertCohort("test-cohort", "test-underlay", "test-entity", []) + insertCohort("test-cohort", "test-underlay", ["test-entity"]) ); store.dispatch( insertGroup( @@ -146,7 +160,7 @@ beforeAll(() => { }); async function renderCriteria( - instances: Array<{ [key: string]: tanagra.AttributeValue }> + instances: Array<{ [key: string]: tanagra.AttributeValue | null }> ) { const getCriteria = () => store.getState().cohorts[0].groups[0].criteria[0]; @@ -158,6 +172,7 @@ async function renderCriteria( }); }); }, + generateDatasetSqlQuery: jest.fn(), }; const cohort = store.getState().cohorts[0]; @@ -170,9 +185,7 @@ async function renderCriteria( - - {getCriteriaPlugin(getCriteria()).renderEdit(jest.fn())} - + diff --git a/ui/src/criteria/concept.tsx b/ui/src/criteria/concept.tsx index a96859d98..b09db61bf 100644 --- a/ui/src/criteria/concept.tsx +++ b/ui/src/criteria/concept.tsx @@ -21,6 +21,7 @@ import produce from "immer"; import React, { useCallback, useContext, useMemo, useState } from "react"; import * as tanagra from "tanagra-api"; import { useImmer } from "use-immer"; +import { isValid } from "util/valid"; type Selection = { entity: string; @@ -54,7 +55,8 @@ interface Config extends CriteriaConfig { entities: EntityConfig[]; } -interface Data extends Config { +// Exported for testing purposes. +export interface Data extends Config { selected: Selection[]; } @@ -426,10 +428,6 @@ function ConceptEdit(props: ConceptEditProps) { ); } -function isValid(arg: Type) { - return arg !== null && typeof arg !== "undefined"; -} - function findEntity( entities: EntityConfig[], rowData?: TreeGridRowData, diff --git a/ui/src/datasets.tsx b/ui/src/datasets.tsx index 91309c3cc..698ea6bbd 100644 --- a/ui/src/datasets.tsx +++ b/ui/src/datasets.tsx @@ -1,6 +1,5 @@ import AddIcon from "@mui/icons-material/Add"; import EditIcon from "@mui/icons-material/Edit"; -import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; @@ -12,6 +11,7 @@ import Link from "@mui/material/Link"; import MenuItem from "@mui/material/MenuItem"; import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; +import Switch from "@mui/material/Switch"; import Tab from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; import TextField from "@mui/material/TextField"; @@ -28,7 +28,7 @@ import { insertCohort } from "cohortsSlice"; import Checkbox from "components/checkbox"; import Loading from "components/loading"; import { useMenu } from "components/menu"; -import { TreeGridData } from "components/treegrid"; +import { TreeGrid, TreeGridData, TreeGridRowData } from "components/treegrid"; import { insertConceptSet } from "conceptSetsSlice"; import { useAsyncWithApi } from "errors"; import { useAppDispatch, useAppSelector, useUnderlay } from "hooks"; @@ -44,6 +44,7 @@ import { Link as RouterLink, useHistory } from "react-router-dom"; import { createUrl } from "router"; import * as tanagra from "tanagra-api"; import { useImmer } from "use-immer"; +import { isValid } from "util/valid"; export function Datasets() { const dispatch = useAppDispatch(); @@ -57,6 +58,11 @@ export function Datasets() { const [selectedConceptSets, updateSelectedConceptSets] = useImmer( new Set() ); + const [excludedAttributes, updateExcludedAttributes] = useImmer( + new Map>() + ); + + const conceptSetEntities = useConceptSetEntities(selectedConceptSets); const [dialog, showNewCohort] = useNewCohortDialog({ callback: (name: string) => { @@ -163,7 +169,10 @@ export function Datasets() { {dialog} - + {cohorts .filter((cohort) => cohort.underlayName === underlay.name) .map((cohort) => ( @@ -203,7 +212,10 @@ export function Datasets() { {menu} - + Prepackaged {listConceptSets(false, underlay.prepackagedConceptSets)} Workspace @@ -223,7 +235,39 @@ export function Datasets() { 3. Values (Columns) - {/* TODO(tjennison): Implement attribute selection. */} + + {conceptSetEntities.map((entity) => ( + <> + {entity.name} + {entity.attributes.map((attribute) => ( + + + updateExcludedAttributes((selection) => { + const attributes = selection?.get(entity.name); + if (attributes?.has(attribute)) { + attributes?.delete(attribute); + } else { + attributes?.add(attribute); + } + }) + } + /> + {attribute} + + ))} + + ))} + @@ -231,6 +275,7 @@ export function Datasets() { ) : ( @@ -306,9 +351,65 @@ function useNewCohortDialog( ]; } +type ConceptSetEntity = { + name: string; + attributes: string[]; + filters: tanagra.Filter[]; +}; + +function useConceptSetEntities( + selectedConceptSets: Set +): ConceptSetEntity[] { + const underlay = useUnderlay(); + + const entities = new Map(); + const addFilter = (entity: string, filter?: tanagra.Filter | null) => { + if (!entities.has(entity)) { + entities.set(entity, []); + } + if (filter) { + entities.get(entity)?.push(filter); + } + }; + + underlay.prepackagedConceptSets.forEach((conceptSet) => { + if (selectedConceptSets.has(conceptSet.id)) { + addFilter(conceptSet.entity, conceptSet.filter); + } + }); + + const workspaceConceptSets = useAppSelector((state) => + state.conceptSets.filter((cs) => selectedConceptSets.has(cs.id)) + ); + workspaceConceptSets.forEach((conceptSet) => { + const plugin = getCriteriaPlugin(conceptSet.criteria); + if (plugin.occurrenceEntities().length != 1) { + throw new Error("Only one entity per concept set is supported."); + } + + const entity = plugin.occurrenceEntities()[0]; + addFilter(entity, plugin.generateFilter(entity, true)); + }); + + return Array.from(entities) + .sort() + .map(([entityName, filters]) => { + const attributes = underlay.entities + .find((entity) => entity.name === entityName) + ?.attributes?.map((attribute) => attribute.name || "unknown") + ?.filter((attribute) => !attribute.startsWith("t_")); + return { + name: entityName, + attributes: attributes || [], + filters, + }; + }); +} + type PreviewProps = { selectedCohorts: Set; selectedConceptSets: Set; + conceptSetEntities: ConceptSetEntity[]; }; function Preview(props: PreviewProps) { @@ -316,43 +417,15 @@ function Preview(props: PreviewProps) { const cohorts = useAppSelector((state) => state.cohorts.filter((cohort) => props.selectedCohorts.has(cohort.id)) ); - const workspaceConceptSets = useAppSelector((state) => - state.conceptSets.filter((cs) => props.selectedConceptSets.has(cs.id)) - ); const api = useContext(EntityInstancesApiContext); const [tab, setTab] = useState(0); + const [queriesMode, setQueriesMode] = useState(false); const tabDataState = useAsyncWithApi( useCallback(async () => { - const entities = new Map(); - const addFilter = (entity: string, filter?: tanagra.Filter | null) => { - if (!entities.has(entity)) { - entities.set(entity, []); - } - if (filter) { - entities.get(entity)?.push(filter); - } - }; - - underlay.prepackagedConceptSets.forEach((conceptSet) => { - if (props.selectedConceptSets.has(conceptSet.id)) { - addFilter(conceptSet.entity, conceptSet.filter); - } - }); - - workspaceConceptSets.forEach((conceptSet) => { - const plugin = getCriteriaPlugin(conceptSet.criteria); - if (plugin.occurrenceEntities().length != 1) { - throw new Error("Only one entity per concept set is supported."); - } - - const entity = plugin.occurrenceEntities()[0]; - addFilter(entity, plugin.generateFilter(entity, true)); - }); - return Promise.all( - Array.from(entities).map(async ([entity, filters]) => { + props.conceptSetEntities.map(async (entity) => { let filter: tanagra.Filter = { arrayFilter: { operands: cohorts @@ -364,25 +437,25 @@ function Preview(props: PreviewProps) { }, }; - if (entity !== underlay.primaryEntity) { + if (entity.name !== underlay.primaryEntity) { filter = { arrayFilter: { operator: tanagra.ArrayFilterOperator.And, operands: [ { relationshipFilter: { - outerVariable: entity, + outerVariable: entity.name, newVariable: underlay.primaryEntity, newEntity: underlay.primaryEntity, filter: filter, }, }, - ...(filters.length > 0 + ...(entity.filters.length > 0 ? [ { arrayFilter: { operator: tanagra.ArrayFilterOperator.Or, - operands: filters, + operands: entity.filters, }, }, ] @@ -392,27 +465,16 @@ function Preview(props: PreviewProps) { }; } - const attributes = underlay.entities - .find((e) => e.name === entity) - ?.attributes?.map((attribute) => attribute.name) - .filter( - (attribute): attribute is string => - !!attribute && !attribute.startsWith("t_") - ); - if (!attributes) { - throw new Error(`No attributes for "${entity}"`); - } - const entityDataset = { - entityVariable: entity, - selectedAttributes: attributes, + entityVariable: entity.name, + selectedAttributes: entity.attributes, filter: filter, }; const dataParts = await Promise.all([ (async () => { const res = await api.generateDatasetSqlQuery({ - entityName: entity, + entityName: entity.name, underlayName: underlay.name, generateDatasetSqlQueryRequest: { entityDataset, @@ -425,13 +487,40 @@ function Preview(props: PreviewProps) { return res.query; })(), (async () => { - // TODO(tjennison): Fetch entity instances and refactor processing - // code from criteria/concept. - return {}; + const res = await api.searchEntityInstances({ + entityName: entity.name, + underlayName: underlay.name, + searchEntityInstancesRequest: { + entityDataset, + }, + }); + + const data: TreeGridData = { + root: { data: {}, children: [] }, + }; + res?.instances?.slice(0, 100)?.forEach((instance, i) => { + const row: TreeGridRowData = {}; + for (const k in instance) { + const v = instance[k]; + if (!v) { + row[k] = ""; + } else if (isValid(v.int64Val)) { + row[k] = v.int64Val; + } else if (isValid(v.boolVal)) { + row[k] = v.boolVal; + } else { + row[k] = v.stringVal; + } + } + + data[i] = { data: row }; + data.root?.children?.push(i); + }); + return data; })(), ]); return { - entity, + entity: entity.name, sql: dataParts[0], data: dataParts[1], }; @@ -440,23 +529,56 @@ function Preview(props: PreviewProps) { }, [props.selectedCohorts, props.selectedConceptSets]) ); - const handleChange = (event: SyntheticEvent, newValue: number) => { + const onTabChange = (event: SyntheticEvent, newValue: number) => { setTab(newValue); }; + const onQueriesModeChange = (event: React.ChangeEvent) => { + setQueriesMode(event.target.checked); + }; + return ( <> - - + + {tabDataState.data?.map((data) => ( ))} - - - {tabDataState.data?.[tab]?.sql} - + Data + + Queries + + {queriesMode ? ( + + {tabDataState.data?.[tab]?.sql} + + ) : tabDataState.data?.[tab]?.data ? ( + + ({ + key: attribute, + width: 120, + title: attribute, + }) + )} + variableWidth + wrapBodyText + /> + + ) : undefined} ); diff --git a/ui/src/util/valid.tsx b/ui/src/util/valid.tsx new file mode 100644 index 000000000..a8465fcfe --- /dev/null +++ b/ui/src/util/valid.tsx @@ -0,0 +1,3 @@ +export function isValid(arg: Type) { + return arg !== null && typeof arg !== "undefined"; +}