Miscellaneous updates

src/app/app.component.ts

@@ -93,7 +93,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     this.ngZone.run(() => {
       this.dialog.open(WelcomeDialogComponent, {
         width: '620px',
-        height: '490px',
+        height: '495px',
         panelClass: 'custom-dialog-container',
         autoFocus: false,
         restoreFocus: false,

src/app/date-time-taken-chart/config/date-time-taken-chart-config.component.scss

@@ -1,6 +1,4 @@
 :host {
-  padding: 4px 10px 0 0;
-
   display: grid;
   align-items: center;
   grid-column-gap: 8px;

src/app/date-time-taken-chart/date-time-taken-chart.component.html

@@ -1,15 +1,19 @@
-<div echarts
-     [options]="eChartsOption"
-     (chartInit)="onChartInit($event)"
-     (chartDataZoom)="onChartDataZoom()"
-     (chartRestore)="onChartRestore()"
-     class="chart">
-</div>
-<div *ngIf="!isSupportedDuration" class="unsupported-overlay">
-  <div class="unsupported-message">
-    This chart does not support showing more than 30 days when Hour is selected, 3 days when Minute is selected, and 1 hour when Second is selected.<br>
-    Please change Year/Month/Day/Hour/Minute/Second, or select photos so that the duration is shortened.
+<div class="chart-container">
+  <div echarts
+       [options]="eChartsOption"
+       (chartInit)="onChartInit($event)"
+       (chartDataZoom)="onChartDataZoom()"
+       (chartRestore)="onChartRestore()"
+       class="chart">
+  </div>
+  <div *ngIf="!isSupportedDuration" class="unsupported-overlay">
+    <div class="unsupported-message">
+      This chart does not support showing more than 30 days when Hour is selected, 3 days when Minute is selected, and 1 hour when Second is selected.<br>
+      Please change Year/Month/Day/Hour/Minute/Second, or select photos so that the duration is shortened.
+    </div>
   </div>
 </div>
-<app-date-time-taken-chart-config class="config"></app-date-time-taken-chart-config>
-<app-select-photos-within-zoom class="select-photos-within-zoom" *ngIf="isSelectPhotosWithinZoomButtonVisible"></app-select-photos-within-zoom>
+<div class="sidebar">
+  <app-date-time-taken-chart-config class="config"></app-date-time-taken-chart-config>
+  <app-select-photos-within-zoom class="select-photos-within-zoom" *ngIf="isSelectPhotosWithinZoomButtonVisible"></app-select-photos-within-zoom>
+</div>

src/app/date-time-taken-chart/date-time-taken-chart.component.scss

@@ -1,6 +1,14 @@
 :host {
   width: 100%;
   height: 100%;
+  display: flex; // If CSS grid is used, there is an intermittent issue that the chart does not properly render when its width/height is changed by dragging the splitter.
+}
+
+$sidebar-width: 130px;
+
+.chart-container {
+  height: 100%;
+  width: calc(100% - $sidebar-width); // If "flex-grow: 1" is used instead, there is an intermittent issue that the chart does not properly render when its width/height is changed by dragging the splitter.
   position: relative;
 }
 
@@ -13,7 +21,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: calc(100% - 130px);
+  width: 100%;
   height: 100%;
   background-color: rgba(128,128,128,0.3);
   display: grid;
@@ -27,14 +35,18 @@
   font-size: 15px;
 }
 
+.sidebar {
+  width: $sidebar-width;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: end;
+}
+
 .config {
-  position: absolute;
-  top: 0;
-  right: 0;
+  margin: 4px 10px 0 0;
 }
 
 .select-photos-within-zoom {
-  position: absolute;
-  bottom: 7px;
-  right: 0;
+  margin: 0 10px 7px 0;
 }

src/app/date-time-taken-chart/date-time-taken-chart.component.ts

@@ -107,7 +107,7 @@ export class DateTimeTakenChartComponent {
         top: 25,
         bottom: 80,
         left: 90,
-        right: 200,
+        right: 90,
       },
       tooltip: {
         trigger: 'axis',
@@ -118,7 +118,7 @@ export class DateTimeTakenChartComponent {
       toolbox: {
         itemSize: 20,
         top: 4,
-        right: 128,
+        right: 0,
         feature: {
           dataZoom: {
             icon: {
@@ -145,7 +145,6 @@ export class DateTimeTakenChartComponent {
       },
       yAxis: {
         type: 'value',
-        boundaryGap: [0, '100%'],
         minInterval: 1,   // Make sure Y-axis label is shown as integer.
       },
       dataZoom: [

src/app/date-time-taken-chart/select-photos-within-zoom/select-photos-within-zoom.component.scss

@@ -1,7 +1,3 @@
-:host {
-  margin: 0 10px 0 0;
-}
-
 button {
   display: inline-block;
   box-sizing: border-box;

src/app/home/home.component.scss

@@ -30,6 +30,13 @@
   height: 100%;
 }
 
+app-thumbnail-generation-status-bar,
+app-loaded-files-status-bar
+{
+  z-index: 10;        // To hide app-date-time-taken-chart when its height is decreased by dragging the splitter.
+  position: relative; // For z-index above to take effect.
+}
+
 .hidden {
   display: none;
 }

src/app/home/home.component.ts

@@ -48,7 +48,7 @@ export class HomeComponent implements AfterViewInit, OnInit {
 
     Split(['#home-map', '#home-chart'], {
       direction: 'vertical',
-      sizes: [80, 20],
+      sizes: [70, 30],
       minSize: 0,
       gutterSize: 8, // 8px, which is the same width as the splitter gutter in Photo Data Viewer.
       snapOffset: 0,