Fix demo

demo/index.html

@@ -105,7 +105,11 @@ <h1 id="add-button">+</h1>
       grapholscape_container.style.display = 'block';
 
       grapholscape = await Grapholscape.fullGrapholscape(file, grapholscape_container)
-      grapholscape.showDiagram(0)
+      if (grapholscape.renderState === Grapholscape.RendererStatesEnum.INCREMENTAL) {
+        grapholscape.incremental.showDiagram()
+      } else {
+        grapholscape.showDiagram(0)
+      }
     }
 
     function fetchGrapholFromUrl(form) {

src/incremental/index.ts

@@ -2,6 +2,7 @@ import { Grapholscape } from "../core";
 import setGraphEventHandlers from "../core/set-graph-event-handlers";
 import { LifecycleEvent, RendererStatesEnum } from "../model";
 import { createEntitiesList, IBaseMixin } from "../ui";
+import { GscapeEntityDetails } from "../ui/entity-details";
 import initEntitySelector, { GscapeEntitySelector } from "../ui/entity-selector";
 import { GscapeExplorer } from "../ui/ontology-explorer";
 import { WidgetEnum } from "../ui/util/widget-enum";
@@ -45,7 +46,12 @@ export function initIncremental(grapholscape: Grapholscape) {
   })
 
   if (grapholscape.renderState === RendererStatesEnum.INCREMENTAL) {
-    onIncrementalStartup(grapholscape, incrementalController)
+    grapholscape.renderer.unselect()
+    manageWidgetsOnActivation(
+      grapholscape.widgets as Map<WidgetEnum, IBaseMixin & HTMLElement>,
+      grapholscape.renderer.cy?.elements().empty(),
+      incrementalController.endpointController !== undefined
+    )
   } else {
     manageWidgetsOnDeactivation(grapholscape.widgets as Map<WidgetEnum, IBaseMixin & HTMLElement>)
   }
@@ -96,20 +102,20 @@ export function initIncremental(grapholscape: Grapholscape) {
 function onIncrementalStartup(grapholscape: Grapholscape, incrementalController: IncrementalController) {
   grapholscape.renderer.unselect()
 
-  if (!incrementalController) {
-    incrementalController = new IncrementalController(grapholscape)
-  }
+  // if (!incrementalController) {
+  //   incrementalController = new IncrementalController(grapholscape)
+  // }
 
   manageWidgetsOnActivation(
     grapholscape.widgets as Map<WidgetEnum, IBaseMixin & HTMLElement>,
     grapholscape.renderer.cy?.elements().empty(),
     incrementalController.endpointController !== undefined
   )
 
-  if (grapholscape.renderer.diagram)
-    setGraphEventHandlers(grapholscape.renderer.diagram, grapholscape.lifecycle, grapholscape.ontology)
+  // if (grapholscape.renderer.diagram)
+  //   setGraphEventHandlers(grapholscape.renderer.diagram, grapholscape.lifecycle, grapholscape.ontology)
 
-  incrementalController.setIncrementalEventHandlers()
+  // incrementalController.setIncrementalEventHandlers()
 }
 
 function manageWidgetsOnActivation(widgets: Map<WidgetEnum, IBaseMixin & HTMLElement>, isCanvasEmpty = false, isReasonerAvailable?: boolean) {
@@ -118,7 +124,9 @@ function manageWidgetsOnActivation(widgets: Map<WidgetEnum, IBaseMixin & HTMLEle
   const entitySelector = widgets.get(WidgetEnum.ENTITY_SELECTOR)
   const classInstanceDetails = widgets.get(WidgetEnum.CLASS_INSTANCE_DETAILS)
   const vkgPreferences = widgets.get(WidgetEnum.VKG_PREFERENCES)
+  const entityDetails = widgets.get(WidgetEnum.ENTITY_DETAILS) as GscapeEntityDetails
 
+  entityDetails.showOccurrences = false
   classInstanceDetails?.enable()
   diagramSelector?.disable()
 
@@ -141,7 +149,9 @@ function manageWidgetsOnDeactivation(widgets: Map<WidgetEnum, IBaseMixin & HTMLE
   const entitySelector = widgets.get(WidgetEnum.ENTITY_SELECTOR)
   const classInstanceDetails = widgets.get(WidgetEnum.CLASS_INSTANCE_DETAILS)
   const vkgPreferences = widgets.get(WidgetEnum.VKG_PREFERENCES)
+  const entityDetails = widgets.get(WidgetEnum.ENTITY_DETAILS) as GscapeEntityDetails
 
+  entityDetails.showOccurrences = true
   classInstanceDetails?.disable()
   vkgPreferences?.disable()
   diagramSelector?.enable()

src/incremental/ui/commands-widget/index.ts

@@ -1,17 +1,21 @@
 import { ClassInstanceEntity, GrapholTypesEnum, LifecycleEvent, RendererStatesEnum } from "../../../model";
 import { counter, sankey } from "../../../ui/assets";
 import GscapeContextMenu, { Command } from "../../../ui/common/context-menu";
-import * as IncrementalCommands from "./commands";
 import IncrementalController from "../../controller";
 import { IncrementalEvent } from "../../lifecycle";
+import * as IncrementalCommands from "./commands";
 
 export function CommandsWidgetFactory(ic: IncrementalController) {
   const commandsWidget = new GscapeContextMenu()
 
   ic.grapholscape.on(LifecycleEvent.ContextClick, event => {
     const commands: Command[] = []
 
-    if (event.target === ic.grapholscape.renderer.cy || !event.target.data().iri)
+    if (
+      event.target === ic.grapholscape.renderer.cy ||
+      !event.target.data().iri ||
+      ic.grapholscape.renderState !== RendererStatesEnum.INCREMENTAL
+    )
       return
 
     const entity = ic.classInstanceEntities.get(event.target.data().iri) || ic.grapholscape.ontology.getEntity(event.target.data().iri)
@@ -128,17 +132,17 @@ export function CommandsWidgetFactory(ic: IncrementalController) {
           }
         })
       }
-      
+
     }
 
     if (!entity.is(GrapholTypesEnum.CLASS_INSTANCE) && ic.endpointController?.isReasonerAvailable()) {
       commands.push({
         content: 'Data Lineage',
         icon: sankey,
-        select: () => ic.onShowDataLineage(entity.iri.fullIri) ,
+        select: () => ic.onShowDataLineage(entity.iri.fullIri),
       })
     }
-    
+
     commands.push(
       IncrementalCommands.remove(() => {
         if (entity.is(GrapholTypesEnum.OBJECT_PROPERTY)) {
@@ -160,7 +164,7 @@ export function CommandsWidgetFactory(ic: IncrementalController) {
           commandsWidget.attachTo(htmlNodeReference, commands)
         }
       }
-      
+
     } catch (e) { console.error(e) }
   })
 }

src/ui/diagram-selector/controller.ts

@@ -14,7 +14,8 @@ export default function(diagramSelectorComponent: GscapeDiagramSelector, graphol
   }
   diagramSelectorComponent.onDiagramSelection = (diagram) => grapholscape.showDiagram(diagram)
 
-  grapholscape.on(LifecycleEvent.DiagramChange, diagram => 
-    diagramSelectorComponent.currentDiagramId = diagram.id
-  )
+  grapholscape.on(LifecycleEvent.DiagramChange, diagram => {
+    if (diagramSelectorComponent.diagrams.includes(diagram)) 
+      diagramSelectorComponent.currentDiagramId = diagram.id
+  })
 }

src/ui/entity-details/controller.ts

@@ -1,5 +1,5 @@
 import Grapholscape from '../../core'
-import { GrapholEntity, LifecycleEvent } from '../../model'
+import { GrapholEntity, LifecycleEvent, RendererStatesEnum } from '../../model'
 import getEntityViewOccurrences from '../util/get-entity-view-occurrences'
 import GscapeEntityDetails from './entity-details'
 
@@ -30,8 +30,10 @@ export default function (entityDetailsComponent: GscapeEntityDetails, grapholsca
   })
 
   grapholscape.on(LifecycleEvent.RendererChange, _ => {
-    if (entityDetailsComponent.grapholEntity)
+    if (entityDetailsComponent.grapholEntity && grapholscape.renderState !== RendererStatesEnum.INCREMENTAL)
       entityDetailsComponent.occurrences = getEntityViewOccurrences(entityDetailsComponent.grapholEntity, grapholscape)
+
+    entityDetailsComponent.showOccurrences = grapholscape.renderState !== RendererStatesEnum.INCREMENTAL
   })
 
 

src/ui/entity-details/entity-details.ts

@@ -12,6 +12,7 @@ export default class GscapeEntityDetails extends DropPanelMixin(BaseMixin(LitEle
   title = 'Entity Details'
   grapholEntity: GrapholEntity
   occurrences: Map<DiagramViewData, OccurrenceIdViewData[]>
+  showOccurrences: boolean = true
   language: string
   onNodeNavigation: (occurrence: EntityOccurrence) => void = () => { }
   onWikiLinkClick: (iri: string) => void
@@ -22,6 +23,7 @@ export default class GscapeEntityDetails extends DropPanelMixin(BaseMixin(LitEle
     return {
       grapholEntity: { type: Object, attribute: false },
       occurrences: { type: Object, attribute: false },
+      showOccurrences: { type: Boolean },
       language: { type: String, attribute: false },
       _isPanelClosed: { type: Boolean, attribute: false },
       incrementalSection: {type: Object, attribute: false }
@@ -150,7 +152,7 @@ export default class GscapeEntityDetails extends DropPanelMixin(BaseMixin(LitEle
 
           ${annotationsTemplate(this.grapholEntity.getAnnotations())}
           
-          ${!this.incrementalSection && this.occurrences.size > 0 ? this.occurrencesTemplate() : null }
+          ${this.showOccurrences && this.occurrences.size > 0 ? this.occurrencesTemplate() : null }
 
           ${this.grapholEntity.getComments().length > 0
             ? html`

src/ui/util/get-entity-view-occurrences.ts

@@ -80,7 +80,7 @@ export function getEntityOccurrencesTemplate(occurrences: Map<DiagramViewData, O
   return html`
   ${Array.from(occurrences).map(([diagram, occurrencesIds]) => {
     return html`
-      <div diagram-id="${diagram.id}">
+      <div diagram-id="${diagram.id}" style="display: flex; align-items: center; gap: 2px; flex-wrap: wrap;">
         <span class="diagram-name">${diagram.name}</span>
         ${occurrencesIds.map(occurrenceId => html`
           <gscape-button