wip expanding row for more details for attributes.

see https://stackblitz.com/angular/eaajjobynjkl?file=src%2Fapp%2Ftable-expandable-rows-example.html

see https://material.angular.io/components/table/examples#table-expandable-rows

webapp/frontend/src/app/modules/detail/detail.component.html

@@ -143,6 +143,7 @@
                     <table class="w-full bg-transparent"
                            mat-table
                            matSort
+                           multiTemplateDataRows
                            [dataSource]="smartAttributeDataSource"
                            [trackBy]="trackByFn"
                            #smartAttributeTable>
@@ -324,6 +325,27 @@
                             </td>
                         </ng-container>
 
+
+                        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+                        <ng-container matColumnDef="expandedDetail">
+                            <td mat-cell *matCellDef="let attribute" [attr.colspan]="smartAttributeTableColumns.length">
+                                <div class="attribute-detail"
+                                     [@detailExpand]="attribute == expandedAttribute ? 'expanded' : 'collapsed'">
+                                    <div class="attribute-position-diagram">
+                                        <div class="attribute-position"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-symbol"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-name"> {{getAttributeName(attribute)}} </div>
+                                        <div class="attribute-weight"> {{getAttributeName(attribute)}} </div>
+                                    </div>
+                                    <div class="attribute-detail-description">
+                                        {{getAttributeDescription(attribute)}}
+                                        <span class="attribute-detail-description-attribution"> -- Wikipedia </span>
+                                    </div>
+                                </div>
+                            </td>
+                        </ng-container>
+
+
                         <!-- Footer -->
                         <ng-container matColumnDef="recentOrdersTableFooter">
                             <td class="px-3 border-none"
@@ -344,7 +366,10 @@
                         <tr class="attribute-row h-16"
                             mat-row
                             [ngClass]="{'yellow-50': getAttributeCritical(row)}"
+                            [class.attribute-expanded-row]="expandedAttribute === row"
+                            (click)="expandedAttribute = expandedAttribute === row ? null : row"
                             *matRowDef="let row; columns: smartAttributeTableColumns;"></tr>
+                        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="attribute-detail-row"></tr>
                         <tr class="h-16"
                             mat-footer-row
                             *matFooterRowDef="['recentOrdersTableFooter']"></tr>