Merge pull request #36 from aehrc/develop

Additional controls for building attributes, added system version option for concept search
aehrc · Aug 19, 2024 · e5cdbb2 · e5cdbb2
2 parents 742c246 + 1ab3dbd
commit e5cdbb2
Show file tree

Hide file tree

Showing 61 changed files with 5,967 additions and 5,550 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -6,7 +6,7 @@ name: Node.js Package
 on:
   release:
     types: [published]
-    
+
 jobs:
   build:
     runs-on: ubuntu-latest

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # ECL Builder
 
-This is a collection of components and an app that allow a user to visually 
-build a SNOMED CT [Expression Constraint Language (ECL)](http://snomed.org/ecl) 
+This is a collection of components and an app that allow a user to visually
+build a SNOMED CT [Expression Constraint Language (ECL)](http://snomed.org/ecl)
 query.
 
 The app is currently hosted [here](https://main.d3gfg08ybf406s.amplifyapp.com/).

diff --git a/amplify.yml b/amplify.yml
@@ -13,7 +13,7 @@ applications:
       artifacts:
         baseDirectory: apps/ecl-builder-app/build
         files:
-          - '**/*'
+          - "**/*"
       cache:
         paths:
           - node_modules/**/*
diff --git a/apps/ecl-builder-app/.eslintrc.yml b/apps/ecl-builder-app/.eslintrc.yml
@@ -5,16 +5,16 @@ extends:
   - eslint:recommended
   - plugin:react/recommended
   - plugin:@typescript-eslint/recommended
-parser: '@typescript-eslint/parser'
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaFeatures:
     jsx: true
   ecmaVersion: latest
   sourceType: module
 plugins:
   - react
-  - '@typescript-eslint'
+  - "@typescript-eslint"
 settings:
   react:
     version: "17"
-rules: { }
+rules: {}
diff --git a/apps/ecl-builder-app/public/index.html b/apps/ecl-builder-app/public/index.html
@@ -1,17 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <meta name="theme-color" content="#000000"/>
-  <link
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-  />
-  <title>ECL Builder</title>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<main id="root"></main>
-</body>
+    />
+    <title>ECL Builder</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <main id="root"></main>
+  </body>
 </html>
diff --git a/apps/ecl-builder-app/src/App.tsx b/apps/ecl-builder-app/src/App.tsx
@@ -19,8 +19,9 @@ theme = createTheme(theme, {
 });
 
 function App() {
-  const [currentExpression, setCurrentExpression] =
-    useState<string | undefined>(undefined);
+  const [currentExpression, setCurrentExpression] = useState<
+    string | undefined
+  >(undefined);
 
   return (
     <ThemeProvider theme={theme}>

diff --git a/apps/ecl-builder-app/src/index.tsx b/apps/ecl-builder-app/src/index.tsx
@@ -6,5 +6,5 @@ ReactDOM.render(
   <StrictMode>
     <App />
   </StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );
diff --git a/apps/ecl-builder-app/tsconfig.json b/apps/ecl-builder-app/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/packages/ecl-builder/.eslintrc.yml b/packages/ecl-builder/.eslintrc.yml
@@ -6,7 +6,7 @@ extends:
   - plugin:react/recommended
   - plugin:react-hooks/recommended
   - plugin:@typescript-eslint/recommended
-parser: '@typescript-eslint/parser'
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaFeatures:
     jsx: true
@@ -15,7 +15,7 @@ parserOptions:
   project: ./tsconfig.json
 plugins:
   - react
-  - '@typescript-eslint'
+  - "@typescript-eslint"
 settings:
   react:
     version: "17"

diff --git a/packages/ecl-builder/.storybook/compile.ts b/packages/ecl-builder/.storybook/compile.ts
@@ -1,20 +1,17 @@
-import { parseModule } from 'magicast';
-import type { DynamicConfig } from '../src/stories/types';
+import { parseModule } from "magicast";
+import type { DynamicConfig } from "../src/stories/types";
 
 // adapted from https://stackblitz.com/edit/github-h2rgfk?file=README.md
 
-export const compile = async (
-  config: DynamicConfig
-) => {
+export const compile = async (config: DynamicConfig) => {
   const { baseCsf } = config;
   const stories = await config.stories();
 
   const mod = parseModule(baseCsf);
-  stories.forEach(({csfName, story}) => {
+  stories.forEach(({ csfName, story }) => {
     mod.exports[csfName] = story;
   });
 
   const { code } = mod.generate();
   return code;
 };
-
diff --git a/packages/ecl-builder/.storybook/main.js b/packages/ecl-builder/.storybook/main.js
@@ -4,22 +4,22 @@
  */
 export default {
   stories: [
-    "../src/**/*.stories.mdx", 
+    "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/**/*.dynamic.@(js|jsx|ts|tsx)"
+    "../src/**/*.dynamic.@(js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-webpack5-compiler-swc",
-    "./preset"
+    "./preset",
   ],
   framework: {
     name: "@storybook/react-webpack5",
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: "tag",
   },
 };
diff --git a/packages/ecl-builder/.storybook/preset.ts b/packages/ecl-builder/.storybook/preset.ts
@@ -1,22 +1,22 @@
-import type { Indexer } from '@storybook/types';
-import { serverRequire } from '@storybook/core-common';
-import { loadCsf } from '@storybook/csf-tools';
-import { webpack, DYNAMIC_STORIES_REGEX } from './unplugin';
-import { compile } from './compile';
+import type { Indexer } from "@storybook/types";
+import { serverRequire } from "@storybook/core-common";
+import { loadCsf } from "@storybook/csf-tools";
+import { webpack, DYNAMIC_STORIES_REGEX } from "./unplugin";
+import { compile } from "./compile";
 
 // adapted from https://stackblitz.com/edit/github-h2rgfk?file=README.md
 
 const dynamicIndexer = {
   test: DYNAMIC_STORIES_REGEX,
   createIndex: async (fileName, opts) => {
-    console.log('indexing', fileName);
+    console.log("indexing", fileName);
     delete require.cache[fileName];
     const config = await serverRequire(fileName);
     const compiled = await compile(config);
     const indexed = loadCsf(compiled, {
       ...opts,
       fileName,
-      makeTitle: () => fileName.replace(/^.*\/(.+?)\..*$/, '$1'),
+      makeTitle: () => fileName.replace(/^.*\/(.+?)\..*$/, "$1"),
     }).parse();
 
     return indexed.indexInputs;
@@ -31,4 +31,3 @@ export const webpackFinal = async (config: any) => {
   config.plugins = plugins;
   return config;
 };
-
diff --git a/packages/ecl-builder/.storybook/unplugin.ts b/packages/ecl-builder/.storybook/unplugin.ts
@@ -1,15 +1,15 @@
-import { createUnplugin } from 'unplugin';
-import { serverRequire } from '@storybook/core-common';
-import { compile } from './compile';
+import { createUnplugin } from "unplugin";
+import { serverRequire } from "@storybook/core-common";
+import { compile } from "./compile";
 
 // adapted from https://stackblitz.com/edit/github-h2rgfk?file=README.md
 
 export const DYNAMIC_STORIES_REGEX = /\.dynamic\.[tj]sx?/;
 
 export const unplugin = createUnplugin(() => {
   return {
-    name: 'unplugin-dynamic-stories',
-    enforce: 'pre',
+    name: "unplugin-dynamic-stories",
+    enforce: "pre",
     loadInclude(id) {
       return DYNAMIC_STORIES_REGEX.test(id);
     },
@@ -22,4 +22,4 @@ export const unplugin = createUnplugin(() => {
   };
 });
 
-export const { webpack } = unplugin;
+export const { webpack } = unplugin;
diff --git a/packages/ecl-builder/src/array.ts b/packages/ecl-builder/src/array.ts
@@ -12,6 +12,6 @@ export function interleave<T>(...inputs: T[][]): T[] {
     {
       length: Math.max(...inputs.map((i) => i.length)),
     },
-    (_, i) => inputs.reduce((acc, r) => (r[i] ? acc.concat(r[i]) : acc), [])
+    (_, i) => inputs.reduce((acc, r) => (r[i] ? acc.concat(r[i]) : acc), []),
   ).flat();
 }
diff --git a/packages/ecl-builder/src/components/CopyValueSet.tsx b/packages/ecl-builder/src/components/CopyValueSet.tsx
@@ -16,7 +16,7 @@ export default function CopyValueSet({ expression }: CopyValueSetProps) {
   const valueSetUri = useMemo(
     () =>
       `http://snomed.info/sct?fhir_vs=ecl/${encodeURIComponent(expression)}`,
-    [expression]
+    [expression],
   );
   return (
     <CopyToClipboard text={valueSetUri}>

diff --git a/packages/ecl-builder/src/components/ErrorBoundary.tsx b/packages/ecl-builder/src/components/ErrorBoundary.tsx
@@ -6,7 +6,9 @@
 import { Alert } from "@mui/material";
 import React, { Component, PropsWithChildren } from "react";
 
-export type ErrorBoundaryProps = PropsWithChildren;
+export interface ErrorBoundaryProps extends PropsWithChildren {
+  resetKey?: any
+};
 
 interface ErrorBoundaryState {
   error?: Error;
@@ -16,7 +18,7 @@ export default class ErrorBoundary extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
 > {
-  constructor(props: PropsWithChildren) {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = {};
   }
@@ -25,6 +27,13 @@ export default class ErrorBoundary extends Component<
     return { error };
   }
 
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    if (prevProps.resetKey !== this.props.resetKey) {
+      // Reset error when key changes
+      this.setState({ error: undefined });
+    }
+  }
+
   render() {
     const {
       props: { children },

diff --git a/packages/ecl-builder/src/components/ExpressionBuilder.tsx b/packages/ecl-builder/src/components/ExpressionBuilder.tsx
@@ -35,14 +35,16 @@ export interface ExpressionBuilderProps {
 export interface ExpressionBuilderOptions {
   // The URL of the FHIR terminology server to use for concept search.
   terminologyServerUrl: string;
+  // The system version to use for concept search.
+  systemVersion?: string;
   // The maximum number of results to return within concept search.
   maxSearchResults: number;
   // The minimum number of characters required to submit a query to the terminology server.
   minQueryLength: number;
 }
 
 export const OptionsContext = createContext<ExpressionBuilderOptions>(
-  applyDefaultOptions({})
+  applyDefaultOptions({}),
 );
 
 /**
@@ -60,7 +62,7 @@ export default function ExpressionBuilder({
     [expression, setExpression] = useState(initialExpression);
 
   useEffect(() => {
-    setExpression(initialExpression)
+    setExpression(initialExpression);
   }, [initialExpression]);
 
   function handleChange(newExpression: string) {
@@ -127,7 +129,7 @@ export default function ExpressionBuilder({
  * Default configuration options.
  */
 function applyDefaultOptions(
-  options: Partial<ExpressionBuilderOptions>
+  options: Partial<ExpressionBuilderOptions>,
 ): ExpressionBuilderOptions {
   return {
     terminologyServerUrl: "https://tx.ontoserver.csiro.au/fhir",

diff --git a/packages/ecl-builder/src/components/ExpressionResult.tsx b/packages/ecl-builder/src/components/ExpressionResult.tsx
@@ -48,7 +48,7 @@ export default function ExpressionResult({
   const resolvedOptions = applyDefaultOptions(options);
   return (
     <QueryClientProvider client={queryClient}>
-      <ErrorBoundary>
+      <ErrorBoundary resetKey={expression}>
         <DelayedLoading delay={resolvedOptions.loadingDelay}>
           <ExpressionResultContent
             expression={expression}
@@ -68,7 +68,7 @@ function ExpressionResultContent({
     { data, isFetching } = useValueSetExpansion(
       terminologyServerUrl,
       buildExpandParams(expression, maxSearchResults, includeInactives),
-      { suspense: true }
+      { suspense: true },
     );
   if (!data) {
     console.warn("No error, but also no data");
@@ -126,7 +126,7 @@ function ExpressionResultContent({
  * Default configuration options.
  */
 function applyDefaultOptions(
-  options: Partial<ExpressionResultOptions>
+  options: Partial<ExpressionResultOptions>,
 ): ExpressionResultOptions {
   return {
     terminologyServerUrl: "https://tx.ontoserver.csiro.au/fhir",
@@ -139,13 +139,13 @@ function applyDefaultOptions(
 function buildExpandParams(
   expression: string,
   limit: number,
-  includeInactives: boolean
+  includeInactives: boolean,
 ): URLSearchParams {
   const searchParams = new URLSearchParams(),
     activeOnly = !includeInactives;
   searchParams.set(
     "url",
-    `${SCT_URI}?fhir_vs=ecl/${encodeURIComponent(expression)}`
+    `${SCT_URI}?fhir_vs=ecl/${encodeURIComponent(expression)}`,
   );
   // Designations are included, so that we can get the semantic tag from the FSN.
   searchParams.set("includeDesignations", "true");
@@ -155,7 +155,7 @@ function buildExpandParams(
     "elements",
     "expansion.contains.code,expansion.contains.display," +
       "expansion.contains.fullySpecifiedName," +
-      "expansion.contains.active"
+      "expansion.contains.active",
   );
   // Only active concepts are included in the results.
   searchParams.set("activeOnly", activeOnly.toString());
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ name: Node.js Package @@
     on:
       release:
         types: [published]
     jobs:
       build:
         runs-on: ubuntu-latest
@@ Expand Down @@