Skip to content

Commit

Permalink
use cards for data pipeline section
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakewheeler
jakewheeler committed Oct 28, 2024
1 parent b5d45d4 commit 88b5195
Showing 1 changed file with 203 additions and 171 deletions.
374 changes: 203 additions & 171 deletions src/app/our-products/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import {
Button,
Card,
CardBody,
CardFooter,
CardGroup,
CardHeader,
CardMedia,
Grid,
GridContainer,
Link,
} from '@trussworks/react-uswds';
Expand Down Expand Up @@ -205,174 +201,210 @@ function DataPipeline() {
needs of your jurisdiction.
</p>
</div>
</GridContainer>
<DataPipelineGrid name="FOR DATA PROCESSING">
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/orchestration.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Orchestration</h3>
<p>
Enables coordinated execution of DIBBs in any order, allowing for
fully automated workflows
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/fhirConverter.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88, maxHeight: 88 }}
/>
<h3 className="font-bold">FHIR Converter</h3>
<p>
Converts incoming messages into the FHIR (Fast Healthcare
Interoperability Resources) standard; acts as a common language
between data streams that allows for ease of processing data in all
the different DIBBs
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/validation.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Validation</h3>
<p>
Reads and validates all eCR fields of interest based on specified,
custom preferences; ensures that its XML structure is valid, that
the required fields are present and in the correct format, and that
the data is trustworthy
</p>
</DataPipelineGridItem>
</DataPipelineGrid>
<DataPipelineGrid name="FOR DATA ENRICHMENT">
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/code.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Standardization</h3>
<p>
Standardizes data fields (including record name, date of birth,
phone number, and geolocation) based on preset defaults to ensure
consistency; for example, standardizing phone formats (888-555-1234
vs. (888)555-1234)
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/messageParser.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Geocoding</h3>
<p>
Enriches data by providing precise geographic locations based on
patient street addresses from input data
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/link.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Record Linkage</h3>
<p>
Identifies multiple records referring to the same individual and
combines them into a single, more complete patient record
</p>
</DataPipelineGridItem>
</DataPipelineGrid>
<DataPipelineGrid name="FOR DATA TRANSFORMATION">
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/code.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Flat Formatter</h3>
<p>
Extracts relevant data from a given healthcare message and exports
the data into a JSON file based on a user-defined parsing schema
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<Image
src={`${basePath}/icons/messageParser.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">PHDC Converter</h3>
<p>
Converts a FHIR bundle to the Public Health Document Container
(PHDC) format for ingestion into the National Electronic Disease
Surveillance System (NEDSS) Base System (NBS)
</p>
</DataPipelineGridItem>
<DataPipelineGridItem>
<p>Empty spot</p>
</DataPipelineGridItem>
</DataPipelineGrid>
</section>
);
}

interface DataPipelineGridProps {
name: string;
children: React.ReactNode;
}
<p>FOR DATA PROCESSING</p>
<CardGroup>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/orchestration.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Orchestration</h3>
<p>
Enables coordinated execution of DIBBs in any order, allowing
for fully automated workflows
</p>
</CardBody>
</Card>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/fhirConverter.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88, maxHeight: 88 }}
/>
<h3 className="font-bold">FHIR Converter</h3>
<p>
Converts incoming messages into the FHIR (Fast Healthcare
Interoperability Resources) standard; acts as a common language
between data streams that allows for ease of processing data in
all the different DIBBs
</p>
</CardBody>
</Card>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/validation.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Validation</h3>
<p>
Reads and validates all eCR fields of interest based on
specified, custom preferences; ensures that its XML structure is
valid, that the required fields are present and in the correct
format, and that the data is trustworthy
</p>
</CardBody>
</Card>
</CardGroup>

function DataPipelineGrid({ name, children }: DataPipelineGridProps) {
return (
<GridContainer>
<p>{name}</p>
<Grid row gap className="usa-graphic-list__row">
{children}
</Grid>
</GridContainer>
);
}
<p>FOR DATA ENRICHMENT</p>
<CardGroup>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/code.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Standardization</h3>
<p>
Standardizes data fields (including record name, date of birth,
phone number, and geolocation) based on preset defaults to
ensure consistency; for example, standardizing phone formats
(888-555-1234 vs. (888)555-1234)
</p>
</CardBody>
</Card>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/messageParser.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Geocoding</h3>
<p>
Enriches data by providing precise geographic locations based on
patient street addresses from input data
</p>
</CardBody>
</Card>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/link.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Record Linkage</h3>
<p>
Identifies multiple records referring to the same individual and
combines them into a single, more complete patient record
</p>
</CardBody>
</Card>
</CardGroup>

interface DataPipelineGridItemProps {
children: React.ReactNode;
}
function DataPipelineGridItem({ children }: DataPipelineGridItemProps) {
return (
<Grid
tablet={{
col: true,
}}
>
<Grid
style={{
maxWidth: '352px',
maxHeight: '360px',
}}
className="h-full rounded-md border border-dashed p-8"
>
<div>{children}</div>
</Grid>
</Grid>
<p>FOR DATA TRANSFORMATION</p>
<CardGroup>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/code.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">Flat Formatter</h3>
<p>
Extracts relevant data from a given healthcare message and
exports the data into a JSON file based on a user-defined
parsing schema
</p>
</CardBody>
</Card>
<Card
gridLayout={{
tablet: {
col: 4,
},
}}
containerProps={{ className: 'border-dashed' }}
>
<CardBody>
<Image
src={`${basePath}/icons/messageParser.svg`}
width="88"
height="88"
alt="Placeholder"
style={{ minWidth: 88, minHeight: 88 }}
/>
<h3 className="font-bold">PHDC Converter</h3>
<p>
Converts a FHIR bundle to the Public Health Document Container
(PHDC) format for ingestion into the National Electronic Disease
Surveillance System (NEDSS) Base System (NBS)
</p>
</CardBody>
</Card>
</CardGroup>
</GridContainer>
</section>
);
}

0 comments on commit 88b5195

Please sign in to comment.