Add Orange Book dataset and update related components

src/components/ApiStatus.tsx

@@ -19,6 +19,7 @@ let endpointKeys = [
   'druglabel',
   'ndc',
   'drugenforcement',
+  'drugorangebook',
   'drugsfda',
   'drugshortages',
   'deviceevent',
@@ -47,6 +48,7 @@ const catMap: Record<EndpointKey, string> = Object.freeze({
   'cosmeticevent': 'Cosmetics › Adverse Events',
   'drugevent': 'Drugs › Adverse Events',
   'druglabel': 'Drugs › Labeling',
+  'drugorangebook': 'Drugs › Orange Book',
   'ndc': 'Drugs › NDC Directory',
   'drugenforcement': 'Drugs › Enforcement Reports',
   'drugsfda': 'Drugs › Drugs@FDA',
@@ -78,6 +80,7 @@ const endpointLinkMap: Record<EndpointKey, string> = Object.freeze({
   'druglabel': 'drug/label',
   'ndc': 'drug/ndc',
   'drugenforcement': 'drug/enforcement',
+  'drugorangebook': 'drug/orangebook',
   'drugsfda': 'drug/drugsfda',
   'drugshortages': 'drug/shortages',
   'deviceevent': 'device/event',

src/components/ApiUsage.tsx

@@ -444,13 +444,13 @@ if (!bp.mob && hasWindow) {
                         <td colSpan={2}><strong>Animal & Veterinary</strong></td>
                       </tr>
                       <tr><td>Adverse Event Reports</td><td>{this.docCount('animalandveterinarydrugevent')}</td></tr>
-                      <tr className='bg-primary-darkest clr-white'>
-                        <td colSpan={2}><strong>Drugs</strong></td>
-                      </tr>
+
+                      <tr className='bg-primary-darkest clr-white'><td colSpan={2}><strong>Drugs</strong></td></tr>
                       <tr><td>Adverse Event Reports</td><td>{this.docCount('drugevent')}</td></tr>
                       <tr><td>Labeling</td><td>{this.docCount('druglabel')}</td></tr>
                       <tr><td>NDC Directory</td><td>{this.docCount('ndc')}</td></tr>
                       <tr><td>Enforcement Reports</td><td>{this.docCount('drugenforcement')}</td></tr>
+                      <tr><td>Orange Book</td><td>{this.docCount('drugorangebook')}</td></tr>
                       <tr><td>Drugs@FDA</td><td>{this.docCount('drugsfda')}</td></tr>
                       <tr><td>Drug Shortages</td><td>{this.docCount('drugshortages')}</td></tr>
 
@@ -510,6 +510,7 @@ if (!bp.mob && hasWindow) {
                       <tr><td>Labeling</td><td>{this.downloadCount('druglabel')}</td></tr>
                       <tr><td>NDC Directory</td><td>{this.downloadCount('ndc')}</td></tr>
                       <tr><td>Enforcement Reports</td><td>{this.downloadCount('drugenforcement')}</td></tr>
+                      <tr><td>Orange Book</td><td>{this.downloadCount('drugorangebook')}</td></tr>
                       <tr><td>Drugs@FDA</td><td>{this.downloadCount('drugsfda')}</td></tr>
                       <tr><td>Drug Shortages</td><td>{this.downloadCount('drugshortages')}</td></tr>
 

src/components/DataDictionary.tsx

@@ -101,6 +101,7 @@ class DataDictionary extends React.Component<{}, DataDictionaryState> {
       '510k': '510k Clearance',
       'enforcement': 'Enforcement',
       'nsde': 'NSDE',
+      'orangebook': 'Orange Book',
       'drugsfda': 'Drugs@FDA',
       'drugshortages': 'Drug Shortages',
       'covid19serology': 'COVID-19 Serology',

src/components/EndpointBox.tsx

@@ -19,6 +19,7 @@ type EndpointName =
   | 'covid19serology'
   | 'label'
   | 'ndc'
+  | 'orangebook'
   | 'drugsfda'
   | 'drugshortages'
   | 'historicaldocument'
@@ -75,6 +76,7 @@ const EndpointBox = (props: tPROPS) => {
       'label': 'Structured product information, including prescribing information, for approved drug products.',
       'ndc': 'NDC directory containing information on the National Drug Code (NDC)',
       'enforcement': 'Drug product recall enforcement reports.',
+      'orangebook': 'Approved Drug Products with Therapeutic Equivalence Evaluations (Orange Book).',
       'drugsfda': 'Drugs@FDA includes most of the drug products approved since 1939.',
       'drugshortages': 'Drug Shortages can occur for many reasons, including manufacturing and quality problems, delays, and discontinuations.'
     },
@@ -119,6 +121,7 @@ const EndpointBox = (props: tPROPS) => {
       'label': 'Product labeling',
       'ndc': 'NDC Directory',
       'enforcement': 'Recall enforcement reports',
+      'orangebook': 'Orange Book',
       'drugsfda': 'Drugs@FDA',
       'drugshortages': 'Drug shortages'
     },
@@ -173,6 +176,7 @@ const EndpointBox = (props: tPROPS) => {
       'label': <div className='ep-icon' style={bg_color.drug}><i className='fa fa-3x fa-barcode' style={{color: "white"}}/></div>,
       'ndc': <div className='ep-icon' style={bg_color.drug}><i className='fa fa-3x fa-database' style={{color: "white"}}/></div>,
       'enforcement': <div className='ep-icon' style={bg_color.drug}><i className='fa fa-3x fa-rotate-left' style={{color: "white"}}/></div>,
+      'orangebook': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-book" style={{color: "white"}}/></div>,
       'drugsfda': <div className='ep-icon' style={bg_color.drug}><i className='fa fa-3x fa-at' style={{color: "white"}}/></div>,
       'drugshortages': <div className='ep-icon' style={bg_color.drug}><i className='fa fa-3x fa-at' style={{color: "white"}}/></div>
     },
@@ -217,6 +221,7 @@ const EndpointBox = (props: tPROPS) => {
       'label': '/apis/drug/label/',
       'ndc': '/apis/drug/ndc/',
       'enforcement': '/apis/drug/enforcement/',
+      'orangebook': '/apis/drug/orangebook/',
       'drugsfda': '/apis/drug/drugsfda/',
       'drugshortages': '/apis/drug/drugshortages/'
     },

src/components/FieldDownload.tsx

@@ -10,6 +10,7 @@ const pdfDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'druglabel': '/fields/druglabel_reference.pdf',
   'drugndc': '/fields/drugndc_reference.pdf',
   'drugenforcement': '/fields/drugenforcement_reference.pdf',
+  'drugorangebook': '/fields/drugorangebook_reference.pdf',
   'drugsfda': '/fields/drugsfda_reference.pdf',
   'drugshortages': '/fields/drugshortages_reference.pdf',
   'deviceevent': '/fields/deviceevent_reference.pdf',
@@ -37,6 +38,7 @@ const xlsxDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'druglabel': '/fields/druglabel_reference.xlsx',
   'drugndc': '/fields/drugndc_reference.xlsx',
   'drugenforcement': '/fields/drugenforcement_reference.xlsx',
+  'drugorangebook': '/fields/drugorangebook_reference.xlsx',
   'drugsfda': '/fields/drugsfda_reference.xlsx',
   'drugshortages': '/fields/drugshortages_reference.xlsx',
   'deviceevent': '/fields/deviceevent_reference.xlsx',
@@ -64,6 +66,7 @@ const yamlDownloadMap: Readonly<Record<string, string>> = Object.freeze({
   'druglabel': '/fields/druglabel.yaml',
   'drugndc': '/fields/drugndc.yaml',
   'drugenforcement': '/fields/drugenforcement.yaml',
+  'drugorangebook': '/fields/drugorangebook.yaml',
   'drugsfda': '/fields/drugsfda.yaml',
   'drugshortages': '/fields/drugshortages.yaml',
   'deviceevent': '/fields/deviceevent.yaml',

src/components/Infographic.tsx

@@ -109,6 +109,7 @@ const Infographic = (props: tPROPS) => {
   // Don't render if there is no data, or the field we are trying to
   // count by (visualize) is unknown
   const fieldDefinition: void|Object = yamlGet(nextCountParam, fields)
+  console.log("fielddef: ", fieldDefinition, "nextcountParam: ", nextCountParam, "fields: ", fields)
   const error: boolean = data?.error || !fieldDefinition
 
   // if fieldDef has description, then docs-ify it
@@ -192,53 +193,8 @@ const Infographic = (props: tPROPS) => {
               borderBottom: bp.mob ? '1px solid #e4e2e0' : 0,
               borderRight: '2px solid #e4e2e0',
             }}>
-            <p className='infographic-header'>
-              View:
-            </p>
-            <div
-              className='select-wrap'
-              style={{
-                marginTop: '10px',
-              }}>
-              <label>
-                <span className='visually-hidden'>
-                  Select a count parameter to filter by
-                </span>
-                <select
-                  className='select clr-primary'
-                  id='view-select'
-                  value={props.countParam}
-                  onChange={onCountChangeAndUpdate}
-                  // inline because of uncss
-                  // client side only code not picked up
-                  style={{
-                    appearance: 'none',
-                    background: '#fff',
-                    border: '1px solid #0af',
-                    borderRadius: 0,
-                    display: 'block',
-                    fontFamily: 'inherit',
-                    fontSize: '14px',
-                    outline: 0,
-                    padding: '7px',
-                    width: '100%',
-                    WebkitAppearance: "none"
-                  }}>
-                  {
-                    Object.keys(props.fieldsFlattened).map((field: string, i) => (
-                      <option
-                        key={i}
-                        value={field}>
-                        {field}
-                      </option>
-                    ))
-                  }
-                </select>
-              </label>
-            </div>
 
             <p className='infographic-header'>
-              <br/>
               Filter:
             </p>
             <FilterWithState />

src/components/RenderContentObject/KeyFacts.tsx

@@ -33,6 +33,7 @@ const source: Record<string, Record<string, string>> = {
     'label': 'FDA SPL files',
     'ndc': 'NDC Directory',
     'enforcement': 'FDA Recall Enterprise System (RES)',
+    'orangebook': 'Approved Drug Products with Therapeutic Equivalence Evaluations (Orange Book)',
     'drugsfda': 'Drugs@FDA',
     'shortages': 'Drug Shortages'
   },
@@ -74,6 +75,7 @@ const sourceLink: any = {
     'label': '/data/spl/',
     'ndc': '/data/ndc/',
     'enforcement': '/data/res/',
+    'orangebook': '/data/orangebook/',
     'drugsfda': '/data/drugsfda/',
     'shortages': '/data/drugshortages'
   },
@@ -117,6 +119,7 @@ const timePeriod: any = {
     'label': 'The bulk of the data is from June 2009 (when labeling was first posted publicly in the SPL format) to the present. However, there are a small number of records from earlier than mid-2009. The last update was on',
     'ndc': 'Last updated on',
     'enforcement': '2004 to',
+    'orangebook': 'Content current as of:',
     'drugsfda': '1939 to',
     'shortages': '2012 to'
   },
@@ -161,6 +164,7 @@ const frequency = {
     'label': 'Weekly',
     'ndc': 'Daily',
     'enforcement': 'Weekly',
+    'orangebook': 'Monthly',
     'drugsfda': 'Daily (Monday-Friday)',
     'shortages': 'Daily'
   },

src/constants/api.tsx

@@ -1,4 +1,4 @@
-export const API_LINK: string = "https://api.fda.gov"
+export const API_LINK: string = "https://openfda-api.preprod.fda.gov"
 export const API_NAME: string = "api.fda.gov"
 export default {
   API_LINK,