Move scroll on parent to help Mithril re-render

Author: graduta

QualityControl/public/common/header.js

@@ -33,9 +33,9 @@ import { filtersPanel } from './filters/filterViews.js';
 export default (model) => {
   const specific = headerSpecific(model) || {};
   const { centerCol, rightCol, subRow } = specific;
-
+  const id = `qcg-header-${model.page}`;
   return h('.flex-col', [
-    h('.flex-row.p2.items-center', { id: 'qcg-header' }, [
+    h('.flex-row.p2.items-center', { id, key: id }, [
       commonHeader(model),
       centerCol || h('.flex-grow'),
       rightCol || h('.w-25'),

QualityControl/public/object/objectTreePage.js

@@ -28,11 +28,14 @@ import { resizableDivider } from '../common/resizableDivider.js';
  * @returns {vnode} - virtual node element
  */
 export default (model) => {
-  const { object, router } = model;
+  const { object } = model;
   const { leftPanelWidthPercent } = object;
-  return h('.h-100.flex-column', { key: `${router.params.page}` }, [
-    h('.flex-row.flex-grow', [
-      h('.scroll-y.flex-column', {
+  return h('.flex-column.h-100', {
+    key: 'object-tree-page-container',
+  }, [
+    h('.flex-row', { style: 'flex-grow: 1; height: 0;' }, [
+      h('.flex-column.scroll-y', {
+        key: 'object-tree-scroll-container',
         style: {
           width: object.selected ? `${leftPanelWidthPercent}%` : '100%',
         },

QualityControl/public/pages/aboutView/AboutViewPage.js

@@ -19,12 +19,20 @@ import { h } from '/js/src/index.js';
 
 /**
  * Shows a page to view framework information
- * @param {Model} model - root model of the application
+ * @param {AboutViewModel} aboutViewModel - root model of the application
  * @returns {vnode} - virtual node element
  */
-export default (model) => h(
-  '.p2.absolute-fill.text-center',
-  servicesLoadingPanel(model.aboutViewModel.services[ServiceStatus.LOADING]),
-  servicesResolvedPanel(model.aboutViewModel.services[ServiceStatus.ERROR], 'error'),
-  servicesResolvedPanel(model.aboutViewModel.services[ServiceStatus.SUCCESS], 'success'),
-);
+export default (aboutViewModel) => {
+  const { services } = aboutViewModel;
+  return [
+    h(
+      '.flex-column.flex-grow.p2.text-center',
+      { key: 'about-view-page' },
+      [
+        servicesLoadingPanel(services[ServiceStatus.LOADING]),
+        servicesResolvedPanel(services[ServiceStatus.ERROR], 'error'),
+        servicesResolvedPanel(services[ServiceStatus.SUCCESS], 'success'),
+      ],
+    ),
+  ];
+};

QualityControl/public/pages/layoutListView/LayoutListPage.js

@@ -23,33 +23,25 @@ import { filtersPanelPopover } from './filtersPanelPopover.js';
  * @import LayoutListModel from './model/LayoutListModel.js';
  */
 export default (layoutListModel) => [
-  h('.scroll-y.absolute-fill', [
-    h(
-      '.flex-row.text-right.m2',
-      [
-        filtersPanelPopover(layoutListModel.searchFilterModel),
-        h(
-          'input.form-control.form-inline.mh1.w-33',
-          {
-            placeholder: 'Layout name',
-            type: 'text',
-            value: layoutListModel.searchFilterModel.searchInput,
-            oninput: (e) => {
-              layoutListModel.search(e.target.value);
-            },
-          },
-        ),
-        h('.p1', [
-          h(
-            '.mh1',
-            layoutListModel.searchFilterModel.stringifyActiveFiltersFriendly(),
-          ),
-        ]),
-      ],
-    ),
-
-    h('', {
-      style: 'display: flex; flex-direction: column',
-    }, Array.from(layoutListModel.folders.values()).map(FolderComponent)),
+  h('.flex-row.text-right.m2', [
+    filtersPanelPopover(layoutListModel.searchFilterModel),
+    h('input.form-control.form-inline.mh1.w-33', {
+      placeholder: 'Layout name',
+      type: 'text',
+      value: layoutListModel.searchFilterModel.searchInput,
+      oninput: (e) => {
+        layoutListModel.search(e.target.value);
+      },
+    }),
+    h('.p1', [
+      h(
+        '.mh1',
+        layoutListModel.searchFilterModel.stringifyActiveFiltersFriendly(),
+      ),
+    ]),
   ]),
+
+  h('', {
+    key: 'layout-list-page-folders-container',
+  }, Array.from(layoutListModel.folders.values()).map(FolderComponent)),
 ];

QualityControl/public/view.js

@@ -36,9 +36,13 @@ export default (model) => [
   model.isImportVisible && layoutImportModal(model),
   h('.absolute-fill.flex-column', [
     h('header.shadow-level2.level2', [header(model)]),
-    h('.flex-grow.flex-row.outline-gray', [
+    h('.flex-row.flex-grow', {
+      key: 'main-content',
+    }, [
       sidebar(model),
-      h('section.outline-gray.flex-grow.relative', page(model)),
+      h('section', {
+        style: 'flex-grow: 1; position: relative; overflow: auto;',
+      }, page(model)),
     ]),
   ]),
   notification(model.notification),
@@ -55,7 +59,7 @@ function page(model) {
     case 'layoutShow': return layoutViewPage(model);
     case 'objectTree': return objectTreePage(model);
     case 'objectView': return ObjectViewPage(model.objectViewModel);
-    case 'about': return AboutViewPage(model);
+    case 'about': return AboutViewPage(model.aboutViewModel);
 
     // Should be seen only at the first start when the view is not yet really to be shown (data loading)
     default: return null;