added circle and square markers, coloured tags

Notes.md

@@ -1,2 +1,61 @@
 # 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,6 +23,7 @@
 				"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"
 			}
@@ -3111,6 +3112,13 @@
 				"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,6 +22,7 @@
 		"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,6 +7,7 @@ export const load = async ({ fetch }) => {
     return {
         webservices: {
             technologies: webservicesData.technologies,
+            affiliates: webservicesData.affiliates,
             hosts: webservicesData.hosts
         }
     };

src/routes/+page.svelte

@@ -2,94 +2,129 @@
     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_status = [];
-        let future = {};
+        let current = [];
+        let future = [];
         // properties of technologies
-        let categories = [];
-        let analogues = [];
-        let licenses = [];
+        let category_list = [];
+        let analogue_list = [];
+        let license_list = [];
         // properties of instances
-        let statuses = [];
-        let affiliates = [];
+        let status_list = [];
+        let affiliate_list = [];
+        let host_list = [];
 
+        // actual objects
         let hosts = [];
+        let affiliates = [];
         //
         // just a trivial reassignment
         //let hosts = webservices.hosts;
         //
         // pull out relevant info in useful chunks.
-        webservices.technologies.forEach(function(tech, i) {
+        for (let key in webservices.technologies) {
+            let tech = webservices.technologies[key];
             if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
                 tech.categories.forEach(function(category, index) {
-                    if (categories.hasOwnProperty(category)) categories[category]++;
-                    else categories[category] = 1;
+                    if (category_list.hasOwnProperty(category)) category_list[category]++;
+                    else category_list[category] = 1;
                 });
             }
             if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
                 tech.analogues.forEach(function(analogue, index) {
-                    if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
-                    else analogues[analogue] = 1;
+                    if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
+                    else analogue_list[analogue] = 1;
                 });
             }
             if (tech.hasOwnProperty('license')) {
                 let license = tech.license;
-                if (licenses.hasOwnProperty(license)) licenses[license]++;
-                else licenses[license] = 1;
+                if (license_list.hasOwnProperty(license)) license_list[license]++;
+                else license_list[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 (statuses.hasOwnProperty(tag)) statuses[tag]++;
-                        else statuses[tag] = 1;
+                        if (status_list.hasOwnProperty(tag)) status_list[tag]++;
+                        else status_list[tag] = 1;
                     }
                     if (instance.hasOwnProperty('affiliation')) {
                         let tag = instance.affiliation;
-                        if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
-                        else affiliates[tag] = 1;
+                        if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
+                        else affiliate_list[tag] = 1;
                     }
                     if (instance.hasOwnProperty('host')) {
                         let tag = instance.host;
-                        if (hosts.hasOwnProperty(tag)) hosts[tag]++;
-                        else hosts[tag] = 1;
+                        if (host_list.hasOwnProperty(tag)) host_list[tag]++;
+                        else host_list[tag] = 1;
                     }
                 });
+            } else {
+                future[key] = tech;
             }
 
-        });
-        /*console.log('categories: ', categories);
-        console.log('analogues: ', analogues);
-        console.log('licenses: ', licenses);
-        console.log('statuses: ', statuses);
-        console.log('affiliates: ', affiliates);
-        console.log('hosts: ', hosts); */
+        };
+        for (let key in webservices.hosts) {
+            //console.log('key: ', key);
+            let host = webservices.hosts[key];
+            host['name'] = key;
+            //console.log('host: ', host);
+            if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
+                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_tags: {
-               categories: categories,
-               analogues: analogues,
-               licenses: licenses
+            tech_lists: {
+               category_list: category_list,
+               analogue_list: analogue_list,
+               license_list: license_list
             },
-            instance_tags: {
-                statuses: statuses,
-                affiliates: affiliates,
-                hosts: hosts
-            }
+            instance_lists: {
+                status_list: status_list,
+                affiliate_list: affiliate_list,
+                host_list: host_list
+            },
+            hosts: hosts,
+            affiliates: affiliates
         };
     }
 
 //    console.log(technologies);
     function hasInstances(tech) {
-        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
+        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true;
         return false;
     }
 
@@ -97,35 +132,82 @@
         let keys = [];
         for (let key in ob) {
             keys.push(key);
-            //console.log('pushing key ' + key);
         };
         return keys;
     }
 
-    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);*/
+    function toOxfordCommaString(arr) {
+        if (arr.length == 1) return arr;
+        else {
+            var last = arr.pop();
+            return arr.join(', ') + ', and ' + last;
+        }
+    }
 
-    const technologies = webservices.technologies;
-    //const hosts = webservices.hosts;
-    /*const categories = results.tech_tags.categories);
-    const analogues = results.tech_tags.analogues);
-    const licenses = results.tech_tags.licenses);
-    const statuses = results.instance_tags.statuses);
-    const affiliates = results.instance_tags.affiliates);
-    const hosts = results.instance_tags.hosts);*/
-    const categories = getKeys(results.tech_tags.categories);
-    //const categories = results.tech_tags.categories);
-    const analogues = getKeys(results.tech_tags.analogues);
-    const licenses = getKeys(results.tech_tags.licenses);
-    const statuses = getKeys(results.instance_tags.statuses);
-    const affiliates = getKeys(results.instance_tags.affiliates);
-    const hosts = getKeys(results.instance_tags.hosts);
+    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);
+
+    //const technologies = webservices.technologies;
+    const technologies = results.active_services;
+    //console.log(technologies);
+
+    const category_list = getKeys(results.tech_lists.category_list).sort();
+    const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
+    const license_list = getKeys(results.tech_lists.license_list).sort();
+    const status_list = getKeys(results.instance_lists.status_list).sort();
+    const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
+    const host_list = getKeys(results.instance_lists.host_list).sort();
+
+    const hosts = results.hosts;
+    //console.log('host_data: ', results.hosts);
+    const affiliates = results.affiliates;
+    //console.log('affiliate_data: ', results.affiliates);
+    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>
 
@@ -139,48 +221,29 @@
     </div>
     <div class="filters">
         <div class="tag-list tech">
-            <div class="tags tech categories">
-            {#each categories as category}
-                <span class="tag">{category}</span>
-            {/each}
-            </div>
+            <div class="tags tech categories">Categories: {#each category_list as category}<span class="tag category">{category}</span> {/each}</div>
+            <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
+            <div class="tags tech licenses">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
         </div>
         <div class="tag-list instance">
-            <div class="tags instance statuses">
-            {#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 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 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>
         </div>
     </div>
     <div class="tiles">
         {#each technologies as technology}
         <div class="tile technology">
             <h2><a href="{technology.website}">{technology.name}</a></h2>
-            <!--<p>{technology.description}</p>-->
+            {#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}
+            {#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">
-                <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 class="instances"><p>{#each technology.instances as instance}
+                <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>
             </div>
             {:else}
-            <div class="instances cell">
-                <ul class="instances">
-                    <li>Nothing here yet...</li>
-                </ul>
+            <div class="instances">
+                Nothing here yet...
             </div>
             {/if}
         </div>
@@ -191,39 +254,128 @@
 <style>
     .webservices {
         display: grid;
-        width: 90%;
+        width: 96%;
         margin: 0 auto 3em auto;
         padding: 0;
     }
     .summary {
     }
     .filters {
-    }
-    .filters .tags {
-        background-color: #f1ff94;
+        /*background-color: #f1ff94;
         padding: 0.5em;
         border: 3px solid #cbea77;
+        margin: 1em 0;*/
+        margin-bottom: 1em;
+    }
+    .filters .tags {
+        /*padding: 0.5em;*/
         margin: 1em 0;
+        display: block;
+    }
+    .tag-list {
+        white-space: normal;
+        word-break: normal;
+        display: inline;
     }
     .tag {
         font-size: 80%;
-        color: #777;
-        margin-right: 1em;
+        margin-right: 0.5em;
+        line-height: 2.5;
+        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 {
-        box-sizing: border-box;
-        box-shadow: 5px 5px 3px #71ba71;
+        height: 400px;
         min-width: 250px;
         max-width: 400px;
-        padding: 0.8em 1.2em;
         overflow: hidden;
+        box-sizing: border-box;
+        box-shadow: 5px 5px 3px #71ba71;
         border: solid 3px #1e6831;
-        background-color: #fff;
+        text-overflow: ellipsis;
+        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>