diff --git a/web_external/index.js b/web_external/index.js
index 8346233..429a728 100644
--- a/web_external/index.js
+++ b/web_external/index.js
@@ -89,8 +89,7 @@ const candelaData = Object.keys(candelaComponents).map(key => {
 
   if (component.options) {
     return {
-      name: key,
-      constructorFunction: component
+      name: key
     };
   } else {
     return null;
@@ -198,8 +197,8 @@ observeStore(next => {
   const vis = next.getIn(['vis', 'component']);
   const data = next.getIn(['dataset', 'data']);
   const matchings = next.get('matchings').toJS();
-  if (vis && data) {
-    visPanel.instantiate(vis, data, matchings);
+  if (vis) {
+    visPanel.instantiate(vis, data || [], matchings);
   }
 }, s => s.getIn(['vis', 'component']));
 
diff --git a/web_external/util/index.js b/web_external/util/index.js
index 715f31a..7e4a510 100644
--- a/web_external/util/index.js
+++ b/web_external/util/index.js
@@ -100,6 +100,13 @@ const gatherDatasetInfo = (item) => {
   };
 };
 
+const setItemMetadata = (itemId, metadata) => restRequest({
+  type: 'PUT',
+  path: `/item/${itemId}/metadata`,
+  data: JSON.stringify(metadata),
+  contentType: 'application/json'
+});
+
 const initializeNewProject = () => {
   const folder = projectFolder();
 
@@ -110,20 +117,12 @@ const initializeNewProject = () => {
       folderId: folder,
       name: 'Untitled Project'
     }
-  }).then(item => {
-    return restRequest({
-      type: 'PUT',
-      path: `/item/${item._id}/metadata`,
-      data: JSON.stringify({
-        dataset: null,
-        itemType: 'project',
-        matchings: [],
-        preferredWidgets: [],
-        visualizations: []
-      }),
-      contentType: 'application/json'
-    });
-  }).then(gatherProjectInfo);
+  }).then(item => setItemMetadata(item._id, {
+    dataset: null,
+    itemType: 'project',
+    matchings: null,
+    vis: null
+  })).then(gatherProjectInfo);
 };
 
 const updateProjectName = (projectId, name) => {
@@ -157,6 +156,7 @@ export {
   switchOverlay,
   gatherProjectInfo,
   gatherDatasetInfo,
+  setItemMetadata,
   initializeNewProject,
   userInformation,
   currentUser,
diff --git a/web_external/view/overlay/SelectVisDialog/index.js b/web_external/view/overlay/SelectVisDialog/index.js
index c6c1a02..8a2b080 100644
--- a/web_external/view/overlay/SelectVisDialog/index.js
+++ b/web_external/view/overlay/SelectVisDialog/index.js
@@ -5,9 +5,10 @@ import './index.styl';
 
 import { closeIcon,
          libraryIcon } from '~reslab/image/icon';
-
 import { store,
-         action } from '~reslab/redux';
+         action,
+         appMode } from '~reslab/redux';
+import { setItemMetadata } from '~reslab/util';
 
 class SelectVisDialog {
   initialize (selector) {
@@ -32,7 +33,16 @@ class SelectVisDialog {
       .append('div')
       .classed('circle-button', true)
       .on('click', d => {
-        console.log(d);
+        // Set the vis metadata on the appropriate project.
+        const state = store.getState();
+        const projectId = state.getIn(['project', 'id']);
+        setItemMetadata(projectId, {
+          vis: d.name
+        }).then(() => {
+          store.dispatch(action.setVis(d.name));
+          store.dispatch(action.setPanelTitle('vis', d.name));
+          store.dispatch(action.switchMode(appMode.project));
+        });
       });
 
     icon.append('img')