Add concept picker and Ontology filters to data region filter dialog

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});

core/package.json

@@ -51,8 +51,8 @@
  }
  },
  "dependencies": {
- "@labkey/api": "1.3.0",
- "@labkey/components": "2.26.2",
+ "@labkey/api": "1.4.0",
+ "@labkey/components": "2.27.0",
  "@labkey/eslint-config-react": "0.0.8",
  "@labkey/themes": "1.1.1"
  },

core/src/client/ConceptFilter/ConceptFilterView.scss

@@ -0,0 +1,32 @@
+@import "@labkey/components-scss";
+
+.concept-filter-view {
+ margin: 0 0 10px;
+ padding: 5px 10px;
+
+ a.show-toggle {
+ cursor: pointer;
+ }
+
+ &.collapsed {
+ margin: unset;
+ padding: 2px 0 10px;
+ border: unset;
+ a.show-toggle {
+ margin-left: 105px;
+ }
+ }
+
+ .ontology-browser-container {
+ .concept-search-container {
+ padding-bottom: 10px;
+
+ .result-menu {
+ padding-right: 8px; //Allow room for scroll bar
+ min-width: 400px;
+ max-width: 458px;
+ max-height: 320px;
+ }
+ }
+ }
+}

core/src/client/ConceptFilter/ConceptFilterView.tsx

@@ -0,0 +1,98 @@
+import React, { FC, memo, useCallback, useEffect, useState } from 'react';
+import { OntologyBrowserFilterPanel, } from '@labkey/components';
+import classNames from 'classnames';
+
+import './ConceptFilterView.scss';
+import { Filter, } from '@labkey/api';
+
+type ChangeListener = (newValue: string) => void;
+type FilterChangeListener = (filter: Filter.IFilterType) => void;
+type CollapseChangeListener = (collapse: boolean) => void;
+
+export interface AppContext {
+ ontologyId: string;
+ initFilterValue?: string;
+ initFilter?: Filter.IFilterType;
+ subscribeFilterValue: (listener: ChangeListener) => void;
+ unsubscribeFilterValue: (listener:ChangeListener) => void;
+ onFilterChange: (filterValue: string) => void;
+ subscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ unsubscribeFilterTypeChanged: (listener: FilterChangeListener) => void;
+ loadListener: () => void;
+ subscribeCollapse: (listener: CollapseChangeListener) => void;
+ unsubscribeCollapse: () => void;
+ onOpen: () => void;
+}
+
+interface Props {
+ context: AppContext;
+}
+
+export const ConceptFilterView: FC<Props> = memo(props => {
+ const {
+ initFilterValue,
+ initFilter,
+ onFilterChange,
+ ontologyId,
+ subscribeFilterValue,
+ unsubscribeFilterValue,
+ subscribeFilterTypeChanged,
+ unsubscribeFilterTypeChanged,
+ loadListener,
+ subscribeCollapse,
+ unsubscribeCollapse,
+ onOpen,
+ } = props.context;
+ const [filterValue, setFilterValue] = useState(initFilterValue);
+ const [filter, setFilter] = useState(initFilter);
+ const [collapsed, setCollapsed] = useState<boolean>(true);
+
+ const clickHandler = useCallback(() => {
+ setCollapsed(!collapsed);
+ onOpen();
+ },[collapsed, setCollapsed]);
+
+ useEffect(() => {
+ const handleValueChange = (newValue: string) => {
+ setFilterValue(newValue);
+ };
+ subscribeFilterValue(handleValueChange);
+ return () => unsubscribeFilterValue(handleValueChange);
+
+ },[setFilterValue, subscribeFilterValue, unsubscribeFilterValue]);
+
+ useEffect(() => {
+ const handleFilterChange = (newValue: Filter.IFilterType): void => {
+ setFilter(newValue);
+ };
+ subscribeFilterTypeChanged(handleFilterChange);
+ return () => unsubscribeFilterTypeChanged(handleFilterChange);
+
+ },[setFilter, subscribeFilterTypeChanged, unsubscribeFilterTypeChanged]);
+
+ useEffect(() => {
+ const handleCollapse = (collapse: boolean): void => {
+ setCollapsed(true);
+ }
+ subscribeCollapse(handleCollapse);
+ return () => unsubscribeCollapse();
+ });
+
+ useEffect(() => {
+ loadListener();
+ },[]);
+
+ //No need to show the filter tree if a value can't be set.
+ if (!filter?.isDataValueRequired())
+ return null;
+
+ return (
+ <div className={classNames('concept-filter-view', { collapsed, })}>
+ <a className='show-toggle'
+ onClick={clickHandler}>{collapsed ? 'Find Concepts By Tree' : 'Close Browser'}</a>
+ {!collapsed &&
+ <OntologyBrowserFilterPanel ontologyId={ontologyId} filterValue={filterValue} filterType={filter}
+ onFilterChange={onFilterChange}/>}
+ </div>
+ );
+});

core/src/client/ConceptFilter/app.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from '@labkey/api';
+
+import {AppContext, ConceptFilterView} from './ConceptFilterView';
+
+App.registerApp<AppContext>('conceptFilter', (target, ctx) => {
+ ReactDOM.render(<ConceptFilterView context={ctx} />, document.getElementById(target));
+});