From 8903be4eff9d831a4314bea67c4919296da79554 Mon Sep 17 00:00:00 2001
From: wkwong-ribose <wk.wong@ribose.com>
Date: Fri, 8 Oct 2021 16:27:45 +0800
Subject: [PATCH] Added view of notes and examples

---
 src/smart/model/editormodel.ts                | 15 ++++----
 .../description/ComponentDescription.tsx      | 22 ++++++++++++
 .../ui/common/description/ComponentList.tsx   | 36 ++++++++++++++++++-
 src/smart/ui/common/description/process.tsx   | 10 +++++-
 src/smart/ui/edit/processedit.tsx             |  3 +-
 src/smart/ui/flowui/nodeUI.tsx                | 10 ++++++
 src/smart/ui/sidebar/SimulationDetails.tsx    | 10 +++++-
 src/smart/ui/sidebar/ViewComponentDetails.tsx | 10 ++++++
 8 files changed, 106 insertions(+), 10 deletions(-)

diff --git a/src/smart/model/editormodel.ts b/src/smart/model/editormodel.ts
index 1614369a..c14e862a 100644
--- a/src/smart/model/editormodel.ts
+++ b/src/smart/model/editormodel.ts
@@ -226,10 +226,13 @@ export function getEditorDataClassById(
 export function getEditorProvisionById(
   model: EditorModel,
   id: string
-): MMELProvision | null {
-  if (id === '') {
-    return null;
-  }
-  const r = model.provisions[id];
-  return r ?? null;
+): MMELProvision | null {  
+  return model.provisions[id] ?? null;  
+}
+
+export function getEditorNoteById(
+  model: EditorModel,
+  id: string
+): MMELNote | null {
+  return model.notes[id]??null;  
 }
diff --git a/src/smart/ui/common/description/ComponentDescription.tsx b/src/smart/ui/common/description/ComponentDescription.tsx
index d72a1c13..ed48bb75 100644
--- a/src/smart/ui/common/description/ComponentDescription.tsx
+++ b/src/smart/ui/common/description/ComponentDescription.tsx
@@ -9,6 +9,7 @@ import {
   EditorTimerEvent,
 } from '../../../model/editormodel';
 import {
+  MMELNote,
   MMELProvision,
   MMELReference,
 } from '../../../serialize/interface/supportinterface';
@@ -84,6 +85,27 @@ export const DescribeProvision: React.FC<{
   );
 };
 
+export const DescribeNote: React.FC<{
+  note: MMELNote;
+  getRefById?: (id: string) => MMELReference | null;
+}> = function ({ note, getRefById }) {
+  const minimal = getRefById === undefined;
+  return (
+    <>
+      {!minimal && (
+        <DescriptionItem label="Type" value={note.type} />
+      )}
+      <DescriptionItem
+        label={minimal ? undefined : 'Message'}     
+        value={minimal ? `${note.type} ${note.message}` : note.message}
+      />      
+      {getRefById !== undefined && (
+        <ReferenceList refs={note.ref} getRefById={getRefById} />
+      )}
+    </>
+  );
+};
+
 export const DescribeEdge: React.FC<{
   edge: MMELEdge;
 }> = function ({ edge }) {
diff --git a/src/smart/ui/common/description/ComponentList.tsx b/src/smart/ui/common/description/ComponentList.tsx
index 6fd65f19..6edc601f 100644
--- a/src/smart/ui/common/description/ComponentList.tsx
+++ b/src/smart/ui/common/description/ComponentList.tsx
@@ -3,11 +3,12 @@ import { EditorRegistry } from '../../../model/editormodel';
 import { MMELDataAttribute } from '../../../serialize/interface/datainterface';
 import { MMELEdge } from '../../../serialize/interface/flowcontrolinterface';
 import {
+  MMELNote,
   MMELProvision,
   MMELReference,
 } from '../../../serialize/interface/supportinterface';
 import { toRefSummary } from '../../../utils/ModelFunctions';
-import { DescribeEdge, DescribeProvision } from './ComponentDescription';
+import { DescribeEdge, DescribeNote, DescribeProvision } from './ComponentDescription';
 import { DescribeAttribute } from './data';
 
 export const ApprovalRecordList: React.FC<{
@@ -152,6 +153,39 @@ export const ProvisionList: React.FC<{
   );
 };
 
+export const NotesList: React.FC<{
+  notes: Set<string>;
+  getNoteById: (id: string) => MMELNote | null;
+  getRefById?: (id: string) => MMELReference | null;  
+}> = function ({ notes, getNoteById, getRefById }) {
+  const ns: MMELNote[] = [];
+  notes.forEach(r => {
+    const ret = getNoteById(r);
+    if (ret !== null) {
+      ns.push(ret);
+    }
+  });
+  return (
+    <>
+      {ns.length > 0 ? (
+        <>
+          {getRefById !== undefined && <p>Notes</p>}
+          <ul>
+            {ns.map(note => (
+              <li key={note.id}>                
+                <DescribeNote
+                  note={note}
+                  getRefById={getRefById}
+                />
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+    </>
+  );
+};
+
 export const MeasurementList: React.FC<{
   measurements: string[];
 }> = function ({ measurements }) {
diff --git a/src/smart/ui/common/description/process.tsx b/src/smart/ui/common/description/process.tsx
index a292147f..a7f3a959 100644
--- a/src/smart/ui/common/description/process.tsx
+++ b/src/smart/ui/common/description/process.tsx
@@ -5,18 +5,20 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import { EditorProcess } from '../../../model/editormodel';
 import {
+  MMELNote,
   MMELProvision,
   MMELReference,
   MMELRole,
 } from '../../../serialize/interface/supportinterface';
 import { ActorDescription, DescriptionItem } from './fields';
-import { MeasurementList, ProvisionList } from './ComponentList';
+import { MeasurementList, NotesList, ProvisionList } from './ComponentList';
 
 export const DescribeProcess: React.FC<{
   process: EditorProcess;
   getRoleById: (id: string) => MMELRole | null;
   getRefById?: (id: string) => MMELReference | null;
   getProvisionById: (id: string) => MMELProvision | null;
+  getNoteById: (id: string) => MMELNote | null;
   CustomProvision?: React.FC<{
     provision: MMELProvision;
     getRefById?: (id: string) => MMELReference | null;
@@ -26,6 +28,7 @@ export const DescribeProcess: React.FC<{
   getProvisionById,
   getRefById,
   getRoleById,
+  getNoteById,
   CustomProvision,
 }) => {
   return (
@@ -39,6 +42,11 @@ export const DescribeProcess: React.FC<{
         getRefById={getRefById}
         CustomProvision={CustomProvision}
       />
+      <NotesList
+        notes={process.notes}
+        getNoteById={getNoteById}
+        getRefById={getRefById}        
+      />
       <MeasurementList measurements={process.measure} />
     </>
   );
diff --git a/src/smart/ui/edit/processedit.tsx b/src/smart/ui/edit/processedit.tsx
index ef519e2e..9dc2d9e4 100644
--- a/src/smart/ui/edit/processedit.tsx
+++ b/src/smart/ui/edit/processedit.tsx
@@ -589,12 +589,13 @@ function save(
     oldProcess.provision,
     provisions
   );
+  process.provision = new Set(Object.values(provisions).map(p => p.id));
   model.notes = updateNotes(
     model.notes,
     oldProcess.notes,
     notes
   );
-  process.provision = new Set(Object.values(provisions).map(p => p.id));
+  process.notes = new Set(Object.values(notes).map(n => n.id));
   return model;
 }
 
diff --git a/src/smart/ui/flowui/nodeUI.tsx b/src/smart/ui/flowui/nodeUI.tsx
index 5e18e43a..1028d2c9 100644
--- a/src/smart/ui/flowui/nodeUI.tsx
+++ b/src/smart/ui/flowui/nodeUI.tsx
@@ -105,6 +105,16 @@ export const ProcessComponent: FC<NodeProps> = function ({ data }) {
           </Tooltip2>
         </div>
       )}
+      {process.page !== '' && (
+        <div css={flownode_top_left_button_layout}>
+          <Tooltip2 content="View subprocess" position="top">
+            <MGDButton
+              onClick={() => callback.onProcessClick(process.page, process.id)}
+              icon="plus"
+            />
+          </Tooltip2>
+        </div>
+      )}      
       {callback.hasMapping !== undefined &&
         callback.hasMapping(process.id) &&
         callback.MappingList !== undefined && (
diff --git a/src/smart/ui/sidebar/SimulationDetails.tsx b/src/smart/ui/sidebar/SimulationDetails.tsx
index 7d0e835c..0c89f0e4 100644
--- a/src/smart/ui/sidebar/SimulationDetails.tsx
+++ b/src/smart/ui/sidebar/SimulationDetails.tsx
@@ -18,6 +18,7 @@ import { Button, Text } from '@blueprintjs/core';
 import { MainFlowNodeTypes } from '../../utils/constants';
 import { DataType } from '../../serialize/interface/baseinterface';
 import {
+  MMELNote,
   MMELProvision,
   MMELRole,
 } from '../../serialize/interface/supportinterface';
@@ -52,6 +53,10 @@ const SimulationDetails: React.FC<{
     return model.provisions[id] ?? null;
   }
 
+  function getNoteById(id: string): MMELNote | null {
+    return model.notes[id] ?? null;
+  }
+
   function getRoleById(id: string): MMELRole | null {
     return model.roles[id] ?? null;
   }
@@ -84,6 +89,7 @@ const SimulationDetails: React.FC<{
           node={elm}
           getProvisionById={getProvisionById}
           getRoleById={getRoleById}
+          getNoteById={getNoteById}
         />
       )}
       <fieldset>
@@ -148,6 +154,7 @@ const NODE_SIMULATION_SUMMARY: Record<
     node: EditorNode;
     getProvisionById: (id: string) => MMELProvision | null;
     getRoleById: (id: string) => MMELRole | null;
+    getNoteById: (id: string) => MMELNote | null;
   }>
 > = {
   [DataType.STARTEVENT]: () => <DescribeStart />,
@@ -164,12 +171,13 @@ const NODE_SIMULATION_SUMMARY: Record<
     ) : (
       <></>
     ),
-  [DataType.PROCESS]: ({ node, getProvisionById, getRoleById }) =>
+  [DataType.PROCESS]: ({ node, getProvisionById, getRoleById, getNoteById }) =>
     isEditorProcess(node) ? (
       <DescribeProcess
         process={node}
         getProvisionById={getProvisionById}
         getRoleById={getRoleById}
+        getNoteById={getNoteById}
       />
     ) : (
       <></>
diff --git a/src/smart/ui/sidebar/ViewComponentDetails.tsx b/src/smart/ui/sidebar/ViewComponentDetails.tsx
index 91432824..b01e1287 100644
--- a/src/smart/ui/sidebar/ViewComponentDetails.tsx
+++ b/src/smart/ui/sidebar/ViewComponentDetails.tsx
@@ -9,6 +9,7 @@ import {
   EditorRegistry,
   EditorSubprocess,
   getEditorDataClassById,
+  getEditorNoteById,
   getEditorProvisionById,
   getEditorRefById,
   getEditorRegistryById,
@@ -25,6 +26,7 @@ import { DataType } from '../../serialize/interface/baseinterface';
 import { MMELDataAttribute } from '../../serialize/interface/datainterface';
 import { MMELEdge } from '../../serialize/interface/flowcontrolinterface';
 import {
+  MMELNote,
   MMELProvision,
   MMELReference,
 } from '../../serialize/interface/supportinterface';
@@ -48,6 +50,7 @@ const NODE_DETAIL_VIEWS: Record<
     getRegistryById: (id: string) => EditorRegistry | null;
     getDCById: (id: string) => EditorDataClass | null;
     getProvisionById: (id: string) => MMELProvision | null;
+    getNoteById: (id: string) => MMELNote | null;
     getOutgoingEdgesById: (id: string) => MMELEdge[];
     CustomAttribute?: React.FC<{
       att: MMELDataAttribute;
@@ -108,6 +111,7 @@ const NODE_DETAIL_VIEWS: Record<
     node,
     getProvisionById,
     getRefById,
+    getNoteById,
     CustomProvision,
   }) =>
     isEditorProcess(node) ? (
@@ -115,6 +119,7 @@ const NODE_DETAIL_VIEWS: Record<
         process={node}
         getProvisionById={getProvisionById}
         getRefById={getRefById}
+        getNoteById={getNoteById}
         CustomProvision={CustomProvision}
         {...node}
       />
@@ -153,6 +158,10 @@ export const Describe: React.FC<{
     return getEditorProvisionById(model, id);
   }
 
+  function getNoteById(id: string): MMELNote | null {
+    return getEditorNoteById(model, id);
+  }
+
   function getOutgoingEdgesById(id: string): MMELEdge[] {
     return Object.values(page.edges).filter(e => e.from === id);
   }
@@ -166,6 +175,7 @@ export const Describe: React.FC<{
       getDCById={getDCById}
       getProvisionById={getProvisionById}
       getOutgoingEdgesById={getOutgoingEdgesById}
+      getNoteById={getNoteById}
       CustomAttribute={CustomAttribute}
       CustomProvision={CustomProvision}
     />