A few scrviz updates today, with more flexibility around the depth of the repo visualization and more options to enrich your own profile.

Less is more for visualization

We have a rapidly increasing number of repos on github, and vizualizing the tree for them all by default was becoming really hard work for the browser – there are now almost 9000 nodes. Here’s where we’re at with Apps Script github content indexed.

Because of this growing dataset, I’ve added the opportunity to increase or decrease the detail of the visualization, and by default it will now show it only to repo (as opposed to project) level.

Repo level

repo level

Project level

You’ll need to move down to project level in order to find the specific project, if you want to clone it. This used to be the default

Detail level

The highest level of detail includes advanced services, libraries, oauthscopes and various other items.

Switching between levels

It’s here, on the App bar

switching

 

and for convenience, you’ll also find it repeated on every info card.

 

Owner and repo profile extra customization

In Enrich your developer profile on scrviz I showed how scrviz could be used to show off your Apps Script work to potential clients (Showcase your Apps Script work and get hired via vizzy) and how to enrich your owner profile with custom data.  Enrich your scrviz repo profiles and drive traffic to your website or blog added the opportunitty to add rows of data to describe you and your repos. Now you can also add Tags to your repos and profile to summarize your experience and what your repo is about.

Here’s is my scrviz profile

https://scrviz.web.app/?owner=brucemcpherson

You’ll notice that in addition to the details taken from github, and the various rows of supplmentary data, I now have various tags in the profile, with links to various web sites and enrichment data. These tags are defined in my scrviz-profile.

The profile

You only have 1 scrviz profile to maintain. This covers not only your owner profile (see Enrich your developer profile on scrviz), but also each of the repos that you want to add enrichment data to. Here’s mine, with my owners profile, and a few repos described. I’ll be adding more over time. You’ll notice that the profile contains both rows and tags properties.

{
  "scrviz": {
    "owner": {
      "login": "brucemcpherson",
      "tags": [
        {
          "description": "gde",
          "link": "https://developers.google.com/community/experts/directory/profile/profile-bruce_mcpherson",
          "tip": "GDE since 2013 : G Suite and Identity",
          "icon": "mdi-code-tags",
          "visible": true
        },
        {
          "description": "author",
          "link": "https://www.oreilly.com/pub/au/6781",
          "tip": "Author of Going Gas - VBA to Apps Script",
          "icon": "mdi-book-education",
          "visible": true
        },
        {
          "description": "d3",
          "link": "https://ramblings.mcpher.com/d3-js/",
          "tip": "Vizualization with D3",
          "icon": "mdi-chart-bubble",
          "visible": true
        },
        {
          "description": "vuejs",
          "link": "https://ramblings.mcpher.com/vuejs-apps-script-add-ons/",
          "tip": "Vuejs and apps script",
          "icon": "mdi-vuejs",
          "visible": true
        },
        {
          "description": "gcp",
          "link": "https://ramblings.mcpher.com/gcp/",
          "tip": "google cloud platform",
          "icon": "mdi-cloud",
          "visible": true
        },
        {
          "description": "ml",
          "link": "https://ramblings.mcpher.com/gcp/",
          "tip": "machine learning",
          "icon": "mdi-school",
          "visible": true
        },
        {
          "description": "tu",
          "link": "https://sites.google.com/view/totallyunscripted/home",
          "tip": "occasional contributor to Totally Unscripted Show",
          "icon": "mdi-monitor-eye",
          "visible": true
        },
        {
          "description": "kube",
          "link": "https://ramblings.mcpher.com/gcp/getting-an-api-running-in-kubernetes/",
          "tip": "Kubernetes",
          "icon": "mdi-kubernetes",
          "visible": true
        },
        {
          "description": "graphql",
          "link": "https://ramblings.mcpher.com/snipgraphql/",
          "tip": "Apollo and GraphQL",
          "icon": "mdi-graphql",
          "visible": true
        }
      ],

      "rows": [
        {
          "description": "Creator of this app",
          "link": "https://ramblings.mcpher.com/vizzy-scrviz/",
          "tip": "All about scrviz",
          "icon": "scrviz",
          "visible": true
        },
        {
          "description": "Google developer expert",
          "link": "https://developers.google.com/community/experts/directory/profile/profile-bruce_mcpherson",
          "tip": "GDE since 2013 : G Suite and Identity",
          "icon": "mdi-code-tags",
          "visible": true
        },
        {
          "description": "O'reilly author",
          "link": "https://www.oreilly.com/pub/au/6781",
          "tip": "Author of Going Gas - VBA to Apps Script",
          "icon": "mdi-book-education",
          "visible": true
        },
        {
          "description": "Video channel",
          "link": "https://www.youtube.com/c/BruceMcpherson",
          "tip": "Bruce Mcpherson's Youtube channel",
          "icon": "youtube",
          "visible": true
        },
        {
          "description": "Linkedin Profile",
          "link": "https://www.linkedin.com/in/brucemcpherson",
          "tip": "Bruce Mcpherson's linkedin profile",
          "icon": "linkedin",
          "visible": true
        }
      ]
    },
    "repos": [
      {
        "repo": "bmPreFiddler",
        "rows": [
          {
            "description": "Handly helper for fiddler",
            "link": "https://ramblings.mcpher.com/vuejs-apps-script-add-ons/helper-for-fiddler/",
            "tip": "Wrapper library for fiddler:Abstracts sheet data - functional sheet processing",
            "icon": "appsscript",
            "visible": true
          }
        ]
      },
      {
        "repo": "GasWatcher",
        "rows": [
          {
            "description": "Watching for server side Sheet changes from the client html service",
            "link": "https://ramblings.mcpher.com/gassnippets2/watching-for-server-side-changes-from-the-client-html-service/",
            "tip": "client-side to react to changes in data (or indeed any property) as well as changes in selection and Activesheet.",
            "icon": "appsscript",
            "visible": true
          }
        ]
      },
      {
        "repo": "cUseful",
        "rows": [
          {
            "description": "Library compilation with many things too numnerous to list",
            "link": "https://ramblings.mcpher.com/gassnippets2/",
            "tip": "Check out the repo to see more",
            "icon": "appsscript",
            "visible": true
          }
        ]
      },
      {
        "repo": "bmVizzyCacheLibrarySheet",
        "rows": [
          {
            "description": "Vizzy cache example",
            "link": "https://ramblings.mcpher.com/vizzy-scrviz/vizzy-build-apps-script/",
            "tip": "Example building something in Apps Script with scrviz",
            "icon": "appsscript",
            "visible": true
          }
        ],
        "tags": [
          {
            "description": "Sheets",
            "tip": "Google sheets example",
            "icon": "sheets",
            "visible": true
          }
        ]
      },
      {
        "repo": "bmFiddler",
        "rows": [
          {
            "description": "Fiddler: Abstracts sheet data library",
            "link": "https://ramblings.mcpher.com/gassnippets2/afunctionalapproachtofiddlingwithsheetdata/",
            "tip": "Functional approach to fiddling with sheet data",
            "icon": "appsscript",
            "visible": true
          },
          {
            "description": "Fiddler Video: Abstracts sheet data library",
            "link": "https://www.youtube.com/watch?v=BGOvmV5PXJ0",
            "tip": "A video to get started with a functional approach to fiddling with sheet data",
            "icon": "youtube",
            "visible": true
          },
          {
            "description": "Fiddler: fingerprinting",
            "link": "https://ramblings.mcpher.com/vuejs-apps-script-add-ons/fiddler-fingerprint/",
            "tip": "Optimize sheet fiddling with a fingerprint to detect changes",
            "icon": "mdi-fingerprint",
            "visible": true
          },
          {
            "description": "Fiddler: rangelists",
            "link": "https://ramblings.mcpher.com/gassnippets2/fiddler-and-rangelists/",
            "tip": "formatting with fiddler",
            "icon": "mdi-format-paint",
            "visible": true
          }
        ]
      },
      {
        "repo": "cGoa",
        "rows": [
          {
            "description": "OAuth2 for Apps Script in a few lines of code",
            "link": "https://ramblings.mcpher.com/oauth2-for-apps-script-in-a-few-lines-of-code/",
            "tip": "Low setup oauth2 library for Apps Script",
            "icon": "appsscript",
            "visible": true
          },
          {
            "description": "How fast can you get OAuth2 set up in Apps Script?",
            "link": "https://ramblings.mcpher.com/oauth2-for-apps-script-in-a-few-lines-of-code/how-fast-can-you-get-oauth2-set-up-in-apps-script/",
            "tip": "Set up oauth2 from Apps Script to any service in under 15 minutes",
            "icon": "appsscript",
            "visible": true
          }
        ]
      }
    ]
  }
}
scrviz-profile.json

Where to put scrviz-profile.json

Anywhere in any public repo you own. It doesn’t have to be an Apps Script one. It’s probably better (but not mandatory) to keep it in its own repository – mine is here https://github.com/brucemcpherson/scrviz-profile

You must only have 1 scrviz-profile.json across all your repos, and the login property must match that of the repo owner.

Profile contents

The scrviz.owner property contains data to enrich your owner profile, and must be present before you can enrich repo profiles. At a minimum it needs the scrviz.owner.login set to the github owner of the repo in which it lives.

properties

name purpose
scrviz.owner.login this should match your github login name. It’s used to verify that the profile matches the owner who is hosting it and is mandatory
scrviz.owner.rows an array of rows – each one will render a row in the scrviz profile
scrviz.owner.tags an array of tags – each one will render a tag in the scrviz profile tag area

each row and tag can have these properties

all are optional (except visibile) and will be replaced by some approriate default value if not supplied.

name purpose
description the description. If there is a link present, this will be used as the text for the link
link an external link to some more info
tip a tooltip to display when hovering over the description
icon a material design icon to use to decorate this row. It take the format of, for example, mdi-linkedin. The full directory of icons is here https://materialdesignicons.com/
visible true/false – whether to show it in scrviz – this is mandatory. If not present the row won’t be shown. Think of it as agreeing to scrviz conditions

Copying links

For convenience, each row is wired up to be able to be copied to the clipboard if you click on the icon. If there is a link present it’ll copy that, otherwise it’ll copy the text

icons available for scrvizprofile

Any icon from material design icons site can be added to your scrviz-profile.json. These must be specified in full (including the ‘mdi-‘)

Any icon from material design icons site can be added to your scrviz-profile.json. These must be specified in full (including the ‘mdi-‘)

However, to preserve some kind of conformity across users, a set of short names is available and preferred. Here’s the list in no particular order. Many of these are also used in the app itself. If you’d like one added, let me know. Note that some are actually images rather than logos.

You’d use these like this

rows: [
{
...etc,
"icon": "youtube"
}
],

tags: [{ ...etc, "icon": "support" }],

Here’s the list – it’s maintained at https://github.com/brucemcpherson/gitvizzy

icon built in name
json
tags
excel
word
office
windows
youtube
linkedin
info
filter-off
filter-on
open
company
word
office
windows
youtube
linkedin
info
location
email
files
file
github
clasp
stats
webapp
access
viz-info
repos
libraries
twitter
maps
bio
fees
support
text
fees
hireable
hireable-off
text
followers
version
symbol
blog
id
auth
html
scrviz
phone
appsscript
drive
sheets
docs
calendar
gmail
slides
gcp

Tags and rows in repos

Repos can be decorated in exactly the same way by mentioning them in your profile. They can also have both tags and rows.

In this case I would like to draw traffic to my website, specifically a couple of articles about this repo, how to use it, and other stuff not necessarily in the readme in the repo.

Here’s how this scrviz repo profile at https://scrviz.web.app/?repo=brucemcpherson/cGoa looks now.

 

Links

App https://scrviz.web.app

Github https://github.com/brucemcpherson/gitvizzy

My profile https://github.com/brucemcpherson/scrviz-profile

My scrviz link https://scrviz.web.app?owner=brucemcpherson

Example scrviz repo link: https://scrviz.web.app/?repo=brucemcpherson/cGoa

 

All about scrviz