Notes.md

@@ -1,61 +1,2 @@
 # My notes...
 
-colours20 = {
-    "dimgray": "#696969",
-    "seagreen": "#2e8b57",
-    "darkred": "#8b0000",
-    "olive": "#808000",
-    "darkblue": "#00008b",
-    "maroon3": "#b03060",
-    "orangered": "#ff4500",
-    "orange": "#ffa500",
-    "lime": "#00ff00",
-    "mediumorchid": "#ba55d3",
-    "darksalmon": "#e9967a",
-    "aqua": "#00ffff",
-    "blue": "#0000ff",
-    "fuchsia": "#ff00ff",
-    "dodgerblue": "#1e90ff",
-    "palegoldenrod": "#eee8aa",
-    "laserlemon": "#ffff54",
-    "plum": "#dda0dd",
-    "palegreen": "#98fb98",
-    "lightskyblue": "#87cefa"
-}
-const colours20 = [ "#696969", "#2e8b57", "#8b0000", "#808000", "#00008b", "#b03060", "#ff4500", "#ffa500", "#00ff00", "#ba55d3", "#e9967a", "#00ffff", "#0000ff", "#ff00ff", "#1e90ff", "#eee8aa", "#ffff54", "#dda0dd", "#98fb98", "#87cefa" ];
-
-
-colours30 = {
-    "gray": "#808080",
-    "maroon2": "#7f0000",
-    "darkgreen": "#006400",
-    "olive": "#808000",
-    "darkslateblue": "#483d8b",
-    "darkcyan": "#008b8b",
-    "peru": "#cd853f",
-    "darkblue": "#00008b",
-    "purple2": "#7f007f",
-    "darkseagreen": "#8fbc8f",
-    "maroon3": "#b03060",
-    "red": "#ff0000",
-    "darkorange": "#ff8c00",
-    "lime": "#00ff00",
-    "darkviolet": "#9400d3",
-    "springgreen": "#00ff7f",
-    "crimson": "#dc143c",
-    "aqua": "#00ffff",
-    "deepskyblue": "#00bfff",
-    "blue": "#0000ff",
-    "lightcoral": "#f08080",
-    "greenyellow": "#adff2f",
-    "dodgerblue": "#1e90ff",
-    "laserlemon": "#ffff54",
-    "lightgreen": "#90ee90",
-    "lightblue": "#add8e6",
-    "deeppink": "#ff1493",
-    "mediumslateblue": "#7b68ee",
-    "violet": "#ee82ee",
-    "moccasin": "#ffe4b5"
-}
-
-const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];

package-lock.json

@@ -23,7 +23,6 @@
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"svelte": "^4.2.7",
-				"svelte-popover": "^2.0.8",
 				"vite": "^5.0.3",
 				"vitest": "^2.0.0"
 			}
@@ -3112,13 +3111,6 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
-		"node_modules/svelte-popover": {
-			"version": "2.0.8",
-			"resolved": "https://registry.npmjs.org/svelte-popover/-/svelte-popover-2.0.8.tgz",
-			"integrity": "sha512-Yvz4FpvvXc5aBGyIE/TlGlqULLKkcfc7N0MoaqNXHMRVXxla+sc7G1xSCCURP3VqP0nZ5cIyPWOLLWFXuJjTRA==",
-			"dev": true,
-			"license": "ISC"
-		},
 		"node_modules/svelte-preprocess": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.2.tgz",

package.json

@@ -22,7 +22,6 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
-		"svelte-popover": "^2.0.8",
 		"vite": "^5.0.3",
 		"vitest": "^2.0.0"
 	},

src/routes/+page.js

@@ -7,7 +7,6 @@ export const load = async ({ fetch }) => {
     return {
         webservices: {
             technologies: webservicesData.technologies,
-            affiliates: webservicesData.affiliates,
             hosts: webservicesData.hosts
         }
     };

src/routes/+page.svelte

@@ -2,129 +2,94 @@
     export let data;
     const { webservices } = data;
 
-    //console.log('orig:', webservices);
-    //console.log('orig affiliates:', webservices.affiliates);
-    //console.log('orig hosts:', webservices.hosts);
-
-    // source: https://mokole.com/palette.html 20 colors with default settings otherwise
-    const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
-
     function processData(webservices) {
         let instances = 0;
-        let current = [];
+        let current = {};
-        let future = [];
+        let current_status = [];
+        let future = {};
         // properties of technologies
-        let category_list = [];
+        let categories = [];
-        let analogue_list = [];
+        let analogues = [];
-        let license_list = [];
+        let licenses = [];
         // properties of instances
-        let status_list = [];
+        let statuses = [];
-        let affiliate_list = [];
-        let host_list = [];
-
-        // actual objects
-        let hosts = [];
         let affiliates = [];
+
+        let hosts = [];
         //
         // just a trivial reassignment
         //let hosts = webservices.hosts;
         //
         // pull out relevant info in useful chunks.
-        for (let key in webservices.technologies) {
+        webservices.technologies.forEach(function(tech, i) {
-            let tech = webservices.technologies[key];
             if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
                 tech.categories.forEach(function(category, index) {
-                    if (category_list.hasOwnProperty(category)) category_list[category]++;
+                    if (categories.hasOwnProperty(category)) categories[category]++;
-                    else category_list[category] = 1;
+                    else categories[category] = 1;
                 });
             }
             if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
                 tech.analogues.forEach(function(analogue, index) {
-                    if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
+                    if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
-                    else analogue_list[analogue] = 1;
+                    else analogues[analogue] = 1;
                 });
             }
             if (tech.hasOwnProperty('license')) {
                 let license = tech.license;
-                if (license_list.hasOwnProperty(license)) license_list[license]++;
+                if (licenses.hasOwnProperty(license)) licenses[license]++;
-                else license_list[license] = 1;
+                else licenses[license] = 1;
             }
 
             if (hasInstances(tech)) {
-                tech['name'] = key;
-                current.push(tech);
                 //console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                 tech.instances.forEach(function(instance, i) {
                     instances++;
                     if (instance.hasOwnProperty('status')) {
                         let tag = instance.status;
-                        if (status_list.hasOwnProperty(tag)) status_list[tag]++;
+                        if (statuses.hasOwnProperty(tag)) statuses[tag]++;
-                        else status_list[tag] = 1;
+                        else statuses[tag] = 1;
                     }
                     if (instance.hasOwnProperty('affiliation')) {
                         let tag = instance.affiliation;
-                        if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
+                        if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
-                        else affiliate_list[tag] = 1;
+                        else affiliates[tag] = 1;
                     }
                     if (instance.hasOwnProperty('host')) {
                         let tag = instance.host;
-                        if (host_list.hasOwnProperty(tag)) host_list[tag]++;
+                        if (hosts.hasOwnProperty(tag)) hosts[tag]++;
-                        else host_list[tag] = 1;
+                        else hosts[tag] = 1;
                     }
                 });
-            } else {
-                future[key] = tech;
             }
 
-        };
+        });
-        for (let key in webservices.hosts) {
+        /*console.log('categories: ', categories);
-            //console.log('key: ', key);
+        console.log('analogues: ', analogues);
-            let host = webservices.hosts[key];
+        console.log('licenses: ', licenses);
-            host['name'] = key;
+        console.log('statuses: ', statuses);
-            //console.log('host: ', host);
+        console.log('affiliates: ', affiliates);
-            if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
+        console.log('hosts: ', hosts); */
-                hosts[key] = host;
-            }
-        }
-        //console.log('webservices.affiliates: ', webservices.affiliates);
-        for (let key in webservices.affiliates) {
-            //console.log('key: ', key);
-            let affiliate = webservices.affiliates[key];
-            //console.log('affiliate assignment: ', affiliate);
-            affiliates[key] = affiliate;
-           // if (affiliate.hasOwnProperty('name')) {
-               // affiliate_data[key] = affiliate;
-           // }
-        }
-        //console.log('categories: ', categories);
-        //console.log('analogues: ', analogues);
-        //console.log('licenses: ', licenses);
-        //console.log('statuses: ', statuses);
-        //console.log('affiliates: ', affiliates);
-        //console.log('hosts: ', hosts);
 
         return {
             total_instances: instances,
             active_services: current,
             candidate_services: future,
-            tech_lists: {
+            tech_tags: {
-               category_list: category_list,
+               categories: categories,
-               analogue_list: analogue_list,
+               analogues: analogues,
-               license_list: license_list
+               licenses: licenses
             },
-            instance_lists: {
+            instance_tags: {
-                status_list: status_list,
+                statuses: statuses,
-                affiliate_list: affiliate_list,
+                affiliates: affiliates,
-                host_list: host_list
+                hosts: hosts
-            },
+            }
-            hosts: hosts,
-            affiliates: affiliates
         };
     }
 
 //    console.log(technologies);
     function hasInstances(tech) {
-        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true;
+        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
         return false;
     }
 
@@ -132,82 +97,35 @@
         let keys = [];
         for (let key in ob) {
             keys.push(key);
+            //console.log('pushing key ' + key);
         };
         return keys;
     }
 
-    function toOxfordCommaString(arr) {
-        if (arr.length == 1) return arr;
-        else {
-            var last = arr.pop();
-            return arr.join(', ') + ', and ' + last;
-        }
-    }
-
-    function hostColours(host_list, colours, hosts) {
-        let host_array = {};
-        let i = 0;
-
-        //console.log('hosts:', hosts);
-
-        host_list.forEach(function(host) {
-            //console.log(host);
-            if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
-                host_array[host] = {
-                    "colour": colours[i++],
-                    "domain": hosts[host].domain,
-                    "affiliation": hosts[host].affiliation
-                }
-            }
-        });
-        return host_array;
-    }
-
-    function affiliateColours(affiliate_list, colours, affiliates) {
-        let affiliate_array = {};
-        let i = 0;
-
-        //console.log('affiliates:', affiliates);
-
-        for (const affiliate of affiliate_list) {
-            //console.log('affiliate:', affiliate);
-            if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) {
-                affiliate_array[affiliate] = {
-                    "colour": colours[i++],
-                    "name": affiliates[affiliate].name,
-                    "website": affiliates[affiliate].website
-                }
-            }
-        }
-        return affiliate_array;
-    }
-
-
     const results = processData(webservices);
    // console.log('results: ', results);
+    /*console.log('stats = ' + results.total_instances);
+    console.log('tech_tags: ', results.tech_tags);
+    console.log('instance_tags: ', results.instance_tags);*/
 
-    //const technologies = webservices.technologies;
+    const technologies = webservices.technologies;
-    const technologies = results.active_services;
+    //const hosts = webservices.hosts;
-    //console.log(technologies);
+    /*const categories = results.tech_tags.categories);
-
+    const analogues = results.tech_tags.analogues);
-    const category_list = getKeys(results.tech_lists.category_list).sort();
+    const licenses = results.tech_tags.licenses);
-    const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
+    const statuses = results.instance_tags.statuses);
-    const license_list = getKeys(results.tech_lists.license_list).sort();
+    const affiliates = results.instance_tags.affiliates);
-    const status_list = getKeys(results.instance_lists.status_list).sort();
+    const hosts = results.instance_tags.hosts);*/
-    const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
+    const categories = getKeys(results.tech_tags.categories);
-    const host_list = getKeys(results.instance_lists.host_list).sort();
+    //const categories = results.tech_tags.categories);
-
+    const analogues = getKeys(results.tech_tags.analogues);
-    const hosts = results.hosts;
+    const licenses = getKeys(results.tech_tags.licenses);
-    //console.log('host_data: ', results.hosts);
+    const statuses = getKeys(results.instance_tags.statuses);
-    const affiliates = results.affiliates;
+    const affiliates = getKeys(results.instance_tags.affiliates);
-    //console.log('affiliate_data: ', results.affiliates);
+    const hosts = getKeys(results.instance_tags.hosts);
-    const host_colours = hostColours(host_list, colours30, hosts);
-    //console.log('host_colours:', host_colours);
-    const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
-    //console.log('affiliate_colours:',affiliate_colours);
 
     //console.log('categories array: ', results.tech_tags.categories);
-    //console.log('categories keys: ', categories);
+    console.log('categories keys: ', categories);
 
 </script>
 
@@ -221,29 +139,48 @@
     </div>
     <div class="filters">
         <div class="tag-list tech">
-            <div class="tags tech categories">Categories: {#each category_list as category}<span class="tag category">{category}</span> {/each}</div>
+            <div class="tags tech categories">
-            <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
+            {#each categories as category}
-            <div class="tags tech licenses">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
+                <span class="tag">{category}</span>
+            {/each}
+            </div>
         </div>
         <div class="tag-list instance">
-            <div class="tags instance statuses">Statuses: {#each status_list as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">Affiliates: {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span> {/each}</div>
+            <div class="tags instance statuses">
-            <div class="tags instance hosts">Hosts: {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span> {/each}</div>
+            {#each statuses as status}
+                <span class="tag">{status}</span>
+            {/each}
+            </div>
+            <div class="tags instance affiliates">
+            {#each affiliates as affiliate}
+                <span class="tag">{affiliate}</span>
+            {/each}
+            </div>
+            <div class="tags instance hosts">
+            {#each hosts as host}
+                <span class="tag">{host}</span>
+            {/each}
+            </div>
         </div>
     </div>
     <div class="tiles">
         {#each technologies as technology}
         <div class="tile technology">
             <h2><a href="{technology.website}">{technology.name}</a></h2>
-            {#if (technology.license)}<p class="license" title="The libre license for this project is {technology.license}">License: <span class="value">{technology.license}</span></p>{/if}
+            <!--<p>{technology.description}</p>-->
-            {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
-            <p class="description">{technology.description}</p>
             {#if hasInstances(technology)}
-            <div class="instances"><p>{#each technology.instances as instance}
+            <div class="instances">
-                <a href="https://{instance.domain}" title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"></span></a>{/each}</p>
+                <ul class="instances">
+                    {#each technology.instances as instance}
+                    <li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
+                    {/each}
+                </ul>
             </div>
             {:else}
-            <div class="instances">
+            <div class="instances cell">
-                Nothing here yet...
+                <ul class="instances">
+                    <li>Nothing here yet...</li>
+                </ul>
             </div>
             {/if}
         </div>
@@ -254,128 +191,39 @@
 <style>
     .webservices {
         display: grid;
-        width: 96%;
+        width: 90%;
         margin: 0 auto 3em auto;
         padding: 0;
     }
     .summary {
     }
     .filters {
-        /*background-color: #f1ff94;
-        padding: 0.5em;
-        border: 3px solid #cbea77;
-        margin: 1em 0;*/
-        margin-bottom: 1em;
     }
     .filters .tags {
-        /*padding: 0.5em;*/
+        background-color: #f1ff94;
+        padding: 0.5em;
+        border: 3px solid #cbea77;
         margin: 1em 0;
-        display: block;
-    }
-    .tag-list {
-        white-space: normal;
-        word-break: normal;
-        display: inline;
     }
     .tag {
         font-size: 80%;
-        margin-right: 0.5em;
+        color: #777;
-        line-height: 2.5;
+        margin-right: 1em;
-        padding: 6px 8px;
-        border-radius: 14px;
-        white-space: nowrap;
-        word-break: keep-all;
-    }
-    .tag:after { content: "\00a0"; }
-    .tag.category {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.license {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.status {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.affiliate {
-        background-color: #fff;
-        color: #000;
-    }
-    .tag.host {
-        background-color: #fff;
-        color: #000;
     }
     .tiles {
         display: grid;
         grid-gap: 15px;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
-    /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
     .tile {
-        height: 400px;
-        min-width: 250px;
-        max-width: 400px;
-        overflow: hidden;
         box-sizing: border-box;
         box-shadow: 5px 5px 3px #71ba71;
+        min-width: 250px;
+        max-width: 400px;
+        padding: 0.8em 1.2em;
+        overflow: hidden;
         border: solid 3px #1e6831;
-        text-overflow: ellipsis;
+        background-color: #fff;
-        overflow: hidden;
-        position: relative;
-    }
-    .tile h2 {
-        background-color: #999;
-        text-align: center;
-        padding: 0.5em;
-        margin: 0;
-    }
-    .tile h2 a { color: #e6c4fc; }
-    .tile h2 a:visited { color: #ced0ff; }
-    .tile h2 a:hover { color: #fff; }
-    .tile .description {
-        height: 200px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .tile p {
-        padding: 0 1em 0.2em 1em;
-        font-size: 80%;
-        color: #555;
-    }
-    .instances {
-        background-color: #eee;
-        position: absolute;
-        bottom: 0;
-        height: 3em;
-        width: 100%;
-    }
-    .instances .marker {
-        margin-right: 3px;
     }
     .webservices li { list-style-type: none; }
-    .value { font-weight: bold; color: #000; }
-    .marker { vertical-align: middle; }
-    .triangle {
-        --side-size: 20px;
-        border-left: var(--side-size) solid transparent;
-        border-right: var(--side-size) solid transparent;
-        border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
-        border-top: var(--side-size) solid transparent;
-        display: inline-block;
-    }
-    .circle {
-        height: 20px;
-        width: 20px;
-        background-color: #555;
-        border-radius: 50%;
-        display: inline-block;
-    }
-    .square {
-        height: 20px;
-        width: 20px;
-        background-color: #555;
-        display: inline-block;
-    }
 </style>