From 4d05d7164cb13eaa892c2024bc8c99c0f1e2b96b Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Tue, 11 Jun 2024 15:35:36 +1000 Subject: [PATCH 01/16] Change jute default port --- shared/src/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/src/constants.ts b/shared/src/constants.ts index 8040b9c9..e4062beb 100644 --- a/shared/src/constants.ts +++ b/shared/src/constants.ts @@ -4,7 +4,7 @@ export const baseURL = : (window as any).BASE_URL; export const juteURL = (window as any).JUTE_URL === '{{JUTE_URL}}' - ? 'http://localhost:8090/' + ? 'http://localhost:8099/' : (window as any).JUTE_URL; export const aiQuestionnaireBuilderUrl = 'https://builder.emr.beda.software'; From 2fea7cbfced815b13f7464bf21d60f530bfc6ba2 Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Tue, 11 Jun 2024 15:35:49 +1000 Subject: [PATCH 02/16] Use 3001 port by default --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index 609b5d8e..28f81749 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,7 +10,7 @@ const require = createRequire(import.meta.url); export const getBaseConfig = ({ plugins = [], build = {}, test = {} }) => defineConfig(({ command }) => ({ server: { - port: command === 'build' ? 5000 : 3000, + port: command === 'build' ? 5000 : 3001, }, plugins: [ viteCommonjs(), From 39b03866512ee73a4fc754cbafa687b601407e1c Mon Sep 17 00:00:00 2001 From: nvim Date: Tue, 11 Jun 2024 15:56:47 +0200 Subject: [PATCH 03/16] Add monaco-editor --- web/package.json | 1 + yarn.lock | 50 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/web/package.json b/web/package.json index ace3fe15..8cf3117c 100644 --- a/web/package.json +++ b/web/package.json @@ -9,6 +9,7 @@ "@codemirror/legacy-modes": "^6.3.3", "@codemirror/state": "^6.2.1", "@codemirror/view": "^6.16.0", + "@monaco-editor/react": "^4.6.0", "@sentry/browser": "^6.19.7", "@sentry/react": "^6.19.7", "@sentry/tracing": "^6.19.7", diff --git a/yarn.lock b/yarn.lock index c8b88147..af1d96aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2022,6 +2022,20 @@ string-to-stream "^1.1.0" xmldoc "^0.4.0" +"@monaco-editor/loader@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558" + integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg== + dependencies: + state-local "^1.0.6" + +"@monaco-editor/react@^4.6.0": + version "4.6.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119" + integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw== + dependencies: + "@monaco-editor/loader" "^1.4.0" + "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": version "5.1.1-v1" resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129" @@ -12540,6 +12554,11 @@ stackframe@^1.3.4: resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310" integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw== +state-local@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5" + integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w== + statuses@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63" @@ -12613,7 +12632,16 @@ string-to-stream@^1.1.0: inherits "^2.0.1" readable-stream "^2.1.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -12695,7 +12723,14 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -14108,7 +14143,7 @@ workbox-window@6.6.1: "@types/trusted-types" "^2.0.2" workbox-core "6.6.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -14126,6 +14161,15 @@ wrap-ansi@^6.0.1: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 0d76517c5a384b98e353a3dab1daf43aac2a6ac8 Mon Sep 17 00:00:00 2001 From: nvim Date: Tue, 11 Jun 2024 15:57:28 +0200 Subject: [PATCH 04/16] WIP: Add FHIRMappingLanguage hook and use it --- shared/src/constants.ts | 1 + web/src/containers/Main/index.tsx | 40 ++++++++--- .../containers/Main/useFHIRMappingLanguage.ts | 71 +++++++++++++++++++ web/src/services/fhirmapping.ts | 46 ++++++++++++ 4 files changed, 150 insertions(+), 8 deletions(-) create mode 100644 web/src/containers/Main/useFHIRMappingLanguage.ts create mode 100644 web/src/services/fhirmapping.ts diff --git a/shared/src/constants.ts b/shared/src/constants.ts index e4062beb..da1d5bc0 100644 --- a/shared/src/constants.ts +++ b/shared/src/constants.ts @@ -11,3 +11,4 @@ export const aiQuestionnaireBuilderUrl = 'https://builder.emr.beda.software'; // export const aiQuestionnaireBuilderUrl = 'http://localhost:3002'; export const fhirpathMappingUrl = 'https://fhirpathmapper.emr.beda.software'; // export const fhirpathMappingUrl = 'http://localhost:8091'; +export const fhirMappingLanguageUrl = 'http://localhost:8084/matchboxv3/fhir' diff --git a/web/src/containers/Main/index.tsx b/web/src/containers/Main/index.tsx index 500c2128..d840ff33 100644 --- a/web/src/containers/Main/index.tsx +++ b/web/src/containers/Main/index.tsx @@ -1,6 +1,9 @@ +import Editor from '@monaco-editor/react'; +import { FhirResource } from 'fhir/r4b'; import { useParams } from 'react-router-dom'; import { ToastContainer } from 'react-toastify'; import { Button } from 'web/src/components/Button'; +import { CodeEditor } from 'web/src/components/CodeEditor'; import { ExpandableElement } from 'web/src/components/ExpandableElement'; import { ExpandableRow } from 'web/src/components/ExpandableRow'; import { LaunchContextEditor } from 'web/src/components/LaunchContextEditor'; @@ -13,11 +16,13 @@ import { version } from 'web/src/version'; import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; import { isSuccess } from 'fhir-react/lib/libs/remoteData'; + import s from './Main.module.scss'; -import { MappingEditor } from './MappingEditor'; import { QuestionnaireEditor } from './QuestionnaireEditor'; +import { useFHIRMappingLanguage } from './useFHIRMappingLanguage'; import { useMain } from './useMain'; + export function Main() { const { questionnaireId } = useParams<{ questionnaireId: string }>(); const { @@ -25,10 +30,11 @@ export function Main() { originalQuestionnaireRD, assembledQuestionnaireRD, questionnaireResponseRD, - mappingRD, + // mappingRD, extractRD, manager, } = useMain(questionnaireId!); + const { mapString, setMapString, mappingResult } = useFHIRMappingLanguage(isSuccess(questionnaireResponseRD) ? questionnaireResponseRD.data : undefined) return ( <> @@ -61,8 +67,8 @@ export function Main() { title={ isSuccess(originalQuestionnaireRD) ? originalQuestionnaireRD.data.title || - originalQuestionnaireRD.data.name || - originalQuestionnaireRD.data.id + originalQuestionnaireRD.data.name || + originalQuestionnaireRD.data.id : '' } > @@ -78,8 +84,25 @@ export function Main() { - - */} + + { + setMapString(value as string) + }} + value={mapString} + options={{ + formatOnPaste: true, + formatOnType: true, + autoIndent: "full", + minimap: { + enabled: false + } + }} + /> + {/* + /> */} - + {/* */} + {isSuccess(extractRD) && ( + + + + ); +} \ No newline at end of file diff --git a/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx new file mode 100644 index 00000000..6bd7aa99 --- /dev/null +++ b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx @@ -0,0 +1,31 @@ +import { Button } from "web/src/components/Button"; + +import { formatError } from "fhir-react/lib/utils/error"; + +import { MappingEditorErrorProps } from "../interfaces"; +import s from '../MappingEditor.module.scss'; + +export function MappingEditorError(props: MappingEditorErrorProps) { + const {showSelect, setShowSelect, error} = props; + + return !showSelect ? ( +
+ {formatError(error)} + {error?.id === 'not-found' ? ( +
+ +
+ ) : null} +
+ ) : ( +
+ ) +} \ No newline at end of file diff --git a/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx new file mode 100644 index 00000000..8620f3fb --- /dev/null +++ b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx @@ -0,0 +1,97 @@ +import { SingleValue } from 'react-select'; +import { toast } from 'react-toastify'; +import { Button } from 'web/src/components/Button'; +import { ModalCreateMapper } from 'web/src/components/ModalCreateMapper'; +import { Select } from 'web/src/components/Select'; + +import { RenderRemoteData } from "fhir-react/lib/components/RenderRemoteData"; +import { isFailure, isSuccess } from "fhir-react/lib/libs/remoteData"; +import { formatError } from 'fhir-react/lib/utils/error'; + +import formStyles from '../../../../components/BaseQuestionnaireResponseForm/QuestionnaireResponseForm.module.scss'; +import { PromptForm } from '../../PromptForm'; +import { MappingEditorSelectProps } from '../interfaces'; +import s from '../MappingEditor.module.scss'; + + +export function MappingEditorSelect(props: MappingEditorSelectProps) { + const { mappingsRD, mappingRD, showModal, setShowSelect, generateMapping, createMapping, setShowModal, toggleMappingMode, onChange } = props; + + return ( + + {(mappings) => ( + <> +
+
Choose mapper from the list
+ ({ - value: mapping, - label: mapping.id, - }))} - onChange={(option) => { - if (option && !Array.isArray(option)) { - setShowSelect(false); - onChange((option as SingleValue).value); - } - }} - /> -
-
- setShowSelect(false)} - label="or describe requirements to new mapper" - /> -
- - -
- - {showModal ? ( - { - const response = await createMapping({ - resourceType: 'Mapping', - id: mappingId, - body: {}, - }); - - if (isSuccess(response)) { - setShowSelect(false); - } - - if (isFailure(response)) { - toast.error(formatError(response.error)); - } - }} - closeModal={() => setShowModal(false)} - mappings={mappings} - /> - ) : null} - - )} - - ); - }; - - const renderEditor = (mapping: WithId) => { - return ( - <> - > - {...props} - reload={() => { - reload(); - setUpdatedResource(undefined); - }} - resource={mapping} - onChange={(updatedMapping) => { - setUpdatedResource(updatedMapping); - onChange(updatedMapping); - }} - /> -
- - -
- - ); - }; - return (
- !showSelect ? ( -
- {formatError(error)} - {error?.id === 'not-found' ? ( -
- -
- ) : null} -
- ) : ( -
- ) - } + renderFailure={(error) => } remoteData={mappingRD} > - {(mapping) => <>{!showSelect ? renderEditor(mapping) : null}} + {(mapping) => <>{!showSelect ? : null}} - {showSelect ? renderSelect() : null} + {showSelect ? : null}
); } diff --git a/web/src/containers/Main/MappingEditor/interfaces.ts b/web/src/containers/Main/MappingEditor/interfaces.ts new file mode 100644 index 00000000..d04f21bc --- /dev/null +++ b/web/src/containers/Main/MappingEditor/interfaces.ts @@ -0,0 +1,45 @@ +import { Questionnaire, Parameters, QuestionnaireResponse } from "fhir/r4b"; + +import { RemoteData, RemoteDataResult } from "fhir-react/lib/libs/remoteData"; +import { WithId } from "fhir-react/lib/services/fhir"; + +import { Mapping } from "shared/src/contrib/aidbox"; + +interface CommonMappingEditorProps { + onSave: (resource: WithId) => void; + onChange: (resource: WithId) => void; + reload: () => void; + createMapping: (mapping: Mapping) => Promise>; + generateMapping: (prompt: string) => Promise>; + toggleMappingMode: () => void; +} + +export interface MappingEditorProps extends CommonMappingEditorProps { + questionnaireRD: RemoteData; + mappingRD: RemoteData>; + launchContext: Parameters; + questionnaireResponseRD: RemoteData; +} + +export interface MappingEditorErrorProps { + showSelect: boolean; + setShowSelect: (value: boolean) => void; + error: any; +} + +export interface MappingEditorSelectProps extends CommonMappingEditorProps { + mappingsRD: RemoteData[], any>; + mappingRD: RemoteData>; + showModal: boolean; + setShowSelect: (value: boolean) => void; + setShowModal: (value: boolean) => void; +} + +export interface MappingEditorEditorProps extends CommonMappingEditorProps { + setShowSelect: (value: boolean) => void; + updatedResource: WithId | undefined; + setUpdatedResource: (value: WithId | undefined) => void; + mapping: WithId; + launchContext: Parameters; + questionnaireResponseRD: RemoteData; +} diff --git a/web/src/containers/Main/index.tsx b/web/src/containers/Main/index.tsx index d840ff33..b140e0d2 100644 --- a/web/src/containers/Main/index.tsx +++ b/web/src/containers/Main/index.tsx @@ -18,6 +18,7 @@ import { isSuccess } from 'fhir-react/lib/libs/remoteData'; import s from './Main.module.scss'; +import { MappingEditor } from './MappingEditor'; import { QuestionnaireEditor } from './QuestionnaireEditor'; import { useFHIRMappingLanguage } from './useFHIRMappingLanguage'; import { useMain } from './useMain'; @@ -30,11 +31,11 @@ export function Main() { originalQuestionnaireRD, assembledQuestionnaireRD, questionnaireResponseRD, - // mappingRD, + mappingRD, extractRD, manager, } = useMain(questionnaireId!); - const { mapString, setMapString, mappingResult } = useFHIRMappingLanguage(isSuccess(questionnaireResponseRD) ? questionnaireResponseRD.data : undefined) + const { mapString, setMapString, mappingResult, fhirMappingLangMode, toggleMappingMode } = useFHIRMappingLanguage(isSuccess(questionnaireResponseRD) ? questionnaireResponseRD.data : undefined) return ( <> @@ -84,25 +85,27 @@ export function Main() { - {/* */} - - { - setMapString(value as string) - }} - value={mapString} - options={{ - formatOnPaste: true, - formatOnType: true, - autoIndent: "full", - minimap: { - enabled: false - } - }} - /> - {/* + {fhirMappingLangMode ? ( + { + setMapString(value as string) + }} + value={mapString} + options={{ + formatOnPaste: true, + formatOnType: true, + autoIndent: "full", + minimap: { + enabled: false + } + }} + /> + + + ) : ( */} + toggleMappingMode={toggleMappingMode} + />)} {/* */} diff --git a/web/src/containers/Main/useFHIRMappingLanguage.ts b/web/src/containers/Main/useFHIRMappingLanguage.ts index e0bbbd15..3cfa28d1 100644 --- a/web/src/containers/Main/useFHIRMappingLanguage.ts +++ b/web/src/containers/Main/useFHIRMappingLanguage.ts @@ -7,6 +7,7 @@ import { isSuccess } from "fhir-react/lib/libs/remoteData"; export function useFHIRMappingLanguage(questionnaireResponse: QuestionnaireResponse | undefined) { + const [fhirMappingLangMode, setFhirMappingLangMode] = useState(false) const [mapString, setMapString] = useState('') const [prevMapString, setPrevMapString] = useState('') const [structureMapData, setStructureMapData] = useState(undefined) @@ -63,7 +64,11 @@ export function useFHIRMappingLanguage(questionnaireResponse: QuestionnaireRespo setMapString(value); } + const toggleMappingMode = () => setFhirMappingLangMode(!fhirMappingLangMode) + return { + fhirMappingLangMode, + toggleMappingMode, mapString, setMapString: changeMapString, mappingResult, From 2f60df92be8e31f03382bed979200f2c75779684 Mon Sep 17 00:00:00 2001 From: nvim Date: Tue, 11 Jun 2024 18:37:55 +0200 Subject: [PATCH 06/16] WIP: update useMappingEditor hook --- .../containers/Main/MappingEditor/index.tsx | 19 +------------ .../Main/MappingEditor/useMappingEditor.ts | 27 ++++++++++++++++--- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/web/src/containers/Main/MappingEditor/index.tsx b/web/src/containers/Main/MappingEditor/index.tsx index 661fc885..0e6c43fa 100644 --- a/web/src/containers/Main/MappingEditor/index.tsx +++ b/web/src/containers/Main/MappingEditor/index.tsx @@ -1,12 +1,4 @@ -import { useEffect, useState } from 'react'; - import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { - isLoading, -} from 'fhir-react/lib/libs/remoteData'; -import { WithId } from 'fhir-react/lib/services/fhir'; - -import { Mapping } from 'shared/src/contrib/aidbox'; import { MappingEditorProps } from './interfaces'; import s from './MappingEditor.module.scss'; @@ -27,16 +19,7 @@ export function MappingEditor(props: MappingEditorProps) { generateMapping, toggleMappingMode } = props; - const { mappingsRD } = useMappingEditor(questionnaireRD); - const [showSelect, setShowSelect] = useState(false); - const [showModal, setShowModal] = useState(false); - const [updatedResource, setUpdatedResource] = useState | undefined>(); - - useEffect(() => { - if (isLoading(questionnaireResponseRD)) { - setShowSelect(false); - } - }, [questionnaireResponseRD]); + const { mappingsRD, showModal, showSelect, setShowModal, setShowSelect, setUpdatedResource, updatedResource } = useMappingEditor(questionnaireRD, questionnaireResponseRD); return (
diff --git a/web/src/containers/Main/MappingEditor/useMappingEditor.ts b/web/src/containers/Main/MappingEditor/useMappingEditor.ts index ba8f4217..9c6cc04f 100644 --- a/web/src/containers/Main/MappingEditor/useMappingEditor.ts +++ b/web/src/containers/Main/MappingEditor/useMappingEditor.ts @@ -1,4 +1,5 @@ -import { Bundle, Questionnaire } from 'fhir/r4b'; +import { Bundle, Questionnaire, QuestionnaireResponse } from 'fhir/r4b'; +import { useEffect, useState } from 'react'; import { getFHIRResources as getAidboxFHIRResources } from 'aidbox-react/lib/services/fhir'; @@ -7,6 +8,7 @@ import { RemoteData, RemoteDataResult, failure, + isLoading, isSuccess, success, } from 'fhir-react/lib/libs/remoteData'; @@ -17,7 +19,18 @@ import { Mapping } from 'shared/src/contrib/aidbox'; import { getMappings } from '../utils'; -export function useMappingEditor(questionnaireRD: RemoteData) { +export function useMappingEditor(questionnaireRD: RemoteData, questionnaireResponseRD: RemoteData) { + const [showSelect, setShowSelect] = useState(false); + const [showModal, setShowModal] = useState(false); + const [updatedResource, setUpdatedResource] = useState | undefined>(); + + useEffect(() => { + if (isLoading(questionnaireResponseRD)) { + setShowSelect(false); + } + }, [questionnaireResponseRD]); + + const [mappingsRD] = useService(async () => { if (isSuccess(questionnaireRD)) { let response: RemoteDataResult>> = success({ @@ -44,5 +57,13 @@ export function useMappingEditor(questionnaireRD: RemoteData) { return await Promise.resolve(failure({})); }, [questionnaireRD]); - return { mappingsRD }; + return { + mappingsRD, + setShowModal, + showModal, + setShowSelect, + showSelect, + updatedResource, + setUpdatedResource + }; } From 8e8fe9e85f2dc7c62ac801d8590699a81034841e Mon Sep 17 00:00:00 2001 From: nvim Date: Tue, 11 Jun 2024 19:50:08 +0200 Subject: [PATCH 07/16] WIP: Better mannage MappingEditor state --- .../MappingEditorEditor/index.tsx | 4 +- .../MappingEditorError/index.tsx | 6 +-- .../MappingEditorSelect/index.tsx | 10 ++-- .../containers/Main/MappingEditor/index.tsx | 50 +++++++++++++------ .../Main/MappingEditor/interfaces.ts | 8 +-- .../Main/MappingEditor/useMappingEditor.ts | 42 +++++++++++++--- 6 files changed, 83 insertions(+), 37 deletions(-) diff --git a/web/src/containers/Main/MappingEditor/MappingEditorEditor/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorEditor/index.tsx index b3f6e736..969dd90b 100644 --- a/web/src/containers/Main/MappingEditor/MappingEditorEditor/index.tsx +++ b/web/src/containers/Main/MappingEditor/MappingEditorEditor/index.tsx @@ -10,7 +10,7 @@ import s from '../MappingEditor.module.scss'; export function MappingEditorEditor(props: MappingEditorEditorProps) { - const { setShowSelect, reload, onChange, updatedResource, onSave, setUpdatedResource, mapping, launchContext, questionnaireResponseRD } = props; + const { reload, onChange, updatedResource, onSave, setUpdatedResource, mapping, launchContext, questionnaireResponseRD, setEditorSelect } = props; return ( <> @@ -32,7 +32,7 @@ export function MappingEditorEditor(props: MappingEditorEditorProps) { className={s.action} variant="secondary" onClick={() => { - setShowSelect(true); + setEditorSelect(); }} > clear diff --git a/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx index 6bd7aa99..6491eb31 100644 --- a/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx +++ b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx @@ -6,9 +6,9 @@ import { MappingEditorErrorProps } from "../interfaces"; import s from '../MappingEditor.module.scss'; export function MappingEditorError(props: MappingEditorErrorProps) { - const {showSelect, setShowSelect, error} = props; + const {error, setEditorSelect, editorState} = props; - return !showSelect ? ( + return editorState !== 'ready' ? (
{formatError(error)} {error?.id === 'not-found' ? ( @@ -17,7 +17,7 @@ export function MappingEditorError(props: MappingEditorErrorProps) { className={s.action} variant="secondary" onClick={() => { - setShowSelect(true); + setEditorSelect(); }} > create new diff --git a/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx index 8620f3fb..891e9ad2 100644 --- a/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx +++ b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx @@ -15,7 +15,7 @@ import s from '../MappingEditor.module.scss'; export function MappingEditorSelect(props: MappingEditorSelectProps) { - const { mappingsRD, mappingRD, showModal, setShowSelect, generateMapping, createMapping, setShowModal, toggleMappingMode, onChange } = props; + const { mappingsRD, mappingRD, showModal, generateMapping, createMapping, setShowModal, toggleMappingMode, onChange, setEditorSelect } = props; return ( @@ -38,7 +38,7 @@ export function MappingEditorSelect(props: MappingEditorSelectProps) { }))} onChange={(option) => { if (option && !Array.isArray(option)) { - setShowSelect(false); + setEditorSelect(); onChange((option as SingleValue).value); } }} @@ -48,7 +48,7 @@ export function MappingEditorSelect(props: MappingEditorSelectProps) { setShowSelect(false)} + goBack={() => setEditorSelect()} label="or describe requirements to new mapper" />
@@ -56,7 +56,7 @@ export function MappingEditorSelect(props: MappingEditorSelectProps) { className={s.action} variant="secondary" onClick={() => { - setShowSelect(false); + setEditorSelect(); }} > cancel @@ -79,7 +79,7 @@ export function MappingEditorSelect(props: MappingEditorSelectProps) { }); if (isSuccess(response)) { - setShowSelect(false); + setEditorSelect(); } if (isFailure(response)) { diff --git a/web/src/containers/Main/MappingEditor/index.tsx b/web/src/containers/Main/MappingEditor/index.tsx index 0e6c43fa..6b7c3212 100644 --- a/web/src/containers/Main/MappingEditor/index.tsx +++ b/web/src/containers/Main/MappingEditor/index.tsx @@ -9,27 +9,45 @@ import { useMappingEditor } from './useMappingEditor'; export function MappingEditor(props: MappingEditorProps) { const { - onSave, - onChange, mappingRD, questionnaireRD, - questionnaireResponseRD, - createMapping, - reload, - generateMapping, - toggleMappingMode - } = props; - const { mappingsRD, showModal, showSelect, setShowModal, setShowSelect, setUpdatedResource, updatedResource } = useMappingEditor(questionnaireRD, questionnaireResponseRD); + questionnaireResponseRD } = props; + const { mappingsRD, showModal, + setShowModal, setUpdatedResource, + updatedResource, editorState, + setEditorSelect } = useMappingEditor(questionnaireRD, questionnaireResponseRD, mappingRD); + + const mapEditorStateRender = { + 'initial': <>Please, select/create Questionnaire resource, + 'loading': <>Loading..., + 'select': , + 'ready': } + remoteData={mappingRD} + > + {(mapping) => { + return ( + + ) + }} + + } return (
- } - remoteData={mappingRD} - > - {(mapping) => <>{!showSelect ? : null}} - - {showSelect ? : null} + {mapEditorStateRender[editorState]}
); } diff --git a/web/src/containers/Main/MappingEditor/interfaces.ts b/web/src/containers/Main/MappingEditor/interfaces.ts index d04f21bc..97b03c58 100644 --- a/web/src/containers/Main/MappingEditor/interfaces.ts +++ b/web/src/containers/Main/MappingEditor/interfaces.ts @@ -22,24 +22,24 @@ export interface MappingEditorProps extends CommonMappingEditorProps { } export interface MappingEditorErrorProps { - showSelect: boolean; - setShowSelect: (value: boolean) => void; error: any; + setEditorSelect: () => void; + editorState: 'initial' | 'loading' | 'select' | 'ready'; } export interface MappingEditorSelectProps extends CommonMappingEditorProps { mappingsRD: RemoteData[], any>; mappingRD: RemoteData>; showModal: boolean; - setShowSelect: (value: boolean) => void; setShowModal: (value: boolean) => void; + setEditorSelect: () => void; } export interface MappingEditorEditorProps extends CommonMappingEditorProps { - setShowSelect: (value: boolean) => void; updatedResource: WithId | undefined; setUpdatedResource: (value: WithId | undefined) => void; mapping: WithId; launchContext: Parameters; questionnaireResponseRD: RemoteData; + setEditorSelect: () => void; } diff --git a/web/src/containers/Main/MappingEditor/useMappingEditor.ts b/web/src/containers/Main/MappingEditor/useMappingEditor.ts index 9c6cc04f..be6c588d 100644 --- a/web/src/containers/Main/MappingEditor/useMappingEditor.ts +++ b/web/src/containers/Main/MappingEditor/useMappingEditor.ts @@ -8,7 +8,9 @@ import { RemoteData, RemoteDataResult, failure, + isFailure, isLoading, + isNotAsked, isSuccess, success, } from 'fhir-react/lib/libs/remoteData'; @@ -19,17 +21,40 @@ import { Mapping } from 'shared/src/contrib/aidbox'; import { getMappings } from '../utils'; -export function useMappingEditor(questionnaireRD: RemoteData, questionnaireResponseRD: RemoteData) { - const [showSelect, setShowSelect] = useState(false); +export function useMappingEditor(questionnaireRD: RemoteData, questionnaireResponseRD: RemoteData, mappingRD: RemoteData) { const [showModal, setShowModal] = useState(false); const [updatedResource, setUpdatedResource] = useState | undefined>(); + const [editorState, setEditorState] = useState<'initial' | 'loading' | 'select' | 'ready'>('initial') + + const setEditorInitial = () => setEditorState('initial') + const setEditorLoading = () => setEditorState('loading') + const setEditorSelect = () => setEditorState('select') + const setEditorReady = () => setEditorState('ready') useEffect(() => { + if (isNotAsked(questionnaireResponseRD)){ + setEditorInitial(); + } if (isLoading(questionnaireResponseRD)) { - setShowSelect(false); + setEditorLoading(); + } + + if (isFailure(questionnaireResponseRD)) { + setEditorInitial(); } - }, [questionnaireResponseRD]); + if (isSuccess(questionnaireResponseRD)) { + if (isSuccess(mappingRD)) { + setEditorReady(); + } + if (isNotAsked(mappingRD)) { + setEditorInitial(); + } + if (isFailure(mappingRD)) { + setEditorSelect(); + } + } + }, [questionnaireResponseRD, mappingRD]); const [mappingsRD] = useService(async () => { if (isSuccess(questionnaireRD)) { @@ -61,9 +86,12 @@ export function useMappingEditor(questionnaireRD: RemoteData, que mappingsRD, setShowModal, showModal, - setShowSelect, - showSelect, updatedResource, - setUpdatedResource + setUpdatedResource, + editorState, + setEditorInitial, + setEditorLoading, + setEditorReady, + setEditorSelect }; } From baacbb38260ba6b141e596f0c66ebac0f4ba3d94 Mon Sep 17 00:00:00 2001 From: nvim Date: Tue, 11 Jun 2024 19:56:11 +0200 Subject: [PATCH 08/16] WIP: Add EditorState type --- web/src/containers/Main/MappingEditor/interfaces.ts | 4 +++- web/src/containers/Main/MappingEditor/useMappingEditor.ts | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/web/src/containers/Main/MappingEditor/interfaces.ts b/web/src/containers/Main/MappingEditor/interfaces.ts index 97b03c58..7c93cb60 100644 --- a/web/src/containers/Main/MappingEditor/interfaces.ts +++ b/web/src/containers/Main/MappingEditor/interfaces.ts @@ -5,6 +5,8 @@ import { WithId } from "fhir-react/lib/services/fhir"; import { Mapping } from "shared/src/contrib/aidbox"; +export type EditorState = 'initial' | 'loading' | 'select' | 'ready' + interface CommonMappingEditorProps { onSave: (resource: WithId) => void; onChange: (resource: WithId) => void; @@ -24,7 +26,7 @@ export interface MappingEditorProps extends CommonMappingEditorProps { export interface MappingEditorErrorProps { error: any; setEditorSelect: () => void; - editorState: 'initial' | 'loading' | 'select' | 'ready'; + editorState: EditorState; } export interface MappingEditorSelectProps extends CommonMappingEditorProps { diff --git a/web/src/containers/Main/MappingEditor/useMappingEditor.ts b/web/src/containers/Main/MappingEditor/useMappingEditor.ts index be6c588d..06f2a6ac 100644 --- a/web/src/containers/Main/MappingEditor/useMappingEditor.ts +++ b/web/src/containers/Main/MappingEditor/useMappingEditor.ts @@ -19,12 +19,13 @@ import { mapSuccess } from 'fhir-react/lib/services/service'; import { Mapping } from 'shared/src/contrib/aidbox'; +import { EditorState } from './interfaces'; import { getMappings } from '../utils'; export function useMappingEditor(questionnaireRD: RemoteData, questionnaireResponseRD: RemoteData, mappingRD: RemoteData) { const [showModal, setShowModal] = useState(false); const [updatedResource, setUpdatedResource] = useState | undefined>(); - const [editorState, setEditorState] = useState<'initial' | 'loading' | 'select' | 'ready'>('initial') + const [editorState, setEditorState] = useState('initial') const setEditorInitial = () => setEditorState('initial') const setEditorLoading = () => setEditorState('loading') From 228db7861e78ab66defda3cf11f40acf69145674 Mon Sep 17 00:00:00 2001 From: nvim Date: Wed, 12 Jun 2024 08:49:05 +0200 Subject: [PATCH 09/16] WIP: Use Questionnaire to control state of the MappingEditor --- web/src/containers/Main/MappingEditor/index.tsx | 7 ++----- .../Main/MappingEditor/useMappingEditor.ts | 14 +++++++------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/web/src/containers/Main/MappingEditor/index.tsx b/web/src/containers/Main/MappingEditor/index.tsx index 6b7c3212..ae93a754 100644 --- a/web/src/containers/Main/MappingEditor/index.tsx +++ b/web/src/containers/Main/MappingEditor/index.tsx @@ -8,14 +8,11 @@ import { MappingEditorSelect } from './MappingEditorSelect'; import { useMappingEditor } from './useMappingEditor'; export function MappingEditor(props: MappingEditorProps) { - const { - mappingRD, - questionnaireRD, - questionnaireResponseRD } = props; + const { mappingRD, questionnaireRD } = props; const { mappingsRD, showModal, setShowModal, setUpdatedResource, updatedResource, editorState, - setEditorSelect } = useMappingEditor(questionnaireRD, questionnaireResponseRD, mappingRD); + setEditorSelect } = useMappingEditor(questionnaireRD, mappingRD); const mapEditorStateRender = { 'initial': <>Please, select/create Questionnaire resource, diff --git a/web/src/containers/Main/MappingEditor/useMappingEditor.ts b/web/src/containers/Main/MappingEditor/useMappingEditor.ts index 06f2a6ac..4b5964b0 100644 --- a/web/src/containers/Main/MappingEditor/useMappingEditor.ts +++ b/web/src/containers/Main/MappingEditor/useMappingEditor.ts @@ -1,4 +1,4 @@ -import { Bundle, Questionnaire, QuestionnaireResponse } from 'fhir/r4b'; +import { Bundle, Questionnaire } from 'fhir/r4b'; import { useEffect, useState } from 'react'; import { getFHIRResources as getAidboxFHIRResources } from 'aidbox-react/lib/services/fhir'; @@ -22,7 +22,7 @@ import { Mapping } from 'shared/src/contrib/aidbox'; import { EditorState } from './interfaces'; import { getMappings } from '../utils'; -export function useMappingEditor(questionnaireRD: RemoteData, questionnaireResponseRD: RemoteData, mappingRD: RemoteData) { +export function useMappingEditor(questionnaireRD: RemoteData, mappingRD: RemoteData) { const [showModal, setShowModal] = useState(false); const [updatedResource, setUpdatedResource] = useState | undefined>(); const [editorState, setEditorState] = useState('initial') @@ -33,18 +33,18 @@ export function useMappingEditor(questionnaireRD: RemoteData, que const setEditorReady = () => setEditorState('ready') useEffect(() => { - if (isNotAsked(questionnaireResponseRD)){ + if (isNotAsked(questionnaireRD)){ setEditorInitial(); } - if (isLoading(questionnaireResponseRD)) { + if (isLoading(questionnaireRD)) { setEditorLoading(); } - if (isFailure(questionnaireResponseRD)) { + if (isFailure(questionnaireRD)) { setEditorInitial(); } - if (isSuccess(questionnaireResponseRD)) { + if (isSuccess(questionnaireRD)) { if (isSuccess(mappingRD)) { setEditorReady(); } @@ -55,7 +55,7 @@ export function useMappingEditor(questionnaireRD: RemoteData, que setEditorSelect(); } } - }, [questionnaireResponseRD, mappingRD]); + }, [questionnaireRD, mappingRD]); const [mappingsRD] = useService(async () => { if (isSuccess(questionnaireRD)) { From 10ef6759f67e42b540daca27390b730a0a1635be Mon Sep 17 00:00:00 2001 From: nvim Date: Wed, 12 Jun 2024 15:10:18 +0200 Subject: [PATCH 10/16] Fix Bundle transaction view --- web/src/containers/Main/index.tsx | 58 ++++++++++++++++++------------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/web/src/containers/Main/index.tsx b/web/src/containers/Main/index.tsx index b140e0d2..e91be8a0 100644 --- a/web/src/containers/Main/index.tsx +++ b/web/src/containers/Main/index.tsx @@ -16,14 +16,12 @@ import { version } from 'web/src/version'; import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; import { isSuccess } from 'fhir-react/lib/libs/remoteData'; - import s from './Main.module.scss'; import { MappingEditor } from './MappingEditor'; import { QuestionnaireEditor } from './QuestionnaireEditor'; import { useFHIRMappingLanguage } from './useFHIRMappingLanguage'; import { useMain } from './useMain'; - export function Main() { const { questionnaireId } = useParams<{ questionnaireId: string }>(); const { @@ -35,7 +33,10 @@ export function Main() { extractRD, manager, } = useMain(questionnaireId!); - const { mapString, setMapString, mappingResult, fhirMappingLangMode, toggleMappingMode } = useFHIRMappingLanguage(isSuccess(questionnaireResponseRD) ? questionnaireResponseRD.data : undefined) + const { mapString, setMapString, mappingResult, fhirMappingLangMode, toggleMappingMode } = + useFHIRMappingLanguage( + isSuccess(questionnaireResponseRD) ? questionnaireResponseRD.data : undefined, + ); return ( <> @@ -68,8 +69,8 @@ export function Main() { title={ isSuccess(originalQuestionnaireRD) ? originalQuestionnaireRD.data.title || - originalQuestionnaireRD.data.name || - originalQuestionnaireRD.data.id + originalQuestionnaireRD.data.name || + originalQuestionnaireRD.data.id : '' } > @@ -91,36 +92,43 @@ export function Main() { key="fhir-mapping-language-editor" defaultLanguage="ruby" onChange={(value) => { - setMapString(value as string) + setMapString(value as string); }} value={mapString} options={{ formatOnPaste: true, formatOnType: true, - autoIndent: "full", + autoIndent: 'full', minimap: { - enabled: false - } + enabled: false, + }, }} /> - - - ) : ()} + ) : ( + + )} - {/* */} - + {fhirMappingLangMode ? ( + + ) : ( + + )} {isSuccess(extractRD) && ( - )} - - + + + + + + + + {fhirMappingLangMode ? ( + { + setMapString(value as string); + }} + value={mapString} + options={{ + formatOnPaste: true, + formatOnType: true, + autoIndent: 'full', + minimap: { + enabled: false, + }, + }} + /> + ) : ( + + )} + + + {fhirMappingLangMode ? ( + + ) : ( + + )} + {isSuccess(extractRD) && ( + + )} + + +
{`v${version}`}
diff --git a/yarn.lock b/yarn.lock index af1d96aa..e18ec564 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1903,6 +1903,11 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@juggle/resize-observer@^3.3.1": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60" + integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA== + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" @@ -3756,6 +3761,18 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.9.0: require-from-string "^2.0.2" uri-js "^4.2.2" +allotment@^1.20.2: + version "1.20.2" + resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.20.2.tgz#5ea3a630b3265479debb69156658244711f83843" + integrity sha512-TaCuHfYNcsJS9EPk04M7TlG5Rl3vbAdHeAyrTE9D5vbpzV+wxnRoUrulDbfnzaQcPIZKpHJNixDOoZNuzliKEA== + dependencies: + classnames "^2.3.0" + eventemitter3 "^5.0.0" + lodash.clamp "^4.0.0" + lodash.debounce "^4.0.0" + lodash.isequal "^4.5.0" + use-resize-observer "^9.0.0" + ansi-colors@^4.1.1: version "4.1.3" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b" @@ -4652,6 +4669,11 @@ classnames@*, classnames@^2.3.1: resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== +classnames@^2.3.0: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + clean-css@^5.2.2: version "5.3.2" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224" @@ -6468,7 +6490,7 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.4: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== -eventemitter3@^5.0.1: +eventemitter3@^5.0.0, eventemitter3@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== @@ -9226,7 +9248,12 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" -lodash.debounce@^4.0.8: +lodash.clamp@^4.0.0: + version "4.0.3" + resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa" + integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg== + +lodash.debounce@^4.0.0, lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== @@ -9236,6 +9263,11 @@ lodash.get@~4.4.2: resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" integrity sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ== +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== + lodash.ismatch@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37" @@ -13509,6 +13541,13 @@ use-isomorphic-layout-effect@^1.1.2: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== +use-resize-observer@^9.0.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c" + integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow== + dependencies: + "@juggle/resize-observer" "^3.3.1" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" From 4a7199adc0123f87e2af071232ef1519a9dcfe8f Mon Sep 17 00:00:00 2001 From: nvim Date: Thu, 13 Jun 2024 09:41:34 +0200 Subject: [PATCH 12/16] Remove Expandable Row and Element --- .../ExpandableElement.module.scss | 74 ------------------- .../components/ExpandableElement/index.tsx | 49 ------------ .../ExpandableRow/ExpandableRow.module.scss | 16 ---- web/src/components/ExpandableRow/index.tsx | 20 ----- 4 files changed, 159 deletions(-) delete mode 100644 web/src/components/ExpandableElement/ExpandableElement.module.scss delete mode 100644 web/src/components/ExpandableElement/index.tsx delete mode 100644 web/src/components/ExpandableRow/ExpandableRow.module.scss delete mode 100644 web/src/components/ExpandableRow/index.tsx diff --git a/web/src/components/ExpandableElement/ExpandableElement.module.scss b/web/src/components/ExpandableElement/ExpandableElement.module.scss deleted file mode 100644 index 1ecf5ddb..00000000 --- a/web/src/components/ExpandableElement/ExpandableElement.module.scss +++ /dev/null @@ -1,74 +0,0 @@ -@import 'src/styles/colors'; - -.title { - line-height: 32px; - margin-bottom: 3px; -} - -.container { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - transition: all 0.2s; - overflow-x: auto; - - &:hover .expandButton { - opacity: 1; - } - - &:nth-child(even) { - background-color: $base-surface-color; - } - - &:nth-child(odd) { - background-color: $base-light-color; - } -} - -.content { - flex: 1; - padding: 20px; - overflow-y: auto; -} - -.boxHeader { - position: relative; -} - -.expandButton { - position: absolute; - right: -20px; - top: 50%; - transform: translate(0px, -50%); - background-color: $primary-color; - color: $base-light-color; - font-size: 12px; - line-height: 1; - padding: 4px 18px 4px 8px; - border-radius: 1px 0px 0px 1px; - cursor: pointer; - opacity: 0; - transition: all 0.2s; - - &::after { - content: ''; - position: absolute; - width: 4px; - height: 4px; - top: calc(50% - 1px); - transform: rotate(45deg) translate(0px, -50%); - right: 8px; - border-top: 2px solid $base-light-color; - border-right: 2px solid $base-light-color; - } -} - -.expanded { - &::after { - border-top: 0px solid $base-light-color; - border-right: 0px solid $base-light-color; - border-bottom: 2px solid $base-light-color; - border-left: 2px solid $base-light-color; - } -} diff --git a/web/src/components/ExpandableElement/index.tsx b/web/src/components/ExpandableElement/index.tsx deleted file mode 100644 index d5d8716b..00000000 --- a/web/src/components/ExpandableElement/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import classNames from 'classnames'; -import { useRef, useState } from 'react'; - -import s from './ExpandableElement.module.scss'; - -interface ExpandableElementProps extends React.HTMLAttributes { - title?: string; -} - -export function ExpandableElement({ title, className, children }: ExpandableElementProps) { - const [expanded, setExpanded] = useState(false); - const headerRef = useRef(null); - - return ( -
-
-
-

{title}

- {expanded ? ( -
{ - if (e.target === headerRef.current) { - setExpanded((f) => !f); - } - }} - > - {expanded ? 'collapse' : 'expand'} -
- ) : ( -
{ - if (e.target === headerRef.current) { - setExpanded((f) => !f); - } - }} - > - {expanded ? 'collapse' : 'expand'} -
- )} -
- {children} -
-
- ); -} diff --git a/web/src/components/ExpandableRow/ExpandableRow.module.scss b/web/src/components/ExpandableRow/ExpandableRow.module.scss deleted file mode 100644 index a7964a91..00000000 --- a/web/src/components/ExpandableRow/ExpandableRow.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -.arrow { - position: absolute; - left: 0; - cursor: pointer; - z-index: 1; - padding: 0; - margin: 0; - background: 0; - outline: none; - border: 0; - height: 24px; - width: 24px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/web/src/components/ExpandableRow/index.tsx b/web/src/components/ExpandableRow/index.tsx deleted file mode 100644 index 544751b8..00000000 --- a/web/src/components/ExpandableRow/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useState } from 'react'; - -import s from './ExpandableRow.module.scss'; -import { Arrow } from '../Icon/Arrow'; - -interface Props extends React.HTMLAttributes {} - -export function ExpandableRow(props: Props) { - const { className, children } = props; - const [expanded, setExpanded] = useState(false); - - return ( -
- - {children} -
- ); -} From d929619f74c6d2d424ed7359413c018591c49b7c Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Mon, 17 Jun 2024 12:15:17 +1000 Subject: [PATCH 13/16] Fix style --- web/src/styles/fonts.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/styles/fonts.scss b/web/src/styles/fonts.scss index 13dbe65b..351313b5 100644 --- a/web/src/styles/fonts.scss +++ b/web/src/styles/fonts.scss @@ -1,5 +1,5 @@ @import 'src/styles/colors'; -@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css); +@import url('https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css'); @mixin base-text-bold { font-weight: 600; From 7de1056ce601043fb459d6ca4f8a735c840d2540 Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Mon, 17 Jun 2024 12:16:23 +1000 Subject: [PATCH 14/16] Use @beda.software/remote-data and @beda.software/fhir-react --- web/package.json | 3 ++- .../components/LaunchContextEditor/index.tsx | 2 +- web/src/components/ModalExpression/hooks.ts | 6 +++--- web/src/components/ModalExpression/index.tsx | 2 +- .../components/reference/hooks.ts | 5 ++--- web/src/components/QRFormWrapper/index.tsx | 4 ++-- web/src/components/RenderRemoteData.tsx | 4 ++-- web/src/components/ResourceSelect/index.tsx | 7 +++---- .../components/SourceQueryDebugModal/hooks.ts | 8 +++----- .../SourceQueryDebugModal/index.tsx | 2 +- web/src/containers/App/index.tsx | 5 ++--- .../MappingEditorError/index.tsx | 2 +- .../MappingEditorSelect/index.tsx | 5 ++--- .../containers/Main/MappingEditor/index.tsx | 2 +- .../Main/MappingEditor/useMappingEditor.ts | 7 +++---- web/src/containers/Main/PromptForm/index.tsx | 2 +- .../Main/QuestionnaireEditor/index.tsx | 4 ++-- .../useQuestionnaireEditor.ts | 6 +++--- web/src/containers/Main/index.tsx | 5 +++-- .../containers/Main/useFHIRMappingLanguage.ts | 2 +- web/src/containers/Main/useMain.ts | 11 ++++++----- web/src/services/auth.ts | 6 +++--- web/src/services/builder.ts | 2 +- web/src/services/extract.ts | 2 +- web/src/services/fhir.ts | 19 +++++++++++++++++++ web/src/services/fhirmapping.ts | 2 +- web/src/services/initialize.ts | 3 --- web/src/services/questionnaire.ts | 8 ++++---- 28 files changed, 74 insertions(+), 62 deletions(-) create mode 100644 web/src/services/fhir.ts diff --git a/web/package.json b/web/package.json index 9b86aab9..31795912 100644 --- a/web/package.json +++ b/web/package.json @@ -4,6 +4,8 @@ "version": "0.3.1", "private": true, "dependencies": { + "@beda.software/fhir-react": "^1.8.6", + "@beda.software/remote-data": "^1.1.3", "@codemirror/commands": "^6.2.4", "@codemirror/language": "^6.9.0", "@codemirror/legacy-modes": "^6.3.3", @@ -36,7 +38,6 @@ "babel-loader": "8.1.0", "babel-plugin-import": "^1.13.3", "classnames": "^2.3.1", - "fhir-react": "https://github.com/beda-software/fhir-react.git", "fhirpath": "^3.5.0", "final-form": "^4.20.4", "final-form-arrays": "^3.0.2", diff --git a/web/src/components/LaunchContextEditor/index.tsx b/web/src/components/LaunchContextEditor/index.tsx index f2628f92..841d3626 100644 --- a/web/src/components/LaunchContextEditor/index.tsx +++ b/web/src/components/LaunchContextEditor/index.tsx @@ -3,7 +3,7 @@ import { FhirResource, Parameters, ParametersParameter, Questionnaire } from 'fh import { useMemo, useState } from 'react'; import { SingleValue } from 'react-select'; -import { success } from 'fhir-react/lib/libs/remoteData'; +import { success } from '@beda.software/remote-data'; import { groupLaunchContextParams } from './groupLaunchContextParams'; import s from './LaunchContextEditor.module.scss'; diff --git a/web/src/components/ModalExpression/hooks.ts b/web/src/components/ModalExpression/hooks.ts index d8194f5f..416c8bef 100644 --- a/web/src/components/ModalExpression/hooks.ts +++ b/web/src/components/ModalExpression/hooks.ts @@ -5,9 +5,9 @@ import { extractParameterName } from 'web/src/components/ModalExpression/utils'; import { ExpressionResultOutput } from 'web/src/containers/Main/types'; import YAML, { visitor } from 'yaml'; -import { useService } from 'fhir-react/lib/hooks/service'; -import { isSuccess } from 'fhir-react/lib/libs/remoteData'; -import { service } from 'fhir-react/lib/services/service'; +import { useService } from '@beda.software/fhir-react'; +import { isSuccess } from '@beda.software/remote-data'; +import { service } from 'src/services/fhir'; import { QuestionnaireResponse } from 'shared/src/contrib/aidbox'; diff --git a/web/src/components/ModalExpression/index.tsx b/web/src/components/ModalExpression/index.tsx index 550cab02..11b3aac4 100644 --- a/web/src/components/ModalExpression/index.tsx +++ b/web/src/components/ModalExpression/index.tsx @@ -5,7 +5,7 @@ import { InputField } from 'web/src/components/InputField'; import { useExpressionModal } from 'web/src/components/ModalExpression/hooks'; import { ResourceCodeDisplay } from 'web/src/components/ResourceCodeDisplay'; -import { isSuccess, RemoteData } from 'fhir-react/lib/libs/remoteData'; +import { isSuccess, RemoteData } from '@beda.software/remote-data'; import s from './ModalExpression.module.scss'; import { ModalExpressionProps } from './types'; diff --git a/web/src/components/QRFormWrapper/components/reference/hooks.ts b/web/src/components/QRFormWrapper/components/reference/hooks.ts index 967b77e7..9608f12c 100644 --- a/web/src/components/QRFormWrapper/components/reference/hooks.ts +++ b/web/src/components/QRFormWrapper/components/reference/hooks.ts @@ -6,9 +6,8 @@ import fhirpath from 'fhirpath'; import { ActionMeta, MultiValue, SingleValue } from 'react-select'; import { loadResourceOptions } from 'web/src/services/questionnaire'; -import { isSuccess } from 'fhir-react/lib/libs/remoteData'; -import { ResourcesMap } from 'fhir-react/lib/services/fhir'; -import { buildQueryParams } from 'fhir-react/lib/services/instance'; +import { isSuccess, buildQueryParams } from '@beda.software/remote-data'; +import { ResourcesMap } from '@beda.software/fhir-react'; import { QuestionnaireItemAnswerOption, diff --git a/web/src/components/QRFormWrapper/index.tsx b/web/src/components/QRFormWrapper/index.tsx index 7dc80a70..69c4cbf3 100644 --- a/web/src/components/QRFormWrapper/index.tsx +++ b/web/src/components/QRFormWrapper/index.tsx @@ -14,8 +14,8 @@ import { useFormContext } from 'react-hook-form'; import { RenderRemoteData } from 'web/src/components/RenderRemoteData'; import { QRFormWrapperProps } from 'web/src/containers/Main/types'; -import { sequenceMap } from 'fhir-react/lib/services/service'; -import { formatError } from 'fhir-react/lib/utils/error'; +import { sequenceMap } from '@beda.software/remote-data'; +import { formatError } from '@beda.software/fhir-react'; import { QuestionnaireResponse as FCEQuestionnaireResponse } from 'shared/src/contrib/aidbox'; diff --git a/web/src/components/RenderRemoteData.tsx b/web/src/components/RenderRemoteData.tsx index 39f8a92b..3d22ae79 100644 --- a/web/src/components/RenderRemoteData.tsx +++ b/web/src/components/RenderRemoteData.tsx @@ -6,8 +6,8 @@ import { isNotAsked, isSuccess, RemoteData, -} from 'fhir-react/lib/libs/remoteData'; -import { formatError } from 'fhir-react/lib/utils/error'; +} from '@beda.software/remote-data'; +import { formatError } from '@beda.software/fhir-react'; interface RenderRemoteDataProps { remoteData: RemoteData; diff --git a/web/src/components/ResourceSelect/index.tsx b/web/src/components/ResourceSelect/index.tsx index 5037ad93..b5c50356 100644 --- a/web/src/components/ResourceSelect/index.tsx +++ b/web/src/components/ResourceSelect/index.tsx @@ -4,10 +4,9 @@ import _ from 'lodash'; import { useCallback } from 'react'; import { MultiValue, SingleValue } from 'react-select'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { isSuccess, RemoteData } from 'fhir-react/lib/libs/remoteData'; -import { getFHIRResources, WithId } from 'fhir-react/lib/services/fhir'; -import { mapSuccess } from 'fhir-react/lib/services/service'; +import { RenderRemoteData, WithId} from '@beda.software/fhir-react'; +import { getFHIRResources } from 'src/services/fhir'; +import { mapSuccess, isSuccess, RemoteData } from '@beda.software/remote-data'; import s from './ResourceSelect.module.scss'; import { AsyncSelect } from '../Select'; diff --git a/web/src/components/SourceQueryDebugModal/hooks.ts b/web/src/components/SourceQueryDebugModal/hooks.ts index 40743129..b9178268 100644 --- a/web/src/components/SourceQueryDebugModal/hooks.ts +++ b/web/src/components/SourceQueryDebugModal/hooks.ts @@ -3,11 +3,9 @@ import * as _ from 'lodash'; import { useCallback, useState } from 'react'; import { toast } from 'react-toastify'; -import { useService } from 'fhir-react/lib/hooks/service'; -import { isFailure, success, isSuccess } from 'fhir-react/lib/libs/remoteData'; -import { saveFHIRResource } from 'fhir-react/lib/services/fhir'; -import { mapSuccess, service } from 'fhir-react/lib/services/service'; -import { formatError } from 'fhir-react/lib/utils/error'; +import { useService, formatError } from '@beda.software/fhir-react'; +import { isFailure, success, isSuccess, mapSuccess } from '@beda.software/remote-data'; +import { saveFHIRResource, service } from 'src/services/fhir'; import { Props } from './types'; diff --git a/web/src/components/SourceQueryDebugModal/index.tsx b/web/src/components/SourceQueryDebugModal/index.tsx index 043f0ee2..215127ab 100644 --- a/web/src/components/SourceQueryDebugModal/index.tsx +++ b/web/src/components/SourceQueryDebugModal/index.tsx @@ -1,7 +1,7 @@ import { Button } from 'web/src/components/Button'; import { CodeEditor } from 'web/src/components/CodeEditor'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; +import { RenderRemoteData } from '@beda.software/fhir-react'; import { useSourceQueryDebugModal } from './hooks'; import s from './SourceQueryDebugModal.module.scss'; diff --git a/web/src/containers/App/index.tsx b/web/src/containers/App/index.tsx index 7f431b05..0eb16d8a 100644 --- a/web/src/containers/App/index.tsx +++ b/web/src/containers/App/index.tsx @@ -3,9 +3,8 @@ import { useEffect, useRef } from 'react'; import { Route, Routes, useLocation, Navigate } from 'react-router-dom'; import { setData } from 'web/src/services/localStorage'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { useService } from 'fhir-react/lib/hooks/service'; -import { success } from 'fhir-react/lib/libs/remoteData'; +import { RenderRemoteData, useService } from '@beda.software/fhir-react'; +import { success } from '@beda.software/remote-data'; import { User } from 'shared/src/contrib/aidbox'; diff --git a/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx index 1716a0f8..4eb748f4 100644 --- a/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx +++ b/web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx @@ -1,6 +1,6 @@ import { Button } from 'web/src/components/Button'; -import { formatError } from 'fhir-react/lib/utils/error'; +import { formatError } from '@beda.software/fhir-react'; import { MappingEditorErrorProps } from '../interfaces'; import s from '../MappingEditor.module.scss'; diff --git a/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx index 54c50d18..ec792626 100644 --- a/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx +++ b/web/src/containers/Main/MappingEditor/MappingEditorSelect/index.tsx @@ -4,9 +4,8 @@ import { Button } from 'web/src/components/Button'; import { ModalCreateMapper } from 'web/src/components/ModalCreateMapper'; import { Select } from 'web/src/components/Select'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { isFailure, isSuccess } from 'fhir-react/lib/libs/remoteData'; -import { formatError } from 'fhir-react/lib/utils/error'; +import { RenderRemoteData, formatError } from '@beda.software/fhir-react'; +import { isFailure, isSuccess } from '@beda.software/remote-data'; import formStyles from '../../../../components/QRFormWrapper/QuestionnaireResponseForm.module.scss'; import { PromptForm } from '../../PromptForm'; diff --git a/web/src/containers/Main/MappingEditor/index.tsx b/web/src/containers/Main/MappingEditor/index.tsx index ef0b5625..367b426c 100644 --- a/web/src/containers/Main/MappingEditor/index.tsx +++ b/web/src/containers/Main/MappingEditor/index.tsx @@ -1,4 +1,4 @@ -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; +import { RenderRemoteData } from '@beda.software/fhir-react'; import { MappingEditorProps } from './interfaces'; import s from './MappingEditor.module.scss'; diff --git a/web/src/containers/Main/MappingEditor/useMappingEditor.ts b/web/src/containers/Main/MappingEditor/useMappingEditor.ts index 5bf2414f..61ac2dad 100644 --- a/web/src/containers/Main/MappingEditor/useMappingEditor.ts +++ b/web/src/containers/Main/MappingEditor/useMappingEditor.ts @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import { getFHIRResources as getAidboxFHIRResources } from 'aidbox-react/lib/services/fhir'; -import { useService } from 'fhir-react/lib/hooks/service'; +import { useService, WithId, extractBundleResources} from '@beda.software/fhir-react'; import { RemoteData, RemoteDataResult, @@ -13,9 +13,8 @@ import { isNotAsked, isSuccess, success, -} from 'fhir-react/lib/libs/remoteData'; -import { WithId, extractBundleResources } from 'fhir-react/lib/services/fhir'; -import { mapSuccess } from 'fhir-react/lib/services/service'; + mapSuccess, +} from '@beda.software/remote-data'; import { Mapping } from 'shared/src/contrib/aidbox'; diff --git a/web/src/containers/Main/PromptForm/index.tsx b/web/src/containers/Main/PromptForm/index.tsx index adf6c6b3..962cf38f 100644 --- a/web/src/containers/Main/PromptForm/index.tsx +++ b/web/src/containers/Main/PromptForm/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Field, Form } from 'react-final-form'; import { Button } from 'web/src/components/Button'; -import { RemoteDataResult, isFailure, isSuccess } from 'fhir-react/lib/libs/remoteData'; +import { RemoteDataResult, isFailure, isSuccess } from '@beda.software/remote-data'; import s from '../../../components/QRFormWrapper/QuestionnaireResponseForm.module.scss'; diff --git a/web/src/containers/Main/QuestionnaireEditor/index.tsx b/web/src/containers/Main/QuestionnaireEditor/index.tsx index 569d76d5..1729ede3 100644 --- a/web/src/containers/Main/QuestionnaireEditor/index.tsx +++ b/web/src/containers/Main/QuestionnaireEditor/index.tsx @@ -6,8 +6,8 @@ import { Button } from 'web/src/components/Button'; import { ResourceCodeEditor } from 'web/src/components/ResourceCodeEditor'; import { Select } from 'web/src/components/Select'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { RemoteData, RemoteDataResult, isFailure, isLoading } from 'fhir-react/lib/libs/remoteData'; +import { RenderRemoteData } from '@beda.software/fhir-react'; +import { RemoteData, RemoteDataResult, isFailure, isLoading } from '@beda.software/remote-data'; import s from './QuestionnaireEditor.module.scss'; import { useQuestionnaireEditor } from './useQuestionnaireEditor'; diff --git a/web/src/containers/Main/QuestionnaireEditor/useQuestionnaireEditor.ts b/web/src/containers/Main/QuestionnaireEditor/useQuestionnaireEditor.ts index c5409736..e5a3656e 100644 --- a/web/src/containers/Main/QuestionnaireEditor/useQuestionnaireEditor.ts +++ b/web/src/containers/Main/QuestionnaireEditor/useQuestionnaireEditor.ts @@ -1,8 +1,8 @@ import { Questionnaire } from 'fhir/r4b'; -import { useService } from 'fhir-react/lib/hooks/service'; -import { extractBundleResources, getFHIRResources } from 'fhir-react/lib/services/fhir'; -import { mapSuccess } from 'fhir-react/lib/services/service'; +import { useService, extractBundleResources } from '@beda.software/fhir-react'; +import { getFHIRResources } from 'src/services/fhir'; +import { mapSuccess } from '@beda.software/remote-data'; export function useQuestionnaireEditor() { const [questionnairesRD] = useService(async () => diff --git a/web/src/containers/Main/index.tsx b/web/src/containers/Main/index.tsx index bd704dce..75735429 100644 --- a/web/src/containers/Main/index.tsx +++ b/web/src/containers/Main/index.tsx @@ -12,8 +12,9 @@ import 'react-toastify/dist/ReactToastify.css'; import { ResourceCodeDisplay } from 'web/src/components/ResourceCodeDisplay'; import { version } from 'web/src/version'; -import { RenderRemoteData } from 'fhir-react/lib/components/RenderRemoteData'; -import { isSuccess } from 'fhir-react/lib/libs/remoteData'; +import { RenderRemoteData } from '@beda.software/fhir-react'; +import { isSuccess } from '@beda.software/remote-data'; + import { FormRenderContext } from './context'; import s from './Main.module.scss'; diff --git a/web/src/containers/Main/useFHIRMappingLanguage.ts b/web/src/containers/Main/useFHIRMappingLanguage.ts index dc0345d4..fd8ff7b4 100644 --- a/web/src/containers/Main/useFHIRMappingLanguage.ts +++ b/web/src/containers/Main/useFHIRMappingLanguage.ts @@ -2,7 +2,7 @@ import { Bundle, QuestionnaireResponse, StructureMap } from 'fhir/r4b'; import { useCallback, useEffect, useState } from 'react'; import { convert, createStructureMap, transform } from 'web/src/services/fhirmapping'; -import { isSuccess } from 'fhir-react/lib/libs/remoteData'; +import { isSuccess } from '@beda.software/remote-data'; export function useFHIRMappingLanguage(questionnaireResponse: QuestionnaireResponse | undefined) { const [fhirMappingLangMode, setFhirMappingLangMode] = useState(false); diff --git a/web/src/containers/Main/useMain.ts b/web/src/containers/Main/useMain.ts index 2a4a41f6..26435146 100644 --- a/web/src/containers/Main/useMain.ts +++ b/web/src/containers/Main/useMain.ts @@ -18,7 +18,7 @@ import { saveFHIRResource as saveAidboxFHIRResource, } from 'aidbox-react/lib/services/fhir'; -import { useService } from 'fhir-react/lib/hooks/service'; +import { useService, WithId } from '@beda.software/fhir-react'; import { RemoteData, RemoteDataResult, @@ -27,10 +27,11 @@ import { isSuccess, notAsked, success, -} from 'fhir-react/lib/libs/remoteData'; -import { WithId, saveFHIRResource } from 'fhir-react/lib/services/fhir'; -import { service } from 'fhir-react/lib/services/service'; -import { formatError } from 'fhir-react/lib/utils/error'; +} from '@beda.software/remote-data'; +// import { WithId, saveFHIRResource } from 'fhir-react/lib/services/fhir'; +// import { service } from 'fhir-react/lib/services/service'; +import {service, saveFHIRResource} from 'src/services/fhir'; +import { formatError } from '@beda.software/fhir-react'; import { Mapping } from 'shared/src/contrib/aidbox'; diff --git a/web/src/services/auth.ts b/web/src/services/auth.ts index 254c1db3..369feb34 100644 --- a/web/src/services/auth.ts +++ b/web/src/services/auth.ts @@ -4,12 +4,12 @@ import { } from 'aidbox-react/lib/services/instance'; import { service } from 'aidbox-react/lib/services/service'; -import { isFailure, success } from 'fhir-react/lib/libs/remoteData'; +import { isFailure, success } from '@beda.software/remote-data'; import { resetInstanceToken as resetFHIRInstanceToken, setInstanceToken as setFHIRInstanceToken, -} from 'fhir-react/lib/services/instance'; -import { extractErrorCode } from 'fhir-react/lib/utils/error'; +} from './fhir'; +import { extractErrorCode } from '@beda.software/fhir-react'; import { User } from 'shared/src/contrib/aidbox'; diff --git a/web/src/services/builder.ts b/web/src/services/builder.ts index 90ab4774..2b6ff36d 100644 --- a/web/src/services/builder.ts +++ b/web/src/services/builder.ts @@ -1,4 +1,4 @@ -import { service } from 'fhir-react'; +import { service } from './fhir'; import { aiQuestionnaireBuilderUrl } from 'shared/src/constants'; diff --git a/web/src/services/extract.ts b/web/src/services/extract.ts index 15d523aa..e9f55e07 100644 --- a/web/src/services/extract.ts +++ b/web/src/services/extract.ts @@ -1,7 +1,7 @@ import { Bundle, Questionnaire, QuestionnaireResponse, Parameters, FhirResource } from 'fhir/r4b'; import _ from 'lodash'; -import { service } from 'fhir-react/lib/services/service'; +import { service } from './fhir'; import { Mapping } from 'shared/src/contrib/aidbox'; diff --git a/web/src/services/fhir.ts b/web/src/services/fhir.ts new file mode 100644 index 00000000..6fab21ef --- /dev/null +++ b/web/src/services/fhir.ts @@ -0,0 +1,19 @@ +import { initServices } from '@beda.software/fhir-react'; + +import { baseURL } from 'shared/src/constants'; + +export const { + axiosInstance, + service, + setInstanceToken, + resetInstanceToken, + getFHIRResource, + getFHIRResources, + getAllFHIRResources, + saveFHIRResource, + updateFHIRResource, + createFHIRResource, + forceDeleteFHIRResource, + patchFHIRResource, + setInstanceBaseURL, +} = initServices(baseURL + '/fhir'); diff --git a/web/src/services/fhirmapping.ts b/web/src/services/fhirmapping.ts index 2b9c1f55..81fe1d56 100644 --- a/web/src/services/fhirmapping.ts +++ b/web/src/services/fhirmapping.ts @@ -1,6 +1,6 @@ import { Bundle, QuestionnaireResponse, StructureMap } from 'fhir/r4b'; -import { service } from 'fhir-react/lib/services/service'; +import { service } from './fhir'; import { fhirMappingLanguageUrl } from 'shared/src/constants'; diff --git a/web/src/services/initialize.ts b/web/src/services/initialize.ts index dcc348c1..04bd563d 100644 --- a/web/src/services/initialize.ts +++ b/web/src/services/initialize.ts @@ -1,10 +1,7 @@ import { setInstanceBaseURL as setAidboxInstanceBaseURL } from 'aidbox-react/lib/services/instance'; -import { setInstanceBaseURL as setFHIRInstanceBaseURL } from 'fhir-react/lib/services/instance'; - import { baseURL, juteURL, fhirpathMappingUrl } from 'shared/src/constants'; setAidboxInstanceBaseURL(baseURL); -setFHIRInstanceBaseURL(`${baseURL}/fhir`); export { baseURL, juteURL, fhirpathMappingUrl }; diff --git a/web/src/services/questionnaire.ts b/web/src/services/questionnaire.ts index d6c7dae1..e768d7eb 100644 --- a/web/src/services/questionnaire.ts +++ b/web/src/services/questionnaire.ts @@ -1,11 +1,11 @@ import { extractBundleResources, - getFHIRResources, getReference, ResourcesMap, -} from 'fhir-react/lib/services/fhir'; -import { SearchParams } from 'fhir-react/lib/services/search'; -import { mapSuccess } from 'fhir-react/lib/services/service'; +} from '@beda.software/fhir-react'; +import { getFHIRResources } from './fhir'; +import { SearchParams } from '@beda.software/fhir-react'; +import { mapSuccess } from '@beda.software/remote-data'; import { Resource } from 'shared/src/contrib/aidbox'; From 9324fa2e89fed41aa5aa589996343230f346c839 Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Tue, 18 Jun 2024 10:24:16 +1000 Subject: [PATCH 15/16] Confguration refactoring --- shared/src/constants.ts | 33 ++++++++++++++++++++------------- web/src/services/auth.ts | 2 ++ web/src/services/builder.ts | 6 +++--- web/src/services/fhir.ts | 4 ++-- web/src/services/fhirmapping.ts | 8 ++++---- web/src/services/initialize.ts | 3 ++- 6 files changed, 33 insertions(+), 23 deletions(-) diff --git a/shared/src/constants.ts b/shared/src/constants.ts index 30777c40..77e7a8de 100644 --- a/shared/src/constants.ts +++ b/shared/src/constants.ts @@ -1,14 +1,21 @@ -export const baseURL = - (window as any).BASE_URL === '{{BASE_URL}}' - ? 'http://localhost:8080/' - : (window as any).BASE_URL; -export const juteURL = - (window as any).JUTE_URL === '{{JUTE_URL}}' - ? 'http://localhost:8099/' - : (window as any).JUTE_URL; +const envs = { + baseURL: ['BASE_URL', 'http://localhost:8080'], + juteURL: ['JUTE_URL', 'http://localhost:8099'], + aiQuestionnaireBuilderUrl: ['AI_BUILDER_URL', 'http://localhost:3002'], + fhirpathMappingUrl: ['FHIRPATHMAPPING_URL', 'http://localhost:8091'], + fhirMappingLanguageUrl: ['FHIRMAPPING_URL','http://localhost:8084/matchboxv3/fhir'] +} -export const aiQuestionnaireBuilderUrl = 'https://builder.emr.beda.software'; -// export const aiQuestionnaireBuilderUrl = 'http://localhost:3002'; -export const fhirpathMappingUrl = 'https://fhirpathmapper.emr.beda.software'; -// export const fhirpathMappingUrl = 'http://localhost:8091'; -export const fhirMappingLanguageUrl = 'http://localhost:8084/matchboxv3/fhir'; +export const configuration:Record = {} as any; + +const globalConfig = (window as any) + +Object.keys(envs).forEach((key) => { + const [globalKey,defaultValue] = envs[key]; + if(globalConfig[globalKey] == `{{${globalKey}}}`){ + configuration[key] = defaultValue; + } else { + configuration[key] = globalConfig[globalKey]; + } +}) +console.log(configuration) diff --git a/web/src/services/auth.ts b/web/src/services/auth.ts index 369feb34..b612e66e 100644 --- a/web/src/services/auth.ts +++ b/web/src/services/auth.ts @@ -61,6 +61,8 @@ export function getAuthorizeUrl(clientId: string, state?: OAuthState) { connection: { baseUrl }, } = getData(); + console.log(baseUrl); + return `${baseUrl}/auth/authorize?client_id=${clientId}&response_type=token${stateStr}`; } diff --git a/web/src/services/builder.ts b/web/src/services/builder.ts index 2b6ff36d..00dab423 100644 --- a/web/src/services/builder.ts +++ b/web/src/services/builder.ts @@ -1,6 +1,6 @@ import { service } from './fhir'; -import { aiQuestionnaireBuilderUrl } from 'shared/src/constants'; +import { configuration } from 'shared/src/constants'; import { getToken } from './auth'; @@ -8,7 +8,7 @@ export async function generateQuestionnaireService(prompt: string, questionnaire const appToken = getToken(); return await service({ - baseURL: aiQuestionnaireBuilderUrl, + baseURL: configuration.aiQuestionnaireBuilderUrl, url: `/questionnaire`, method: 'POST', data: { prompt: prompt, questionnaire }, @@ -22,7 +22,7 @@ export async function generateMappingService(prompt: string, questionnaire: stri const appToken = getToken(); return await service({ - baseURL: aiQuestionnaireBuilderUrl, + baseURL: configuration.aiQuestionnaireBuilderUrl, url: `/mapper`, method: 'POST', data: { prompt: prompt, questionnaire }, diff --git a/web/src/services/fhir.ts b/web/src/services/fhir.ts index 6fab21ef..f4fce631 100644 --- a/web/src/services/fhir.ts +++ b/web/src/services/fhir.ts @@ -1,6 +1,6 @@ import { initServices } from '@beda.software/fhir-react'; -import { baseURL } from 'shared/src/constants'; +import { configuration } from 'shared/src/constants'; export const { axiosInstance, @@ -16,4 +16,4 @@ export const { forceDeleteFHIRResource, patchFHIRResource, setInstanceBaseURL, -} = initServices(baseURL + '/fhir'); +} = initServices(configuration.baseURL + '/fhir'); diff --git a/web/src/services/fhirmapping.ts b/web/src/services/fhirmapping.ts index 81fe1d56..33654cca 100644 --- a/web/src/services/fhirmapping.ts +++ b/web/src/services/fhirmapping.ts @@ -2,7 +2,7 @@ import { Bundle, QuestionnaireResponse, StructureMap } from 'fhir/r4b'; import { service } from './fhir'; -import { fhirMappingLanguageUrl } from 'shared/src/constants'; +import { configuration } from 'shared/src/constants'; const CONTENT_TYPE_FHIR_MAPPING = 'text/fhir-mapping'; const CONTENT_TYPE_FHIR_JSON = 'application/fhir+json'; @@ -10,7 +10,7 @@ const ACCEPT_FHIR_JSON = 'application/fhir+json'; export async function convert({ mapString }: { mapString: string }) { return await service({ - baseURL: fhirMappingLanguageUrl, + baseURL: configuration.fhirMappingLanguageUrl, url: `/StructureMap/$convert`, method: 'POST', data: mapString, @@ -22,7 +22,7 @@ export async function convert({ mapString }: { mapString: string }) { export async function createStructureMap({ structureMap }: { structureMap: StructureMap }) { return await service({ - baseURL: fhirMappingLanguageUrl, + baseURL: configuration.fhirMappingLanguageUrl, url: `/StructureMap`, method: 'POST', data: structureMap, @@ -37,7 +37,7 @@ export async function transform({ questionnaireResponse: QuestionnaireResponse; }) { return await service({ - baseURL: fhirMappingLanguageUrl, + baseURL: configuration.fhirMappingLanguageUrl, url: `/StructureMap/$transform`, method: 'POST', data: questionnaireResponse, diff --git a/web/src/services/initialize.ts b/web/src/services/initialize.ts index 04bd563d..6c098715 100644 --- a/web/src/services/initialize.ts +++ b/web/src/services/initialize.ts @@ -1,6 +1,7 @@ import { setInstanceBaseURL as setAidboxInstanceBaseURL } from 'aidbox-react/lib/services/instance'; -import { baseURL, juteURL, fhirpathMappingUrl } from 'shared/src/constants'; +import { configuration } from 'shared/src/constants'; +const { baseURL, juteURL, fhirpathMappingUrl } = configuration; setAidboxInstanceBaseURL(baseURL); From 4a51eead5cbb5d6f2adb3af9269d38e26b6e5786 Mon Sep 17 00:00:00 2001 From: Ilya Beda Date: Tue, 18 Jun 2024 10:59:07 +1000 Subject: [PATCH 16/16] Move assemble and populate into services provided by context --- web/src/containers/Main/context.ts | 12 ++++++++++++ web/src/containers/Main/useMain.ts | 28 +++++++++------------------- web/src/services/sdc.ts | 20 ++++++++++++++++++++ 3 files changed, 41 insertions(+), 19 deletions(-) create mode 100644 web/src/services/sdc.ts diff --git a/web/src/containers/Main/context.ts b/web/src/containers/Main/context.ts index 8f81abf3..c91f4178 100644 --- a/web/src/containers/Main/context.ts +++ b/web/src/containers/Main/context.ts @@ -1,6 +1,18 @@ import { createContext } from 'react'; import { QRFormWrapper } from 'web/src/components/QRFormWrapper'; +import { RemoteDataResult } from '@beda.software/remote-data'; +import { Parameters, Questionnaire, QuestionnaireResponse } from "fhir/r4b"; import { QRFWrapper } from './types'; +import { assemble, populate } from 'src/services/sdc'; + +type AssembleService = (qId:string) => Promise> +type PopulateService = (launchContext:Parameters) => Promise> + +interface SDCContextType { + assemble: AssembleService + populate: PopulateService +} export const FormRenderContext = createContext(QRFormWrapper); +export const SDCContext = createContext({ assemble, populate }) diff --git a/web/src/containers/Main/useMain.ts b/web/src/containers/Main/useMain.ts index 26435146..109b90c4 100644 --- a/web/src/containers/Main/useMain.ts +++ b/web/src/containers/Main/useMain.ts @@ -1,12 +1,11 @@ import { Questionnaire, - QuestionnaireResponse, Parameters, ParametersParameter, Bundle, FhirResource, } from 'fhir/r4b'; -import { useCallback, useState } from 'react'; +import { useCallback, useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; import { generateMappingService, generateQuestionnaireService } from 'web/src/services/builder'; @@ -36,6 +35,7 @@ import { formatError } from '@beda.software/fhir-react'; import { Mapping } from 'shared/src/contrib/aidbox'; import { getMappings, makeMappingExtension } from './utils'; +import { SDCContext } from './context'; export function useLaunchContext() { const [launchContext, setLaunchContext] = useState({ @@ -65,6 +65,7 @@ export function useLaunchContext() { export function useMain(questionnaireId: string) { const navigate = useNavigate(); + const {assemble, populate} = useContext(SDCContext) const { launchContext, setLaunchContext, clearLaunchContext } = useLaunchContext(); const [mappingRD, setMappingRD] = useState>>(notAsked); @@ -104,14 +105,9 @@ export function useMain(questionnaireId: string) { return response; }, [questionnaireId]); - const [assembledQuestionnaireRD, assembledQuestionnaireRDManager] = useService(async () => { - const response = await service({ - method: 'GET', - url: `Questionnaire/${questionnaireId}/$assemble`, - }); - - return response; - }, [questionnaireId]); + const [assembledQuestionnaireRD, assembledQuestionnaireRDManager] = useService( + () => assemble(questionnaireId), + [questionnaireId, assemble]); const reloadQuestionnaire = useCallback(async () => { originalQuestionnaireRDManager.reload(); @@ -180,15 +176,9 @@ export function useMain(questionnaireId: string) { [saveQuestionnaire, navigate], ); - const [questionnaireResponseRD, questionnaireResponseRDManager] = useService(async () => { - const response = await service({ - method: 'POST', - url: '/Questionnaire/$populate', - data: launchContext, - }); - - return response; - }, [launchContext]); + const [questionnaireResponseRD, questionnaireResponseRDManager] = useService( + () => populate(launchContext), + [launchContext, populate]); const createMapping = useCallback( async (mapping: Mapping) => { diff --git a/web/src/services/sdc.ts b/web/src/services/sdc.ts new file mode 100644 index 00000000..934f9b2e --- /dev/null +++ b/web/src/services/sdc.ts @@ -0,0 +1,20 @@ +import { Parameters, Questionnaire, QuestionnaireResponse } from "fhir/r4b"; +import { service } from "./fhir"; + +export async function populate(launchContext:Parameters) { + const response = await service({ + method: 'POST', + url: '/Questionnaire/$populate', + data: launchContext, + }); + return response; +} + +export async function assemble(questionnaireId:string){ + const response = await service({ + method: 'GET', + url: `Questionnaire/${questionnaireId}/$assemble`, + }); + + return response; +}