TEFCA query customization page UI (#2363)

* Initializing TEFCA Custom Query Design Work

* getting closer

* fixing up formatting

* trying to add author/system

* continuing messing up styles...

* saving changes

* trying to fix the dang checkmark

* fixing mode

* Fix TEFCA Customize Query Nav Tab Styling (#2375)

* TEFCA Customize Query Nav Tab Styling

* fix spacing around include all

* cleaning up comments

* updating hr line

* mode

* mode 2

* fixing github action errors

* fixing spacing, updating include all styling

* updating customize query padding

* switching from <p> to <div>

* fixing gap between side nav

* Customized query accordion component (#2404)

* add tester accordion component

* customizedQueryAccordion generic

* move to more generic accordion

* change to ValueSet

* genericize accordion

* add labs to interfaces

* minor beautification

* organize components

* add new custom styles

* add accordion component as a CSS grid

* modify linting to prevent us from using any

* rename styles to be unique

* [pre-commit.ci] auto fixes from pre-commit hooks

* temp remove linting for any

* remove trailing comma

* remove logging statement

* add toggle to flip accordion directional expander

* remove unused styles

* [pre-commit.ci] auto fixes from pre-commit hooks

* design fixes

* [pre-commit.ci] auto fixes from pre-commit hooks

* remove styling comments

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* TEFCA Customize UI fix title and subtitle (#2394)

* Fixing TEFCA Customize Query Header

* fixing return to search nav

* TEFCA add customize query button to query form (#2392)

* TEFCA Query adding customize query button

* updating customize page back option

* adding back font size

* standardizing /customize to work in both npm and docker

* standardizing code with existing functions

* trying to get setMode set up

* reverting to try again...

* hacky fix to the 'back' button

* getting queryType, useCase to carry over

* add dummy customize query mode

* [pre-commit.ci] auto fixes from pre-commit hooks

* transitioning from /customize to a component page for customize query

* fixing build

* adding type

* removing customize page, updating test params

* removing setMode from CustomizeQuery

* adding documentation

* more docs

* updating doc

* fixing merge

---------

Co-authored-by: m-goggins <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* Fix TEFCA CustomizeQuery Checkboxes (#2432)

* Fixing TEFCA CustomizeQuery Checkboxes

* comment

* changing checkbox sizes

* adding correct checkbox

* add indeterminate state

* fixing spacing of sub-checkboxes

* fixing the none selected checkbox formatting

* fixing isExpanded

* updating background color, button color and copy

* changing background color

* fixing styling on hr line

* TEFCA Customize Query Accordion Updates (#2459)

* TEFCA CustomizeQuery UI Accordion Formatting

* fixing row lines

* fixing final row, reverting to original hr

* making ExpandMore/Less button sync with accordion click

* fixing height of expandmore/less to be flush with selected

* fixing checkboxes to not expand/close accordion

* Begin populating codes in the TEFCA query customization page (#2488)

* saving tefca changes

* fixing customize-query in searchform

* removing console logs, fixing customize query redirect

* building out loading view

---------

Co-authored-by: Marcelle <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: m-goggins <[email protected]>
Co-authored-by: bamader <[email protected]>

containers/tefca-viewer/.eslintrc.json

@@ -40,6 +40,7 @@
         "publicOnly": true
       }
     ]
+    // "@typescript-eslint/no-explicit-any": "error"
   },
   "overrides": [
     {

containers/tefca-viewer/src/app/constants.ts

@@ -272,4 +272,85 @@ export type Mode =
   | "results"
   | "multiple-patients"
   | "no-patients"
-  | "multiple-patients-results";
+  | "multiple-patients-results"
+  | "customize-queries";
+
+/*Type to specify the expected components for each item in a value set that will be 
+displayed in the CustomizeQuery component*/
+export interface ValueSetItem {
+  code: string;
+  display: string;
+  system: string;
+  include: boolean;
+  author: string;
+}
+
+/*Type to specify the expected expected types of valueset items that will be displayed 
+as separate tabs in the CusomizeQuery component*/
+export interface ValueSet {
+  labs: ValueSetItem[];
+  medications: ValueSetItem[];
+  conditions: ValueSetItem[];
+}
+
+// Constants for the customize query to do UI work -- TODO: REMOVE ONCE COMPLETE
+export const dummyLabs = [
+  {
+    code: "24111-7",
+    display:
+      "Neisseria gonorrhoeae DNA [Presence] in Specimen by NAA with probe detection",
+    system: "LOINC",
+    include: true,
+    author: "CSTE Steward",
+  },
+  {
+    code: "72828-7",
+    display:
+      "Chlamydia trachomatis and Neisseria gonorrhoeae DNA panel - Specimen",
+    system: "LOINC",
+    include: true,
+    author: "CSTE Steward",
+  },
+  {
+    code: "21613-5",
+    display:
+      "Chlamydia trachomatis DNA [Presence] in Specimen by NAA with probe detection",
+    system: "LOINC",
+    include: true,
+    author: "CSTE Steward",
+  },
+];
+
+export const dummyMedications = [
+  {
+    code: "12345-6",
+    display: "Medication A",
+    system: "LOINC",
+    include: true,
+    author: "Author A",
+  },
+  {
+    code: "67890-1",
+    display: "Medication B",
+    system: "LOINC",
+    include: true,
+    author: "Author B",
+  },
+];
+
+export const dummyConditions = [
+  {
+    code: "11111-1",
+    display: "Condition A",
+    system: "LOINC",
+    include: true,
+    author: "Author A",
+  },
+  {
+    code: "22222-2",
+    display: "Condition B",
+    system: "LOINC",
+    include: true,
+    author: "Author B",
+  },
+];