deselecting checkbox is removing whole row from the front-end angular 4

i have this Panel array coming from backend which has another array Tests. i have mapped them on my custom accordion with checkboxes. the problem i am facing is i should be able to select/deselect Tests without removing it from the from front-end like it Disappears when i deselect. how can i solve this issue?

you can see from that image

https://i.stack.imgur.com/qJUFy.png

here is my html file

<ngb-panel *ngFor="let panel of panels" id="" [title]="panel.Name">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)"
  (ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
 <span class="custom-control-indicator"></span>
 </label>

</ng-template>
<ng-template ngbPanelContent>
<div class="individual-panel" *ngFor="let test of panel.Tests">
<span class="text-dimmed"></span>
<span *ngIf="panel.Name.includes('ENA') || panel.Name.includes('Celiac')">
<label class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input" [name]="test.Id + '-' + test.Code"
       [ngModel]="testSelectionSession.SelectedPanelIds.indexOf(panel.Id) > -1 || testSelectionSession.SelectedPanelIds.indexOf(test.AssociatedPanel?.Id) > -1"
       (ngModelChange)="onTestCheckboxUpdate($event, test, panel)" 
  [id]="test.Id + '-' + test.Code">
  <span class="custom-control-indicator"></span>
  </label>
  </span>
  </div>

ts file

 checkAllTestsSelected(panel: TestOrderPanel) {
 // get all individual test panels
 let individualTestPanelIds = panel.Tests.reduce((acc, test) => {
 if (test.AssociatedPanel) {
 acc.push(test.AssociatedPanel.Id);
 }
 return acc;
 }, []);

// check if all individual test panels are selected

let allIndividualTestsSelected = individualTestPanelIds.reduce(
(acc: boolean, panelId: number) =>
 acc && this.panelIds.indexOf(panelId) > -1,
 individualTestPanelIds.length > 0 &&
 panel.Tests.length === individualTestPanelIds.length
 );

 // if selected, remove all individual test panels and add the panel group
 if (panel.Tests.length > 0 && allIndividualTestsSelected) {
 this.panelIds = this.panelIds.filter(
 panelId => individualTestPanelIds.indexOf(panelId) === -1
 );
  this.selectedPanels = this.selectedPanels.filter(
  selectedPanel => individualTestPanelIds.indexOf(selectedPanel.Id) === -1
  );
  this.panelIds.push(panel.Id);
  this.selectedPanels.push(panel);
  this.updateSession();
  }
  return this.panelIds.indexOf(panel.Id) > -1;
  }


 onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
 let testPanelIds = panel.Tests.reduce((acc, test) => {
  if (test.AssociatedPanel) {
  acc.push(test.AssociatedPanel.Id);
 }

  return acc;
  }, []);

  // Wipe any duplicates
  this.panelIds = this.panelIds.filter(
  panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
  );
 this.selectedPanels = this.selectedPanels.filter(
 selectedPanel =>
 panel.Id !== selectedPanel.Id &&
 testPanelIds.indexOf(selectedPanel.Id) === -1
 );

 if ($event) {
 this.panelIds.push(panel.Id);
 this.selectedPanels.push(panel);
 }
 this.updateSession();
 }

 onTestCheckboxUpdate($event: boolean,
               test: TestOrderPanelTest,
               panel: TestOrderPanel,
               index) {

 let testPanelIds = panel.Tests.reduce((acc, test) => {
 if (test.AssociatedPanel) {
 acc.push(test.AssociatedPanel.Id);
 }

 return acc;
 }, []);
 let associatedTestPanels = 
 this.testSelectionSession.IndividualTestPanelsForAll.filter(
 testPanel => testPanelIds.indexOf(testPanel.Id) > -1
 );
 // If the panel is selected and a test within the panel is deselected,
 // remove the panel and back all of the individual tests
  if (this.panelIds.indexOf(panel.Id) > -1 && !$event) {
  this.selectedPanels = this.selectedPanels.filter(
  e => e.Tests.splice(index, 1)
   );
  }

  let clickedTestPanel = associatedTestPanels.find(
  testPanel => (test.AssociatedPanel ? test.AssociatedPanel.Id : -1) === 
  testPanel.Id
  );

 if (clickedTestPanel) {
 // Wipe any duplicates
 this.panelIds = this.panelIds.filter(
 panelId => clickedTestPanel.Id !== panelId
 );
 this.selectedPanels = this.selectedPanels.filter(
 panel => clickedTestPanel.Id !== panel.Id
 );

 // Add individual panel if checkbox selected
 if ($event) {
  this.panelIds = this.panelIds.concat(clickedTestPanel.Id);
  this.selectedPanels = this.selectedPanels.concat(clickedTestPanel);
  }
   }
 this.updateSession();
 }

this.panelIds includes IDs of panels and this.selectedPanels includes whole panel array which is selected.

i have created a stackblitz too

my code is doing something like that stackblitz.com/edit/angular-bsszc9

and here is example of how my page will look like stackblitz

how can i solve this problem? thanks