VYZN: Viewer: UI configuration via Matrix config message

cypress/e2e/ifc-model/load-sample-model.cy.js

@@ -1,4 +1,8 @@
 describe('sample models', () => {
+  const REMOTE_IFC_URL = '**/Momentum.ifc'
+  const REMOTE_IFC_FIXTURE = 'TestFixture.ifc'
+  const REQUEST_SUCCESS_CODE = 200
+
   context('when no model is loaded', () => {
     beforeEach(() => {
       cy.setCookie('isFirstTime', 'false')
@@ -22,12 +26,14 @@ describe('sample models', () => {
     it('should load the Momentum model when selected', () => {
       cy.findByRole('button', {name: 'Open IFC', timeout: 300000}).realClick()
       cy.findByLabelText('Sample Projects').realClick()
+      cy.intercept('GET', REMOTE_IFC_URL, {fixture: REMOTE_IFC_FIXTURE}).as('loadModel')
       cy.findByRole('listbox', {timeout: 300000}).within(() => {
         cy.findByRole('option', {name: 'Momentum', timeout: 300000}).realClick()
+        cy.wait('@loadModel').its('response.statusCode').should('eq', REQUEST_SUCCESS_CODE)
       })
       cy.findByRole('listbox', {timeout: 300000}).should('not.exist')
       cy.findByRole('tree', {label: 'IFC Navigator', timeout: 300000})
-      cy.findByText('Momentum / KNIK v3', {timeout: 300000})
+      cy.findByText('Proxy with extruded box', {timeout: 300000})
     })
   })
 })

cypress/e2e/integration/bldrs-inside-iframe.cy.js

@@ -13,6 +13,9 @@ const path = require('path')
 describe('bldrs inside iframe', () => {
   const SYSTEM_UNDER_TEST = '/cypress/static/bldrs-inside-iframe.html'
   const KEYCODE_ESC = 27
+  const REQUEST_SUCCESS_CODE = 200
+  const REMOTE_IFC_URL = '**/Momentum.ifc'
+  const REMOTE_IFC_FIXTURE = 'TestFixture.ifc'
 
   /**
    * Copy web page to target directory to make it accessible to cypress.
@@ -36,67 +39,95 @@ describe('bldrs inside iframe', () => {
   })
 
   it('should emit ready-messsage when page load completes', () => {
+    // cy.get('@iframe').find('[data-ifc-model="1"]')
     cy.get('#cbxIsReady').should('exist').and('be.checked')
   })
 
   it('should load model when LoadModel-message emitted', () => {
     const model = 'Swiss-Property-AG/Momentum-Public/main/Momentum.ifc'
-    const modelRootNodeName = 'Momentum / KNIK v3'
+    const modelRootNodeName = 'Proxy with extruded box'
+
+    // cy.get('@iframe').find('[data-ifc-model="1"]').should('exist')
+    // cy.get('#messagesCount').contains('1') //First loaded message
+
     cy.get('#txtSendMessageType').clear().type('ai.bldrs-share.LoadModel')
     const msg = {
       githubIfcPath: model,
     }
-    cy.get('#txtSendMessagePayload').clear().type(JSON.stringify(msg), {parseSpecialCharSequences: false})
+
+    cy.intercept('GET', REMOTE_IFC_URL, {fixture: REMOTE_IFC_FIXTURE}).as('loadModel')
+
+    cy.get('#txtSendMessagePayload').clear()
+        .type(JSON.stringify(msg), {parseSpecialCharSequences: false})
     cy.get('#btnSendMessage').click()
+    cy.wait('@loadModel').its('response.statusCode').should('eq', REQUEST_SUCCESS_CODE)
+    // cy.get('@iframe').find('[data-ifc-model="1"]').should('exist')
     cy.get('@iframe').contains('span', modelRootNodeName).should('exist')
+    // cy.get('#messagesCount').contains('2') //Second loaded message received
   })
 
   it('should select element when SelectElements-message emitted', () => {
+    cy.get('#lastMessageReceivedAction').contains(/ModelLoaded/i)
     const globalId = '02uD5Qe8H3mek2PYnMWHk1'
-    const expectedExpressId = '621'
+    // cy.get('@iframe').find('[data-ifc-model="1"]').should('exist')
     cy.get('#txtSendMessageType').clear().type('ai.bldrs-share.SelectElements')
     const msg = {
       globalIds: [globalId],
     }
     cy.get('#txtSendMessagePayload').clear().type(JSON.stringify(msg), {parseSpecialCharSequences: false})
-    cy.get('@iframe').find('[data-model-ready="true"]').should('exist')
     cy.get('#btnSendMessage').click()
     cy.get('@iframe').findByRole('button', {name: /Properties/}).click()
-    // Bldrs itemProperties dialog appears to slice the ID across different rows
-    // therefore we currently need to do it this way as a workaround:
-    cy.get('iframe').iframe().contains('span', expectedExpressId[0]).should('exist')
-    cy.get('iframe').iframe().contains('span', expectedExpressId[1]).should('exist')
-    cy.get('iframe').iframe().contains('span', expectedExpressId[2]).should('exist')
+    cy.get('@iframe').contains('span', /621/).should('exist')
   })
 
-  it('should emit ElementsSelected-message when element was selected from panel', () => {
-    cy.get('@iframe').find('[data-model-ready="true"]').should('exist')
+  it('should emit SelectionChanged-message when element was selected through the menu and when cleared', () => {
+    const targetElementId = '3vMqyUfHj3tgritpIZS4iG'
+    cy.get('#lastMessageReceivedAction').contains(/ModelLoaded/i)
     cy.get('@iframe').findByText(/bldrs/i).click()
     cy.get('@iframe').findByText(/build/i).click()
+    cy.get('@iframe').findByText(/every/i).click()
+    cy.get('@iframe').findByText(/thing/i).click()
+    cy.get('@iframe').findAllByText(/together/i).first().click()
 
     cy.get('#txtLastMsg').should(($txtLastMsg) => {
       const msg = JSON.parse($txtLastMsg.val())
       assert.equal(msg.api, 'fromWidget')
       assert.equal(msg.widgetId, 'bldrs-share')
       assert.exists(msg.requestId)
-      assert.equal(msg.action, 'ai.bldrs-share.ElementsSelected')
       assert.exists(msg.data)
+      assert.equal(msg.action, 'ai.bldrs-share.SelectionChanged')
+      assert.equal(msg.data['current'][0], targetElementId)
     })
-  })
 
-  it('should emit ElementsDeSelected-message when selection was cleared', () => {
-    cy.get('@iframe').find('[data-model-ready="true"]').should('exist')
-    cy.get('@iframe').findByText(/bldrs/i).click()
-    cy.get('@iframe').findByText(/build/i).click()
+    cy.get('@iframe').findAllByText(/together/i).last().click()
+    cy.get('#lastMessageReceivedAction').contains(/SelectionChanged/i)
 
     cy.get('@iframe').findByRole('button', {name: /Clear/}).click()
+
     cy.get('#txtLastMsg').should(($txtLastMsg) => {
       const msg = JSON.parse($txtLastMsg.val())
       assert.equal(msg.api, 'fromWidget')
       assert.equal(msg.widgetId, 'bldrs-share')
       assert.exists(msg.requestId)
-      assert.equal(msg.action, 'ai.bldrs-share.ElementsDeSelected')
       assert.exists(msg.data)
+      assert.equal(msg.action, 'ai.bldrs-share.SelectionChanged')
+      assert.equal(msg.data['current'].length, 0)
     })
   })
+
+  it('should hide UI components when UIComponentsVisibility-message emitted', () => {
+    cy.get('#txtSendMessageType').clear().type('ai.bldrs-share.UIComponentsVisibility')
+    const msg = {
+      navigationPanel: false,
+      modelInteraction: false,
+    }
+    cy.get('#txtSendMessagePayload').clear().type(JSON.stringify(msg), {parseSpecialCharSequences: false})
+    cy.get('#btnSendMessage').click()
+
+    cy.findByRole('tree', {label: 'IFC Navigator'}).should('not.exist')
+    cy.get('@iframe').findByRole('button', {name: /Notes/}).should('not.exist')
+    cy.get('@iframe').findByRole('button', {name: /Properties/}).should('not.exist')
+    cy.get('@iframe').findByRole('button', {name: /Section/}).should('not.exist')
+    cy.get('@iframe').findByRole('button', {name: /Clear/}).should('not.exist')
+  })
 })

cypress/fixtures/TestFixture.ifc

@@ -0,0 +1,23 @@
+ISO-10303-21;
+HEADER;
+FILE_DESCRIPTION(('IFC4'),'2;1');
+FILE_NAME('example.ifc','2018-08-8',(''),(''),'','','');
+FILE_SCHEMA(('IFC4'));
+ENDSEC;
+DATA;
+#100=IFCPROJECT('UUID-Project',$,'Proxy with extruded box',$,$,$,$,(#201),#301);
+#201=IFCGEOMETRICREPRESENTATIONCONTEXT($,'Model',3,1.0E-5,$,$);
+#202=IFCGEOMETRICREPRESENTATIONSUBCONTEXT('Body','Model',*,*,*,*,#201,$,.MODEL_VIEW.,$);
+#301=IFCUNITASSIGNMENT((#311));
+#311=IFCSIUNIT(*,.LENGTHUNIT.,$,.METRE.);
+#500=IFCBUILDING('UUID-building',$,'Test Building',$,$,#511,$,$,.ELEMENT.,$,$,$);
+#519=IFCRELAGGREGATES('UUID-RelAggregates',$,$,$,#100,(#500));
+#1000=IFCBUILDINGELEMENTPROXY('UUID-Proxy',$,'Proxy','sample proxy',$,$,#1010,$,$);
+#1010=IFCPRODUCTDEFINITIONSHAPE($,$,(#1020));
+#1020=IFCSHAPEREPRESENTATION(#202,'Body','SweptSolid',(#1021));
+#1021=IFCEXTRUDEDAREASOLID(#1022,$,#1034,1.);
+#1022=IFCRECTANGLEPROFILEDEF(.AREA.,'1m x 1m rectangle',$,1.,1.);
+#1034=IFCDIRECTION((0.,0.,1.));
+#10000=IFCRELCONTAINEDINSPATIALSTRUCTURE('UUID-Spatial',$,'Physical model',$,(#1000),#500);
+ENDSEC;
+END-ISO-10303-21;

cypress/fixtures/bldrs-inside-iframe.html

@@ -18,17 +18,29 @@
     <!-- Flag is set once Matrix Widget API is ready -->
     <input id="cbxIsReady" type="checkbox"></input>
     <label for="cbxIsReady">Is Ready</label>
-    <br/>
 
     <!-- Contains the last message received from the iframe through Matrix Widget API -->
     <input id="txtLastMsg" type="text"></input>
     <label for="txtLastMsg">Last Message Received</label>
     <br/>
 
     <!-- Sends a message to the iframe through Matrix Widget API -->
-    <input id="txtSendMessageType" type="text" placeholder="message type"></input>
-    <input id="txtSendMessagePayload" type="text" placeholder="message payload"></input>
-    <input id="btnSendMessage" type="button" value="Send"></input>
+    <div class="send-actions d-flex">
+      <input id="txtSendMessageType" type="text" placeholder="message type"></input>
+      <input id="txtSendMessagePayload" type="text" placeholder="message payload"></input>
+      <input id="btnSendMessage" type="button" value="Send"></input>
+        <!-- Last Message Received info -->
+      <div class="msg-info d-flex" >
+        <div>
+          Messages Count: <span id="messagesCount">0</span>
+        </div>
+        <div>
+          Last Action Type: <span id="lastMessageReceivedAction">-</span>
+        </div>
+      </div>
+    </div> 
+
+
 
     <!-- Contains Bldrs in an iframe, the URL is set later -->
     <iframe 
@@ -39,5 +51,23 @@
       height="90%">
     </iframe>
 
+    <style> 
+
+    .d-flex{
+      display: flex;
+    }
+
+    .msg-info div {
+      padding:4px;
+      margin: 2px;
+      border-radius: 5px;
+      background-color: #c7c7c7;
+    }
+
+    .send-actions > * {
+     margin-right: 0.5rem;
+    }
+
+    </style>
   </body>
 </html>