adding details changes for new mix component type

src/app/core/substance-details/substance-mixture-components/substance-mixture-components.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="required && required.length > 0">
+<div *ngIf="required && required.length > 0" class = "type-row">
   <h3>All of the following components
     <i>must</i> be present:</h3>
   <div class="flex-row wrap">
@@ -15,7 +15,24 @@ <h3>All of the following components
     </div>
   </div>
 </div>
-<div *ngIf="presentInAny && presentInAny.length > 0">
+<div *ngIf="requiredMinor && requiredMinor.length > 0" class = "type-row">
+  <h3>All of the following Minor components
+    <i>must</i> be present:</h3>
+  <div class="flex-row wrap">
+    <div *ngFor="let component of requiredMinor" class="thumb-col">
+      <div *ngIf="component.substance.linkingID" class="code">{{component.substance.linkingID}}</div>
+      <a tabindex="0" role="img" aria-label="substance image" class="zoom" (click)="openImageModal(structureTemplate, component)">
+      <img class="image-icon" appSubstanceImage [entityId]="component.substance.refuuid"></a>
+
+      <div>
+        <a class="substance-name" [routerLink]="['/substances', component.substance.refuuid]">
+          {{component.substance.name}}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+<div *ngIf="presentInAny && presentInAny.length > 0" class = "type-row">
   <h3>Any of these components may be present:</h3>
   <div class="flex-row wrap">
     <div *ngFor="let component of presentInAny" class="thumb-col">

src/app/core/substance-details/substance-mixture-components/substance-mixture-components.component.scss

@@ -26,4 +26,8 @@
 
 .close-container {
   width:100%;
+}
+
+.type-row {
+  margin-bottom:50px;
 }

src/app/core/substance-details/substance-mixture-components/substance-mixture-components.component.ts

@@ -13,6 +13,7 @@ import { MatDialog } from '@angular/material/dialog';
 export class SubstanceMixtureComponentsComponent extends SubstanceCardBase implements OnInit {
   components: Array<MixtureComponents>;
   required: Array<MixtureComponents>;
+  requiredMinor: Array<MixtureComponents>;
   presentInAny: Array<MixtureComponents>;
   presentInOne: Array<MixtureComponents>;
   substanceUpdated = new Subject<SubstanceDetail>();
@@ -32,6 +33,8 @@ export class SubstanceMixtureComponentsComponent extends SubstanceCardBase imple
         this.components = this.substance.mixture.components;
         this.required = this.components.filter(
           component => component.type === 'MUST_BE_PRESENT');
+          this.requiredMinor = this.components.filter(
+            component => component.type === 'MUST_BE_PRESENT_MINOR');
         this.presentInAny = this.components.filter(
           component => component.type === 'MAY_BE_PRESENT_ANY_OF');
         this.presentInOne = this.components.filter(