AI, Graphviz, Xholon 2

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Tue Aug 12 2025 07:29:37 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: AI, Graphviz, Xholon 2
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 2d39ef7df907b3118b0ca785371910ad  based on aa12715ee232ed94c4e3c8237753c895
Keywords: 

My Notes
--------
2025 August 11

Test automatic conversion from graphviz content to Xholon subtree.

http://127.0.0.1:8080/Xholon.html?app=AI%2C+Graphviz%2C+Xholon+2&src=lstr&gui=clsc&jslib=graphviz2xholon

### Avatar
In Dev Tools:

var ava = xh.avatar();
ava.action("take *node"); // takes the first sibling Node
- if the Avatar is in HelloWorld:cluster_52, it will now contain Hello:node_53

ava.action("take attribute_String"); // takes the first sibling Attribute_String

### References
(1) https://gist.github.com/kenwebb/7c98bbda3541598f5aca9c128f856689
    has some useful links

(2) see: rip:~/A2025_August__/workbook01$

]]></Notes>
 

<_-.XholonClass>
  <GraphvizSystem/>
  
  <Node>
    <Digraph/>
    <Cluster/>
  </Node>

</_-.XholonClass>

<xholonClassDetails>
  <Avatar><Color>red</Color></Avatar>
</xholonClassDetails>

<GraphvizSystem>
  
  <Attribute_String><![CDATA[
digraph NestedExample {
    // Define graph attributes
    rankdir=TB;
    
    // Outer cluster
    subgraph cluster_company {
        label="Company Structure";
        style=filled;
        color=green;
        
        // Department cluster
        subgraph cluster_engineering {
            label="Engineering Department";
            style=filled;
            color=orange;
            
            // Engineering team nodes
            "Software Team" [shape=box];
            "Hardware Team" [color=black];
            
            // New connection between teams
            "Software Team" -> "Hardware Team";
        }
        
        // Management nodes
        "CEO" [shape=diamond];
        "CTO" [shape=diamond];
        
        // Connections
        "CEO" -> "CTO";
        "CTO" -> "Software Team";
        "CTO" -> "Hardware Team";
    }
    
    // External connections
    "Board of Directors" [shape=oval];
    "Board of Directors" -> "CEO";
}
  ]]></Attribute_String>
  
  <Attribute_String><![CDATA[
digraph nesting {
    node[shape=box, style=filled];
    "Top Level" -> "Foo";
    "Top Level" -> "Bar";
    "Foo" -> { "SubFoo" [label="Level 2: Foo Sub-Foo"];
               "SubBar" [label="Level 3: Foo Sub-Bar"] };
    "Bar" -> { "SubBaz" [label="Level 2: Bar Sub-Baz"],
              "SubQux" [label="Level 3: Bar Sub-Qux"] };

    subgraph cluster_Foo {
        node[shape=box, style=filled];
        label = "Level 1: Foo";
        "SubFoo" -> "SubBar";
    }

    subgraph cluster_Bar {
        node[shape=box, style=filled];
        label = "Level 1: Bar";
        "SubBaz" -> "SubQux";
    }
}
  ]]></Attribute_String>
  
  <!--
% ollama run llama3
>>> 
>>> Write a nested graphviz diagram of Canada. Include all 13 provinces and territories. Also include the largest two cities or towns in each province and territory. Include arrow conn
... ections between provinces, making sure that all provinces are connected with at least one other. Create conncections between cities in the same province. Add a unique color attribu
... te to each province.
Here is a nested Graphviz diagram of Canada:
-->
  <Attribute_String><![CDATA[
digraph Canada {
  
  // Provinces
  province1[style=filled, label="Ontario", fillcolor="#FFC080"];
  province2[style=filled, label="Quebec", fillcolor="#66CCCC"];
  province3[style=filled, label="British Columbia", fillcolor="#33CC33"];
  province4[style=filled, label="Alberta", fillcolor="#9999FF"];
  province5[style=filled, label="Saskatchewan", fillcolor="#CCCCCC"];
  province6[style=filled, label="Manitoba", fillcolor="#FF99CC"];
  province7[style=filled, label="Nova Scotia", fillcolor="#666699"];
  province8[style=filled, label="New Brunswick", fillcolor="#33CC99"];
  province9[style=filled, label="Prince Edward Island", fillcolor="#CCCC66"];
  province10[style=filled, label="Newfoundland and Labrador", fillcolor="#FF3366"];
  province11[style=filled, label="Yukon", fillcolor="#9999CC"];
  province12[style=filled, label="Northwest Territories", fillcolor="#33CC33"];
  province13[style=filled, label="Nunavut", fillcolor="#FFFF66"];

  // Cities and towns
  toronto[label="Toronto", shape=box, style=filled, fillcolor="#CCCCCC"];
  montreal[label="Montreal", shape=box, style=filled, fillcolor="#FFC080"];
  vancouver[label="Vancouver", shape=box, style=filled, fillcolor="#9999CC"];
  calgary[label="Calgary", shape=box, style=filled, fillcolor="#66CCCC"];
  regina[label="Regina", shape=box, style=filled, fillcolor="#FF99CC"];
  winnipeg[label="Winnipeg", shape=box, style=filled, fillcolor="#CCCCCC"];
  halifax[label="Halifax", shape=box, style=filled, fillcolor="#33CC99"];
  fredericton[label="Fredericton", shape=box, style=filled, fillcolor="#666699"];
  charlottetown[label="Charlottetown", shape=box, style=filled, fillcolor="#CCCC66"];
  stjohns[label="St. John's", shape=box, style=filled, fillcolor="#FF3366"];
  whitehorse[label="Whitehorse", shape=box, style=filled, fillcolor="#9999CC"];
  yellowknife[label="Yellowknife", shape=box, style=filled, fillcolor="#33CC33"];
  iqaluit[label="Iqaluit", shape=box, style=filled, fillcolor="#FFFF66"];

  // Connections between provinces
  province1 -> province2 [label="Shared border"];
  province2 -> province3 [label="Shared border"];
  province3 -> province4 [label="Shared border"];
  province4 -> province5 [label="Shared border"];
  province5 -> province6 [label="Shared border"];
  province6 -> province7 [label="Shared border"];
  province7 -> province8 [label="Shared border"];
  province8 -> province9 [label="Shared border"];
  province9 -> province10 [label="Shared border"];
  province11 -> province12 [label="Shared border"];
  province12 -> province13 [label="Shared border"];

  // Connections between cities in the same province
  Toronto -> Montreal [label="Provincial capital"];
  vancouver -> calgary [label="Major urban centers"];
  regina -> winnipeg [label="Capital and largest city"];
  halifax -> fredericton [label="Provincial capitals"];
  charlottetown -> stjohns [label="Capital and largest city"];
  whitehorse -> yellowknife [label="Territorial capitals"];

  // Additional connections
  toronto -> montreal [label="Major transportation route"];
  vancouver -> calgary [label="Major transportation route"];
}
  ]]></Attribute_String>
  
  <Attribute_String><![CDATA[
digraph HelloWorld {
  subgraph cluster_HelloWorld {
    Hello -> World
    World -> Hello
  }
}
  ]]></Attribute_String>
  
  <!-- I exported the Cell Model as Graphviz. It worked except for the nodes which are just a number. I added an underscore in front of each number.
I regenerated with the id blank, which resulted in the following. The connections don't work.
-->
  <Attribute_String><![CDATA[
digraph extraCellularSpace_0 {
 graph [label="ExtraCellularSpace",id="ExtraCellularSpace",stylesheet="Xholon.css",compound=true,bgcolor=white]
 node [style=filled,fillcolor="#f0f8ff"]
 subgraph clusterextraCellularSolution_1 { label="ExtraCellularSolution" id="ExtraCellularSpace/ExtraCellularSolution"
  glucose_2 [label="Glucose" id="ExtraCellularSpace/ExtraCellularSolution/Glucose"]
 }
 subgraph clustereukaryoticCell_3 { label="EukaryoticCell" id="ExtraCellularSpace/EukaryoticCell"
  subgraph clustercellMembrane_4 { label="CellMembrane" id="ExtraCellularSpace/EukaryoticCell/CellMembrane"
   cellBilayer_5 [label="CellBilayer" id="ExtraCellularSpace/EukaryoticCell/CellMembrane/CellBilayer"]
  }
  subgraph clustercytoplasm_6 { label="Cytoplasm" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm"
   subgraph clustercytosol_7 { label="Cytosol" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol"
    glucose_8 [label="Glucose" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Glucose"]
    glucose_6_Phosphate_9 [label="Glucose_6_Phosphate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Glucose_6_Phosphate"]
    fructose_6_Phosphate_10 [label="Fructose_6_Phosphate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Fructose_6_Phosphate"]
    fructose_1x6_Biphosphate_11 [label="Fructose_1x6_Biphosphate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Fructose_1x6_Biphosphate"]
    dihydroxyacetonePhosphate_12 [label="DihydroxyacetonePhosphate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/DihydroxyacetonePhosphate"]
    glyceraldehyde_3_Phosphate_13 [label="Glyceraldehyde_3_Phosphate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Glyceraldehyde_3_Phosphate"]
    x1x3_BisphosphoGlycerate_14 [label="X1x3_BisphosphoGlycerate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/X1x3_BisphosphoGlycerate"]
    x3_PhosphoGlycerate_15 [label="X3_PhosphoGlycerate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/X3_PhosphoGlycerate"]
    x2_PhosphoGlycerate_16 [label="X2_PhosphoGlycerate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/X2_PhosphoGlycerate"]
    phosphoEnolPyruvate_17 [label="PhosphoEnolPyruvate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/PhosphoEnolPyruvate"]
    pyruvate_18 [label="Pyruvate" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Cytosol/Pyruvate"]
   }
   hexokinase_19 [label="Hexokinase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Hexokinase"]
   phosphoGlucoIsomerase_20 [label="PhosphoGlucoIsomerase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/PhosphoGlucoIsomerase"]
   phosphoFructokinase_21 [label="PhosphoFructokinase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/PhosphoFructokinase"]
   aldolase_22 [label="Aldolase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Aldolase"]
   triosePhosphateIsomerase_23 [label="TriosePhosphateIsomerase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/TriosePhosphateIsomerase"]
   glyceraldehyde_3_phosphateDehydrogenase_24 [label="Glyceraldehyde_3_phosphateDehydrogenase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Glyceraldehyde_3_phosphateDehydrogenase"]
   phosphoGlycerokinase_25 [label="PhosphoGlycerokinase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/PhosphoGlycerokinase"]
   phosphoGlyceromutase_26 [label="PhosphoGlyceromutase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/PhosphoGlyceromutase"]
   enolase_27 [label="Enolase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/Enolase"]
   pyruvateKinase_28 [label="PyruvateKinase" id="ExtraCellularSpace/EukaryoticCell/Cytoplasm/PyruvateKinase"]
   hexokinase_19 -> glucose_8; hexokinase_19 -> glucose_6_Phosphate_9; phosphoGlucoIsomerase_20 -> glucose_6_Phosphate_9; phosphoGlucoIsomerase_20 -> fructose_6_Phosphate_10; phosphoFructokinase_21 -> fructose_6_Phosphate_10; phosphoFructokinase_21 -> fructose_1x6_Biphosphate_11; aldolase_22 -> fructose_1x6_Biphosphate_11; aldolase_22 -> glyceraldehyde_3_Phosphate_13; aldolase_22 -> dihydroxyacetonePhosphate_12; triosePhosphateIsomerase_23 -> dihydroxyacetonePhosphate_12; triosePhosphateIsomerase_23 -> glyceraldehyde_3_Phosphate_13; glyceraldehyde_3_phosphateDehydrogenase_24 -> glyceraldehyde_3_Phosphate_13; glyceraldehyde_3_phosphateDehydrogenase_24 -> x1x3_BisphosphoGlycerate_14; phosphoGlycerokinase_25 -> x1x3_BisphosphoGlycerate_14; phosphoGlycerokinase_25 -> x3_PhosphoGlycerate_15; phosphoGlyceromutase_26 -> x3_PhosphoGlycerate_15; phosphoGlyceromutase_26 -> x2_PhosphoGlycerate_16; enolase_27 -> x2_PhosphoGlycerate_16; enolase_27 -> phosphoEnolPyruvate_17; pyruvateKinase_28 -> phosphoEnolPyruvate_17; pyruvateKinase_28 -> pyruvate_18;
  }
  cellBilayer_5 -> glucose_8;
 }
 cellBilayer_5 -> glucose_2;
}
  ]]></Attribute_String>
  
  <Script><![CDATA[
const dotContent = this.prev().prev().text();
//this.println(dotContent.length);
const converter = new $wnd.xh.GraphvizToXholon();
const xholonXml = converter.convert(dotContent);
console.log(xholonXml);
this.parent().append(xholonXml);
//$wnd.xh.gviz2xh("CEO", "CTO"); // TODO do this and other ports automatically
this.prev().remove();
//# sourceURL=GvScript.js
  ]]></Script>
  
</GraphvizSystem>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Cluster</title>
    <rect id="GraphvizSystem/GraphvizSystem/Cluster" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>CEO</title>
      <rect id="GraphvizSystem/GraphvizSystem/Cluster/Node" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>