More scrviz updates to help you enrich your profile and repos

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

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

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-‘)

rows: [
{
    ...etc,
    "icon": "mdi-google-ads"
}
]

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.