[fix] GH-7 ViewKind's Coll extension with ViewDescr did not work

.vscode/launch.json

@@ -16,7 +16,7 @@
             "request": "launch",
             "name": "Launch Storybook in Chrome",
             "breakOnLoad": true,
-            "url": "http://localhost:6006/?path=/story/several-controls-treeandform-cards--empty",
+            "url": "http://localhost:6006/?path=/story/form-artifactformoverride--remote-data",
             "sourceMaps": true,
             "webRoot": "${workspaceFolder}",
             "sourceMapPathOverrides": {

src/DispatchCell.tsx

@@ -19,7 +19,21 @@ import { MstContext } from './MstContext';
  * Dispatch renderer component for cells.
  */
 export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
-  ({ data, onMeasureChange, uri, schema, viewKindElement, viewKind, enabled, id, CKey, rowData, ...rest }) => {
+  ({
+    data,
+    onMeasureChange,
+    uri,
+    schema,
+    viewKind,
+    viewKindElement,
+    viewDescr,
+    viewDescrElement,
+    enabled,
+    id,
+    CKey,
+    rowData,
+    ...rest
+  }) => {
     const { cells } = useContext(MstContext);
     const renderer = maxBy(cells, (r) => r.tester(viewKindElement, schema));
     if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
@@ -42,10 +56,12 @@ export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
             rowData={rowData}
             onMeasureChange={onMeasureChange}
             schema={schema}
+            viewKind={viewKind}
             viewKindElement={viewKindElement}
+            viewDescr={viewDescr}
+            viewDescrElement={viewDescrElement}
             uri={uri}
             enabled={enabled}
-            viewKind={viewKind}
             id={id}
             {...rest}
           />

src/Form.tsx

@@ -7,19 +7,20 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
+import uuid62 from 'uuid62';
 import { maxBy } from 'lodash-es';
 import React, { useContext } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { Spin } from 'antd';
 import { observer } from 'mobx-react-lite';
-import { applySnapshot, getSnapshot } from 'mobx-state-tree';
+import { getSnapshot } from 'mobx-state-tree';
 
 import { JsonSchema7 } from './models/jsonSchema7';
 //import ModalAntd from './antd/util/AntdModal';
 import { MstContext } from './MstContext';
 import { UnknownRenderer } from './UnknownRenderer';
 import { RankedTester } from './testers';
-import { IViewDescr, IViewKind, IViewKindElement } from './models/uischema';
+import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema';
 
 export interface ControlComponent {
   data: any;
@@ -58,18 +59,16 @@ export interface FormsInitStateProps {
 export interface FormsDispatchProps {
   viewKind: IViewKind;
   viewKindElement: IViewKindElement;
-  viewDescr?: IViewDescr;
-  viewDescrElement?: IViewKindElement;
+  viewDescr: IViewDescr;
+
   enabled?: boolean;
   form?: string;
 }
-export interface FormDispatchProps extends FormsDispatchProps {
-  schema?: any;
-  uri?: string;
-}
 export interface RenderProps extends FormsDispatchProps {
-  schema: JsonSchema7;
+  viewDescrElement?: IViewDescrElement;
+
   id: string;
+  schema: JsonSchema7;
 }
 export interface RenderCellProps extends RenderProps {
   data: any;
@@ -84,64 +83,82 @@ export interface DispatchCellProps extends RenderProps {
   [key: string]: any;
 }
 
-export const FormsDispatch: React.FC<FormDispatchProps> = observer<FormDispatchProps>(
-  ({ viewKind, viewKindElement, viewDescr, viewDescrElement, form, uri, enabled }) => {
-    const { store, renderers } = useContext(MstContext);
+export function createViewDescrElementIri(viewKindElementIri: string): string {
+  return viewKindElementIri + '_' + uuid62.v4();
+}
 
-    // if ViewElement extend-override exists
-    if (!viewDescrElement && viewDescr) {
-      viewDescrElement = viewDescr.elements?.find((el) => el['@parent'] === viewKindElement['@id']);
-    }
+export const processViewKindOverride = (
+  props: { viewKindElement: IViewKindElement; viewDescr: IViewDescr },
+  store: any,
+): [string, string, string, string, IViewKindElement, IViewDescrElement | undefined] => {
+  const { viewKindElement, viewDescr } = props;
+  // if ViewElement extend-override exists
+  const viewDescrElement = viewDescr.elements?.find((el) => el['@parent'] === viewKindElement['@id']);
+  const id = viewDescrElement ? viewDescrElement['@id'] : createViewDescrElementIri(viewKindElement['@id']);
+
+  const [collIri, inCollPath] = viewKindElement.resultsScope?.split('/') || [];
+  let collIriOverride: string = collIri;
 
-    const shapes = viewKindElement.resultsScope ? viewKindElement.resultsScope.split('/') : [];
-    let collIri = shapes.length === 2 ? shapes[0] : viewKindElement.resultsScope;
-    let schema: any;
-    if (collIri) {
-      // if CollConstr extend-override exists switch to extCollConstr
-      if (viewDescr && viewDescr.collsConstrs) {
-        const extCollConstr = viewDescr.collsConstrs?.find((el) => el['@parent'] === viewKindElement['@id']);
-        if (extCollConstr) collIri = extCollConstr['@id'];
+  if (collIriOverride) {
+    // if CollConstr extend-override exists switch to extCollConstr
+    if (viewDescr.collsConstrs) {
+      const extCollConstr = viewDescr.collsConstrs?.find((el) => el['@parent'] === collIri);
+      if (extCollConstr) {
+        collIriOverride = extCollConstr['@id'] || '';
       }
-      const coll = store.getColl(collIri);
-      schema = coll?.collConstr.entConstrs[0]?.schemaJs;
-      //if (store.schemas[iri]) {
-      //  schema = store.schemas[iri];
-      //} else {
-      //  if (iri !== 'client:views' && iri !== 'rm:viewPick' && iri !== 'data:Tabs') {
-      //store.getSchemaByUri(iri);
-      //    return <Spin />;
-      //  }
-      //}
-      if (!schema) return <Spin />;
     }
-    schema = shapes.length === 2 ? schema.properties[shapes[1]] : schema;
-
-    const id = uri ? /*createId(uri)*/ uri : '';
-    const renderer = maxBy(renderers, (r) => r.tester(viewKindElement, schema));
-    //const isModal = viewKindElement.options && viewKindElement.options.modal;
-    if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
-      return (
-        <UnknownRenderer type={'renderer'} elementId={viewKindElement['@id']} elementType={viewKindElement['@type']} />
-      );
-    } else {
-      const Render: React.FC<RenderProps> = renderer.renderer;
-      return (
-        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
-          <Render
-            id={id}
-            viewKind={viewKind}
-            viewKindElement={viewKindElement}
-            viewDescr={viewDescr}
-            viewDescrElement={viewDescrElement}
-            schema={schema}
-            enabled={enabled}
-            form={form}
-          />
-        </ErrorBoundary>
-      );
-    }
-  },
-);
+  }
+
+  return [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement];
+};
+
+export const FormsDispatch = observer<FormsDispatchProps>((props) => {
+  const { store, renderers } = useContext(MstContext);
+  const { viewKind, viewDescr, form, enabled } = props;
+
+  const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
+    props,
+    store,
+  );
+
+  let schema: any;
+  if (collIri !== collIriOverride) {
+    const parentColl = collIri ? store.getColl(collIri) : undefined;
+    const parentSchema = parentColl?.collConstr.entConstrs[0]?.schemaJs;
+    const childColl = collIriOverride ? store.getColl(collIriOverride) : undefined;
+    const childSchema = childColl?.collConstr.entConstrs[0]?.schemaJs;
+    schema = childSchema ? childSchema : parentSchema;
+  } else {
+    const coll = collIri ? store.getColl(collIri) : undefined;
+    schema = coll?.collConstr.entConstrs[0]?.schemaJs;
+  }
+  if ((collIri || collIriOverride) && !schema) return <Spin />;
+  if (inCollPath && inCollPath.length > 0) schema = schema.properties[inCollPath];
+
+  const renderer = maxBy(renderers, (r) => r.tester(viewKindElement, schema));
+  //const isModal = viewKindElement.options && viewKindElement.options.modal;
+  if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
+    return (
+      <UnknownRenderer type={'renderer'} elementId={viewKindElement['@id']} elementType={viewKindElement['@type']} />
+    );
+  } else {
+    const Render: React.FC<RenderProps> = renderer.renderer;
+    return (
+      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
+        <Render
+          id={id}
+          viewKind={viewKind}
+          viewKindElement={viewKindElement}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
+          schema={schema}
+          enabled={enabled}
+          form={form}
+        />
+      </ErrorBoundary>
+    );
+  }
+});
 
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
@@ -153,7 +170,7 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   );
 }
 
-export const Form: React.FC<FormsInitStateProps> = observer<FormsInitStateProps>((props) => {
+export const Form = observer<FormsInitStateProps>((props) => {
   const { store } = useContext(MstContext);
   if (!store) {
     console.log('!store', store);

src/cells/AntdCellCardLayout.tsx

@@ -18,7 +18,7 @@ import { DispatchCell } from '../DispatchCell';
 import './cell.css';
 
 export const AntdCellCardLayout = (props: any) => {
-  const { viewKindElement, viewKind, schema, data, id } = props;
+  const { viewKind, viewKindElement, viewDescr, viewDescrElement, schema, data, id } = props;
   const createCardChilds = () =>
     viewKindElement.elements
       ? viewKindElement.elements.map((e: IViewKindElement, idx: number) => {
@@ -28,10 +28,12 @@ export const AntdCellCardLayout = (props: any) => {
               id={id + String(idx)}
               key={id + String(idx)}
               viewKind={viewKind}
+              viewKindElement={e}
+              viewDescr={viewDescr}
+              viewDescrElement={viewDescrElement}
               data={data}
               rowData={data}
               schema={newSchema || schema}
-              viewKindElement={e}
             />
           );
         })

src/cells/AntdCellHorizontalLayout.tsx

@@ -19,17 +19,21 @@ import { get } from 'lodash-es';
 import { Idx } from '../util/layout';
 
 export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
-  viewKindElement,
   viewKind,
+  viewKindElement,
+  viewDescr,
+  viewDescrElement,
   data,
   schema,
 }) => {
   //const layout = viewKindElement as Layout;
   const Render: React.FC<DispatchCellProps & Idx> = ({
     idx,
     schema,
-    viewKindElement,
     viewKind,
+    viewKindElement,
+    viewDescr,
+    viewDescrElement,
     data,
     enabled,
     form,
@@ -46,8 +50,10 @@ export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
         <DispatchCell
           id={String(idx)}
           data={data}
-          viewKindElement={viewKindElement}
           viewKind={viewKind}
+          viewKindElement={viewKindElement}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
           rowData={data}
           schema={newSchema || schema}
           enabled={enabled}
@@ -62,7 +68,16 @@ export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
   return (
     <Row justify={justify} style={rowStyle} align={'middle'}>
       {(viewKindElement.elements || []).map((e: IViewKindElement, idx: number) => (
-        <Render viewKindElement={e} schema={schema} idx={idx} data={data} id={String(idx)} viewKind={viewKind} />
+        <Render
+          viewKind={viewKind}
+          viewKindElement={e}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
+          schema={schema}
+          idx={idx}
+          data={data}
+          id={String(idx)}
+        />
       ))}
     </Row>
   );

src/data-controls/DataControl.tsx

@@ -23,11 +23,13 @@ const renderType: any = {
 
 export const AntdDataLayout: React.FC<any> = (props) => {
   const {
+    viewKind,
     viewKindElement,
+    viewDescr,
+    viewDescrElement,
     enabled,
     handleChange = () => {},
     dataSource,
-    viewKind,
     schema,
     editing,
     getData,
@@ -50,8 +52,10 @@ export const AntdDataLayout: React.FC<any> = (props) => {
       child={data}
       editing={editing}
       onDnD={onDnD}
-      viewKindElement={viewKindElement}
       viewKind={viewKind}
+      viewKindElement={viewKindElement}
+      viewDescr={viewDescr}
+      viewDescrElement={viewDescrElement}
       onCreateFolder={onCreateFolder}
       onDeleteFolder={onDeleteFolder}
       onRename={onRename}

src/data-controls/GridRenderer.tsx

@@ -16,7 +16,7 @@ import { DispatchCell } from '../DispatchCell';
 import './styles.css';
 
 export const GridRenderer: React.FC<any> = (props) => {
-  const { child, viewKindElement, viewKind, schema } = props;
+  const { viewKind, viewKindElement, viewDescr, viewDescrElement, child, schema } = props;
   const grid = viewKindElement?.options?.grid || { gutter: 16, column: 4 };
   const template = viewKindElement?.options?.elementTemplate || null;
   const createCell = (data: any, id: string | number) =>
@@ -25,8 +25,10 @@ export const GridRenderer: React.FC<any> = (props) => {
         <DispatchCell
           id={String(id) + String(idx)}
           key={String(id) + String(idx)}
-          viewKindElement={e}
           viewKind={viewKind}
+          viewKindElement={e}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
           schema={schema}
           data={data}
           rowData={data}

src/data-controls/TableRenderer.tsx

@@ -22,7 +22,7 @@ const divStyle: React.CSSProperties = {
 
 export const TableRenderer: React.FC<any> = React.memo(
   (props) => {
-    const { schema, enabled, child, onSelect, viewKindElement, viewKind, editing } = props;
+    const { viewKind, viewKindElement, viewDescr, viewDescrElement, schema, enabled, child, onSelect, editing } = props;
     const [selected, setSelected] = useState(child[0]);
     const [cacheSelect, setCacheSelect] = useState();
     const [dataSource, setDataSource] = useState(child);
@@ -80,9 +80,10 @@ export const TableRenderer: React.FC<any> = React.memo(
           {selected.viewKindElement || viewKindElement.elements ? (
             <div style={divStyle}>
               <FormsDispatch
+                viewKind={viewKind}
                 viewKindElement={selected.viewKindElement || viewKindElement.elements[0]}
+                viewDescr={viewDescr}
                 enabled={enabled}
-                viewKind={viewKind}
               />
             </div>
           ) : null}