yFiles for HTML 3.0.0.4 demos

Author: michabaur

demos/.prettierignore

@@ -1,13 +1,14 @@
-**/build/
-**/dist/
-**/node_modules/
-**/.angular/
-**/.next/
+build/
+dist/
+node_modules/
+.angular/
+.next/
+package-lock.json
+npm-shrinkwrap.json
 /application-features/webgl-rendering/resources/*.json
 /showcase/large-graphs/resources/*.json
 /internal/webgl-performance-tests/resources/*.json
 /showcase/tree-of-life/resources/TreeOfLifeData.json
 /starter-kits/**
 /view/large-graphs/resources/*.json
-/view/rendering-optimizations/resources/*.json
 /view/webgl-label-fading/resources/*.json

demos/README.html

@@ -102,7 +102,7 @@
             <p class="first-paragraph">
               The
               <a href="https://www.yfiles.com/the-yfiles-sdk/web/yfiles-for-html"
-                >yFiles for HTML 3.0.0.3</a
+                >yFiles for HTML 3.0.0.4</a
               >
               demo applications are available in both JavaScript and TypeScript.
               <span class="js-only"
@@ -350,8 +350,8 @@ <h5 class="accordion-title">
     <template id="demo-header-template">
       <div class="demo-header hidden" id="{{identifier}}-demo-header">{{title}} Demos</div>
     </template>
-    <script src="resources/readme-demo-data.js"></script>
-    <script src="resources/readme-demo-support.js" async></script>
+    <script src="./demo-app/readme-demo-data.js"></script>
+    <script src="./demo-app/readme-demo-support.js" async></script>
     <script src="../doc/resources/readme-style.js"></script>
   </body>
 </html>

demos/README.md

@@ -28,9 +28,7 @@
  ***************************************************************************/
 import {
   BiconnectedComponentClustering,
-  BiconnectedComponentClusteringResult,
   EdgeBetweennessClustering,
-  EdgeBetweennessClusteringResult,
   EdgePathLabelModel,
   EdgeSides,
   GraphBuilder,
@@ -40,38 +38,28 @@ import {
   HierarchicalClustering,
   HierarchicalClusteringLinkage,
   HierarchicalClusteringResult,
-  IEdge,
-  IGraph,
-  INode,
-  IRectangle,
-  IRenderTreeElement,
-  IVisualCreator,
   KMeansClustering,
-  KMeansClusteringResult,
   KMeansDistanceMetric,
   LabelPropagationClustering,
-  LabelPropagationClusteringResult,
   LabelStyle,
   License,
   LouvainModularityClustering,
-  LouvainModularityClusteringResult,
   NodeStyleIndicatorRenderer,
-  PolylineEdgeStyle,
   Rect,
   ShapeNodeShape
 } from '@yfiles/yfiles'
 
-import * as ClusteringData from './resources/ClusteringData'
 import { VoronoiDiagram } from './VoronoiDiagram'
 import { PolygonVisual, VoronoiVisual } from './DemoVisuals'
 import { DendrogramComponent } from './DendrogramSupport'
-import { createDemoEdgeStyle, createDemoShapeNodeStyle } from '@yfiles/demo-resources/demo-styles'
-import { fetchLicense } from '@yfiles/demo-resources/fetch-license'
-import { addNavigationButtons, finishLoading } from '@yfiles/demo-resources/demo-page'
+import { createDemoEdgeStyle, createDemoShapeNodeStyle } from '@yfiles/demo-app/demo-styles'
+import licenseData from '../../../lib/license.json'
+import { addNavigationButtons, finishLoading } from '@yfiles/demo-app/demo-page'
+import { edgeBetweennessData } from './data/edge-betweenness-data'
+import { biconnectedComponentsData } from './data/biconnected-components-data'
+import { kMeansData } from './data/k-means-data'
+import { hierarchicalData } from './data/hierarchical-data'
 
-/**
- * The {@link GraphComponent} which contains the {@link IGraph}.
- */
 let graphComponent
 
 /**
@@ -80,14 +68,14 @@ let graphComponent
 let dendrogramComponent
 
 /**
- * The canvas object for the cluster visual
+ * The render tree element for the cluster visual
  */
-let clusterVisualObject
+let clusterVisualElement
 
 /**
- * The canvas object for the k-means centroids visual
+ * The render tree element for the k-means centroids visual
  */
-let kMeansCentroidObject
+let kMeansCentroidElement
 
 /**
  * The style for the directed edges
@@ -110,7 +98,7 @@ let busy = false
 let selectedAlgorithm
 
 async function run() {
-  License.value = await fetchLicense()
+  License.value = licenseData
 
   graphComponent = new GraphComponent('graphComponent')
   // initialize the default styles
@@ -184,16 +172,10 @@ function configureUserInteraction(graphComponent) {
   // when an edge is created, run the algorithm again except for the k-means and hierarchical
   // because these two are independent of the edges of the graph
   mode.createEdgeInputMode.addEventListener('edge-created', async (evt) => {
-    if (
-      selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS &&
-      document.querySelector(`#directed`).checked
-    ) {
+    if (selectedAlgorithm === 'edge-betweenness' && document.querySelector(`#directed`).checked) {
       graphComponent.graph.setStyle(evt.item, directedEdgeStyle)
     }
-    if (
-      selectedAlgorithm != ClusteringAlgorithm.kMEANS &&
-      selectedAlgorithm != ClusteringAlgorithm.HIERARCHICAL
-    ) {
+    if (selectedAlgorithm != 'k-means' && selectedAlgorithm != 'hierarchical') {
       await runAlgorithm()
     }
   })
@@ -208,10 +190,7 @@ function configureUserInteraction(graphComponent) {
 
   // when a node is dragged, run the algorithm if this is HIERARCHICAL clustering or kMEANS
   const onDragFinished = async () => {
-    if (
-      selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL ||
-      selectedAlgorithm === ClusteringAlgorithm.kMEANS
-    ) {
+    if (selectedAlgorithm === 'hierarchical' || selectedAlgorithm === 'k-means') {
       await runAlgorithm()
     }
   }
@@ -222,11 +201,11 @@ function configureUserInteraction(graphComponent) {
   mode.itemHoverInputMode.hoverItems = GraphItemTypes.NODE
   mode.itemHoverInputMode.addEventListener('hovered-item-changed', (evt) => {
     // if a node is hovered and the algorithm is HIERARCHICAL clustering, hover the corresponding dendrogram node
-    if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
+    if (selectedAlgorithm === 'hierarchical') {
       const node = evt.item
       const highlights = graphComponent.highlights
       highlights.clear()
-      if (node && result) {
+      if (node && result instanceof HierarchicalClusteringResult) {
         highlights.add(node)
         dendrogramComponent.updateHighlight(result.getDendrogramNode(node))
       } else {
@@ -269,27 +248,27 @@ async function runAlgorithm() {
     if (graphComponent.graph.nodes.size > 0) {
       switch (selectedAlgorithm) {
         default:
-        case ClusteringAlgorithm.EDGE_BETWEENNESS:
+        case 'edge-betweenness':
           runEdgeBetweennessClustering()
           break
-        case ClusteringAlgorithm.kMEANS:
+        case 'k-means':
           runKMeansClustering()
           break
-        case ClusteringAlgorithm.HIERARCHICAL:
+        case 'hierarchical':
           await runHierarchicalClustering()
           break
-        case ClusteringAlgorithm.BICONNECTED_COMPONENTS:
+        case 'biconnected-components':
           runBiconnectedComponentsClustering()
           break
-        case ClusteringAlgorithm.LOUVAIN_MODULARITY:
+        case 'louvain-modularity':
           runLouvainModularityClustering()
           break
-        case ClusteringAlgorithm.LABEL_PROPAGATION:
+        case 'label-propagation':
           runLabelPropagationClustering()
           break
       }
     } else {
-      if (selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL) {
+      if (selectedAlgorithm === 'hierarchical') {
         dendrogramComponent.clearDendrogram()
       }
     }
@@ -453,7 +432,7 @@ function visualizeClusteringResult() {
     // biconnected components returns -1 as cluster id when only one node is present.
     // We change the clusterId manually here, as otherwise we'll get an exception in
     // DemoVisuals.PolygonVisual#createVisual
-    if (clusterId === -1 && selectedAlgorithm === ClusteringAlgorithm.BICONNECTED_COMPONENTS) {
+    if (clusterId === -1 && selectedAlgorithm === 'biconnected-components') {
       clusterId = 0
     }
     let clusterNodesCoordinates = clustering.get(clusterId)
@@ -464,19 +443,19 @@ function visualizeClusteringResult() {
     clusterNodesCoordinates.push(node.layout)
   })
 
-  if (!clusterVisualObject) {
+  if (!clusterVisualElement) {
     let clusterVisual
 
     switch (selectedAlgorithm) {
       default:
-      case ClusteringAlgorithm.EDGE_BETWEENNESS:
-      case ClusteringAlgorithm.BICONNECTED_COMPONENTS: {
+      case 'edge-betweenness':
+      case 'biconnected-components': {
         // create a polygonal visual that encloses the nodes that belong to the same cluster
         const clusters = { number: clustering.size, clustering, centroids: [] }
         clusterVisual = new PolygonVisual(false, clusters)
         break
       }
-      case ClusteringAlgorithm.kMEANS: {
+      case 'k-means': {
         const centroids = result.centroids
         if (clustering.size >= 3 && graphComponent.contentBounds) {
           // create a voronoi diagram
@@ -495,11 +474,11 @@ function visualizeClusteringResult() {
     }
 
     // add the visual to the graphComponent's background group
-    clusterVisualObject = graphComponent.renderTree.createElement(
+    clusterVisualElement = graphComponent.renderTree.createElement(
       graphComponent.renderTree.backgroundGroup,
       clusterVisual
     )
-    clusterVisualObject.toBack()
+    clusterVisualElement.toBack()
   }
 
   // invalidate the graphComponent
@@ -511,34 +490,45 @@ function visualizeClusteringResult() {
  */
 async function onAlgorithmChanged() {
   const algorithmsComboBox = document.querySelector(`#algorithms`)
-  selectedAlgorithm = algorithmsComboBox.selectedIndex
-
-  // determine the file name that will be used for loading the graph
-  const fileName = algorithmsComboBox.value
+  selectedAlgorithm = algorithmsComboBox.value
 
   // Adjusts the window appearance. This method is required since when the selected clustering algorithm is
   // HIERARCHICAL, the window has to be split to visualize the dendrogram.
-  const showDendrogram = selectedAlgorithm === ClusteringAlgorithm.HIERARCHICAL
+  const showDendrogram = selectedAlgorithm === 'hierarchical'
   dendrogramComponent.toggleVisibility(showDendrogram)
   await graphComponent.fitGraphBounds(10)
 
   // load the graph and run the algorithm
-  await loadGraph(ClusteringData[fileName])
+  await loadGraph(selectedAlgorithm)
   await runAlgorithm()
 }
 
+function getData(name) {
+  switch (name) {
+    case 'biconnected-components':
+    case 'label-propagation':
+    case 'louvain-modularity':
+      return biconnectedComponentsData
+    case 'edge-betweenness':
+      return edgeBetweennessData
+    case 'hierarchical':
+      return hierarchicalData
+    case 'k-means':
+      return kMeansData
+  }
+}
+
 /**
  * Loads the sample graphs from a JSON file.
- * @param sampleData The data samples
  */
-async function loadGraph(sampleData) {
+async function loadGraph(name) {
   // remove all previous visuals
   removeClusterVisuals()
 
   const graph = graphComponent.graph
   graph.clear()
 
-  const isEdgeBetweenness = selectedAlgorithm === ClusteringAlgorithm.EDGE_BETWEENNESS
+  const isEdgeBetweenness = selectedAlgorithm === 'edge-betweenness'
   const styleFactory =
     isEdgeBetweenness && document.querySelector(`#directed`).checked
       ? () => directedEdgeStyle
@@ -550,19 +540,20 @@ async function loadGraph(sampleData) {
       : () => undefined // tell GraphBuilder not to create any labels
 
   // initialize a graph builder to parse the graph from the JSON file
+  const data = getData(name)
   const builder = new GraphBuilder({
     graph: graph,
     nodes: [
       {
-        data: sampleData.nodes,
+        data: data.nodes,
         id: 'id',
         layout: (data) => new Rect(data.x, data.y, data.w, data.h),
         labels: ['label']
       }
     ],
     edges: [
       {
-        data: sampleData.edges,
+        data: data.edges,
         sourceId: 'source',
         targetId: 'target',
         style: styleFactory,
@@ -687,14 +678,14 @@ function initializeUI() {
  * Remove all present cluster visuals.
  */
 function removeClusterVisuals() {
-  if (clusterVisualObject) {
-    graphComponent.renderTree.remove(clusterVisualObject)
-    clusterVisualObject = null
+  if (clusterVisualElement) {
+    graphComponent.renderTree.remove(clusterVisualElement)
+    clusterVisualElement = null
   }
 
-  if (kMeansCentroidObject) {
-    graphComponent.renderTree.remove(kMeansCentroidObject)
-    kMeansCentroidObject = null
+  if (kMeansCentroidElement) {
+    graphComponent.renderTree.remove(kMeansCentroidElement)
+    kMeansCentroidElement = null
   }
 }
 
@@ -744,15 +735,4 @@ function updateInformationPanel(panelId) {
   document.querySelector(`#${panelId}`).style.display = 'inline-block'
 }
 
-var ClusteringAlgorithm
-;(function (ClusteringAlgorithm) {
-  ClusteringAlgorithm[(ClusteringAlgorithm['EDGE_BETWEENNESS'] = 0)] = 'EDGE_BETWEENNESS'
-  ClusteringAlgorithm[(ClusteringAlgorithm['kMEANS'] = 1)] = 'kMEANS'
-  ClusteringAlgorithm[(ClusteringAlgorithm['HIERARCHICAL'] = 2)] = 'HIERARCHICAL'
-  ClusteringAlgorithm[(ClusteringAlgorithm['BICONNECTED_COMPONENTS'] = 3)] =
-    'BICONNECTED_COMPONENTS'
-  ClusteringAlgorithm[(ClusteringAlgorithm['LOUVAIN_MODULARITY'] = 4)] = 'LOUVAIN_MODULARITY'
-  ClusteringAlgorithm[(ClusteringAlgorithm['LABEL_PROPAGATION'] = 5)] = 'LABEL_PROPAGATION'
-})(ClusteringAlgorithm || (ClusteringAlgorithm = {}))
-
 run().then(finishLoading)