Codeathon Branch for SPARC 2023

src/components/settingsPanel.js

@@ -17,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {ResourceVisibility} from "./gui/resourceVisibility";
-import { toggleNeurulatedGroup, toggleNeuroView } from "../view/render/neuroView";
+import { toggleNeurulatedGroup, toggleNeuroView, buildNeurulatedTriplets } from "../view/render/neuroView";
 import {MatFormFieldModule} from '@angular/material/form-field';
 //import {TreeModule} from '@circlon/angular-tree-component';
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
@@ -1188,7 +1188,7 @@ export class SettingsPanel {
       this._labelClasses = this._config[$Field.labels]::keys();
       let ids = this._config.visibleGroups || [];
       this._showGroups = new Set(
-        (this.groups||[]).filter((g) => ids.includes(g.id))
+        (this.groups||[]).filter((g) => ids.includes(g?.id))
       );
     }
     this.neuroViewEnabled =  this.config.layout.neuroviewEnabled;
@@ -1365,18 +1365,27 @@ export class SettingsPanel {
     toggleNeuroView(visible, this.groups, this.filteredDynamicGroups, this.scaffolds, this.onToggleGroup)
     // clear array keeping track of manipulated groups
     this.config.layout.neuroviewEnabled = visible;
-    // this.updateRenderedResources();  
+    // this.updateRenderedResources(); 
   }
 
   toggleGroup = async (event, group) => { 
-    if (this.neuroViewEnabled) {        
+    if (this.neuroViewEnabled && !group.cloneOf ) {        
         // Handle Neuro view initial settings. Turns OFF groups and scaffolds
         this.handleNeuroViewChange(true);
+        group.neurulated = true;
         toggleNeurulatedGroup(event, group, this.onToggleGroup, this.graphData, this.filteredDynamicGroups, this.scaffolds);
         this.onUpdateGroupLayout.emit({ group : group, filteredDynamicGroups : this.filteredDynamicGroups});
-      } else {
-        this.onToggleGroup.emit(group); 
-      }
+
+    } else if (this.neuroViewEnabled && group.cloneOf ) {        
+      this.handleNeuroViewChange(true);
+      group.cloneOf.neurulated = true;
+      group.neurulated = true;
+      toggleNeurulatedGroup(event, group.cloneOf, this.onToggleGroup, this.graphData, this.filteredDynamicGroups, this.scaffolds);
+      this.onUpdateGroupLayout.emit({ group : group.cloneOf, filteredDynamicGroups : this.filteredDynamicGroups});
+    } else {        
+      this.onToggleGroup.emit(group);
+      this.onUpdateGroupLayout.emit({ group : group, filteredDynamicGroups : this.filteredDynamicGroups}); 
+    }
   };
 
   toggleAllDynamicGroup = () => {

src/components/webGLScene.js

@@ -239,7 +239,7 @@ export class WebGLSceneComponent {
     selectColor    = 0x00ff00;
     defaultColor   = 0x000000;
     scaleFactor    = 10;
-    labelRelSize   = 0.02 * this.scaleFactor;
+    labelRelSize   = 0.08 * this.scaleFactor;
     lockControls   = false;
     isConnectivity = true;
 
@@ -266,7 +266,6 @@ export class WebGLSceneComponent {
                 // Showpanel if demo mode is ON
                 let that = this;
                 let doneUpdating = () => { 
-                  that.showPanel = true;
                   that.loading = false;
                   that.refreshSettings = false;
                   window.removeEventListener(GRAPH_LOADED, doneUpdating);
@@ -384,7 +383,7 @@ export class WebGLSceneComponent {
                 [$SchemaClass.Anchor]: $Field.id,
                 [$SchemaClass.Node]  : $Field.id,
                 [$SchemaClass.Link]  : $Field.id,
-                [$SchemaClass.Lyph]  : $Field.id,
+                [$SchemaClass.Lyph]  : $Field.name,
                 [$SchemaClass.Region]: $Field.id
             },
             groups      : true,
@@ -681,7 +680,7 @@ export class WebGLSceneComponent {
     }
 
     resetCamera(positionPoint, lookupPoint) {
-        let position = [0, -100, 120 * this.scaleFactor];
+        let position = [0, -60, 40 * this.scaleFactor];
         let lookup =  [0, 0, 1];
         ["x", "y", "z"].forEach((dim, i) => {
             if (lookupPoint && lookupPoint.hasOwnProperty(dim)) {
@@ -705,6 +704,7 @@ export class WebGLSceneComponent {
 
     showVisibleGroups(visibleGroups, neuroviewEnabled){
         this.refreshSettings = true;
+        this.loading = true;
         let that = this;
         let visible = true;
         if (neuroviewEnabled) {
@@ -717,19 +717,22 @@ export class WebGLSceneComponent {
             visibleGroups?.forEach( async (vg, index) => {
                 let group =  that.graphData.dynamicGroups.find( g => g.id === vg ) ;
                 if ( group ) {
-                    toggleNeurulatedGroup({checked : true }, group, that.toggleGroup, that.graphData, that.graphData.dynamicGroups, that.graphData.scaffoldComponents);
+                    let newGroup = toggleNeurulatedGroup({checked : true }, group, that.toggleGroup, that.graphData, that.graphData.dynamicGroups, that.graphData.scaffoldComponents);
                     const matchScaffolds = toggleScaffoldsNeuroview(that.graphData.scaffoldComponents,buildNeurulatedTriplets(group),true);
                     matchScaffolds?.forEach( r => r.hidden = true );
 
                     matchScaffolds?.forEach((scaffold) => {
                         that.toggleGroup(scaffold);
                     });
-
+                    that.graphData.groups.push(newGroup);
+                    that.graphData.dynamicGroups.push(newGroup);
                     that.updateGroupLayout({ group : group, filteredDynamicGroups : that.graphData.dynamicGroups});   
-                    that.refreshSettings = false;
+                    toggleNeuroView(false, that.graphData.activeGroups, that.graphData.dynamicGroups, that.graphData.scaffoldComponents, that.toggleGroup);
                 }
             })
-        } 
+        }
+        this.graph.graphData(this.graphData); 
+        this.refreshSettings = false;
         this.loading = false;
     }
 
@@ -910,6 +913,7 @@ export class WebGLSceneComponent {
           if ( !group?.hidden && !group?.cloneOf ) {
             let neuroTriplets = buildNeurulatedTriplets(group); 
             visibleLinks = visibleLinks.concat(neuroTriplets.links.filter( l => l.collapsible ));
+            visibleLinks = visibleLinks?.filter( l => (l.id.match(/_clone/g) || []).length <= 1 );
             bigLyphs = neuroTriplets.y;
           }
         }

src/model/graphModel.js

@@ -131,7 +131,7 @@ export class Graph extends Group{
      */
     static processGraphWaitingList(res, entitiesByID, namespace, modelClasses, castingMethod) {
         let added = [];
-        (entitiesByID.waitingList)::entries().forEach(([id, refs]) => {
+        (entitiesByID?.waitingList)::entries().forEach(([id, refs]) => {
             let [obj, key] = refs[0];
             if (obj && obj.class){
                 //Do not create missing scaffold resources
@@ -159,7 +159,7 @@ export class Graph extends Group{
         });
 
         if (added.length > 0) {
-            added.forEach(id => delete entitiesByID.waitingList[id]);
+            added.forEach(id => delete entitiesByID?.waitingList[id]);
             added = added.filter(id => !entitiesByID[id]);
 
             let resources = added.filter(id => entitiesByID[id].class !== $SchemaClass.External);
@@ -173,8 +173,8 @@ export class Graph extends Group{
             }
         }
 
-        if (entitiesByID.waitingList::keys().length > 0){
-            logger.error($LogMsg.REF_UNDEFINED, "model", entitiesByID.waitingList::keys());
+        if (entitiesByID?.waitingList::keys().length > 0){
+            logger.error($LogMsg.REF_UNDEFINED, "model", entitiesByID?.waitingList::keys());
         }
 
         res.syncRelationships(modelClasses, entitiesByID);
@@ -824,7 +824,7 @@ export class Graph extends Group{
 
     getCurrentState(){
         let json =  {
-            [$Field.visibleGroups]: this.visibleGroups.map(g => g.id)
+            [$Field.visibleGroups]: this.visibleGroups.map(g => g?.id)
         }
         json.scaffolds = [];
         (this.scaffolds||[]).forEach(s => {

src/model/groupModel.js

@@ -85,13 +85,13 @@ export class Group extends Resource {
 
     contains(resource){
         if (resource instanceof Node){
-            return findResourceByID(this.nodes, resource.id);
+            return findResourceByID(this.nodes, resource?.id);
         }
         if (resource instanceof Lyph){
-            return findResourceByID(this.lyphs, resource.id);
+            return findResourceByID(this.lyphs, resource?.id);
         }
         if (resource instanceof Link){
-            return findResourceByID(this.links, resource.id);
+            return findResourceByID(this.links, resource?.id);
         }
         return false;
     }
@@ -103,7 +103,7 @@ export class Group extends Resource {
         if (this.lyphsByID && this.lyphsByID[lyph.fullID]){
             delete this.lyphsByID[lyph.fullID];
         }
-        let idx = (this.lyphs || []).findIndex(e => e.fullID === lyph.fullID);
+        let idx = (this.lyphs || []).findIndex(e => e?.fullID === lyph.fullID);
         if (idx > -1) {
             this.lyphs.splice(idx, 1);
         }
@@ -130,7 +130,7 @@ export class Group extends Resource {
             host.hostedLyphs = host.hostedLyphs || [];
             (this.links||[]).filter(link => link.conveyingLyph && !link.conveyingLyph.internalIn).forEach(link => {
                 link.conveyingLyph.hostedBy = host;
-                if (!host.hostedLyphs.find(e => e.id === link.conveyingLyph.id)){
+                if (!host.hostedLyphs.find(e => e?.id === link.conveyingLyph.id)){
                     host.hostedLyphs.push(link.conveyingLyph);
                 }
             });
@@ -165,7 +165,7 @@ export class Group extends Resource {
                 group[prop] = group[prop].filter(x => !!x && x.class);
             });
         } else {
-            [$Field.nodes, $Field.links, $Field.lyphs].forEach(prop => json[prop] = resources[prop].map(e => e.fullID));
+            [$Field.nodes, $Field.links, $Field.lyphs].forEach(prop => json[prop] = resources[prop].map(e => e?.fullID));
             group = modelClasses.Group.fromJSON(json, modelClasses, this.entitiesByID, this.namespace);
             this.groups.push(group);
         }
@@ -187,7 +187,7 @@ export class Group extends Resource {
     includeLinkEnds(links, nodes){
         nodes = nodes || [];
         (links||[]).forEach(lnk => {
-            if (!findResourceByID(nodes, lnk.source.id)){
+            if (!findResourceByID(nodes, lnk.source?.id)){
                 nodes.push(lnk.source);
             }
             if (!findResourceByID(nodes, lnk.target.id)){
@@ -196,7 +196,7 @@ export class Group extends Resource {
         });
         (this.links||[]).forEach(lnk => {
             if (lnk.collapsible &&
-                findResourceByID(nodes, lnk.source.id) && findResourceByID(nodes, lnk.target.id)){
+                findResourceByID(nodes, lnk.source?.id) && findResourceByID(nodes, lnk.target.id)){
                 links.push(lnk);
             }
         });
@@ -224,19 +224,19 @@ export class Group extends Resource {
         const replaceRefToTemplate = (ref, parent, ext = null) => {
             let refID = getID(ref);
             let template = refToResource(refID, parentGroup, $Field.lyphs);
-            if (template && template.isTemplate) {
+            if (template && template?.isTemplate) {
                 changedLyphs++;
                 const subtypeID = getGenID($Prefix.template, refID, parent.id, ext);
                 let subtype = genResource({
                     [$Field.id]        : subtypeID,
-                    [$Field.name]      : template.name,
+                    [$Field.name]      : template?.name,
                     [$Field.supertype] : refID,
                     [$Field.skipLabel] : true
                 }, "groupModel.replaceRefToTemplate (Lyph)");
                 //NK: mergeGenResource assigns namespace and fullID
                 mergeGenResource(undefined, parentGroup, subtype, $Field.lyphs);
                 replaceAbstractRefs(subtype, $Field.layers);
-                return subtype.id;
+                return subtype?.id;
             }
             return ref;
         };
@@ -248,7 +248,7 @@ export class Group extends Resource {
                 let refID = getID(ref);
                 let lyphID = getGenID($Prefix.material, refID);
                 let template = refToResource(lyphID, parentGroup, $Field.lyphs);
-                if (!template || !template.isTemplate) {
+                if (!template || !template?.isTemplate) {
                     let material = refToResource(refID, parentGroup, $Field.materials);
                     if (material) {
                         template = genResource({
@@ -265,13 +265,13 @@ export class Group extends Resource {
                         if (getRefNamespace(refID, parentGroup.namespace) !== parentGroup.namespace){
                             //Reference does not exist
                             if (!refToResource(refID, parentGroup, $Field.lyphs)){
-                                logger.error($LogMsg.MATERIAL_REF_NOT_FOUND, resource.id, key, ref);
+                                logger.error($LogMsg.MATERIAL_REF_NOT_FOUND, resource?.id, key, ref);
                             }
                         }
                     }
                 }
                 if (template){
-                    return template.id;
+                    return template?.id;
                 }
                 return ref;
             };
@@ -316,7 +316,7 @@ export class Group extends Resource {
     }
 
     /**
-     * Generate groups from group templates, i.e. auto-create necessary nodes and links conveying given or generated lyphs
+     * Generate groups from group templates, i.e?. auto-create necessary nodes and links conveying given or generated lyphs
      * @param parentGroup - input model
      * @param modelClasses - model resource classes
      */
@@ -449,15 +449,15 @@ export class Group extends Resource {
      * @returns {*[]}
      */
     get activeGroups(){
-        return [...(this.groups||[])].filter(e => !e.inactive && (e.description !== "dynamic"));
+        return [...(this.groups||[])].filter(e => !e?.inactive && (e?.description !== "dynamic"));
     }
 
     get dynamicGroups(){
-        return [...(this.groups||[])].filter(e => e.description === "dynamic");
+        return [...(this.groups||[])].filter(e => e?.description === "dynamic");
     }
 
     get visibleGroups(){
-        return [...(this.groups||[])].filter(e => !e.hidden);
+        return [...(this.groups||[])].filter(e => !e?.hidden);
     }
 
     assignScaffoldComponents(){
@@ -475,27 +475,27 @@ export class Group extends Resource {
      * @returns {*[]}
      */
     get visibleNodes(){
-        return (this.nodes||[]).filter(e => e.isVisible);
+        return (this.nodes||[]).filter(e => e?.isVisible);
     }
 
     /**
      * Visible links
      * @returns {*[]}
      */
     get visibleLinks(){
-        return (this.links||[]).filter(e => e.isVisible);
+        return (this.links||[]).filter(e => e?.isVisible);
     }
 
     /**
      * Visible lyphs
      * @returns {*[]}
      */
     get visibleLyphs(){
-       return (this.lyphs||[]).filter(e => !e.hidden);
+       return (this.lyphs||[]).filter(e => !e?.hidden);
     }
 
     get create3d(){
-        return (this.lyphs||[]).find(e => e.create3d);
+        return (this.lyphs||[]).find(e => e?.create3d);
     }
 }
 

src/test-app/app.js

@@ -36,6 +36,7 @@ import {
 
 import 'hammerjs';
 import initModel from '../data/graph.json';
+import {HttpClient} from "@angular/common/http";
 
 import "./styles/material.scss";
 import 'jsoneditor/dist/jsoneditor.min.css';
@@ -295,7 +296,8 @@ export class TestApp {
     @ViewChild('webGLScene') _webGLScene: ElementRef;
     @ViewChild('jsonEditor') _container: ElementRef;
 
-    constructor(dialog: MatDialog){
+    constructor(http: HttpClient, dialog: MatDialog){
+        this._http = http;
         this.model = initModel;
         this._dialog = dialog;
         this._flattenGroups = false;
@@ -306,15 +308,16 @@ export class TestApp {
     }
 
     loadModelFromURL(url) {
-      fetch(url)
-      .then(response => response.json())
-      .then(data => {
-        this.load(data)
-      })
-      .catch(error => {
-        // Handle any errors that occur during the fetch request
-        console.log('Error:', error);
-      });
+        this._http.get(url,{responseType: 'arraybuffer'}).subscribe(
+            res => {
+                let model = loadModel(res,  ".xlsx", "xlsx");
+                this.load(model)
+            },
+            err => {
+                console.error(err);
+                throw new Error("Failed to import Google spreadsheet model!");
+            }
+        );
     }
 
     ngAfterViewInit(){
@@ -613,7 +616,7 @@ export class TestApp {
             },
             [$Field.layout]: this._config.layout::cloneDeep(),
             [$Field.showLabels]: this._config.showLabels::cloneDeep(),
-            [$Field.labelContent]: this._config.labels::cloneDeep()
+            [$Field.labelContent]: this._config.labelContent::cloneDeep()
         }::merge(this._graphData.getCurrentState());
         return this.modelClasses.State.fromJSON(state_json, this.modelClasses, this._graphData.entitiesByID);
     }
@@ -628,7 +631,7 @@ export class TestApp {
         if (activeState.camera) {
             console.log("Camera position ", this._snapshot.camera.position)
             this._webGLScene.camera.rotation.fromArray(this._snapshot.camera.rotation);
-            this._webGLScene.resetCamera(this._snapshot.active.camera.position);
+            this._webGLScene.resetCamera();
             this._webGLScene.controls?.update();
         }
         this._config = {};