Shiny Dashboard Inputs inside MenuItems Problems - shinydashboard

I am new to shiny dashboards and I am trying my hand at making a simple dashboard. I am trying to put together a dashboard that will basically go through different clustering algorithms and show how they work.
I have a menu item for the overall branching topic, and then input items within those menus that specify the parameters for the clustering algorithms.
My issue is I cannot get any output on my screen. I cannot render plots of even see the title for the boxes that I placed inside the tabItems. This seems to happen when I place a sub-item inside one of my menu items. I am not sure why.
Attached is my ui.R script and server.R script.
ui.R file:
server.R file:
Any help with this matter would be much appreciated.

So, as far as I can see, the problem is due to the fact that you placed the radioButtons within the menuItem. If you want to only show the radioButtons when the tab kclustering is active, you need to wrap radioButtons in a conditionalPanel. It would look something like that:
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Bla"),
dashboardSidebar(
sidebarMenu(
id = "tabs",
menuItem(
"K-clustering",
tabName = "kclustering",
icon = icon("cogs")),
conditionalPanel(
"input.tabs == 'kclustering'",
radioButtons("technique", "Technique Choice",
c("K-Means" = "kmeans",
"K-Medians" = "kmedians",
"K-Medoids" = "kmedoids"),
select = "kmedians")
),
menuItem("DBSCAN", tabName = "dbscan")
)
),
dashboardBody(
tabItems(
tabItem("kclustering",
fluidRow(
box(plotOutput("step1"))
))
)
))
server <- function(input, output) {
output$step1 <- renderPlot({
hist(rnorm(5000))
})
}
runApp(shinyApp(ui, server))
In this case, it's important to set the id argument of the sidebarMenu object to be able to formulate your condition.
Bottom line is: don't put your radioButtons, sliderInput and textInput inside the menuItem objects but in the sidebarMenu object itself.

Related

I am struggling to get a customized hovertemplate on plotly parcats chart

So I tried to put hovertemplate inside go.Parcats but not sure which way to put it. I want something like when you hover on any line it shuold show the custom discription like names of attributes and count and percentage on hover.
Also is there any wat to blank out those labels at the bottom of the chart so that it looks less busy and nicer but also when you hover on it shuold show up details. I know it's too much of customization but hoping it's doable.
dimensions.append(dict(values = df[dim], label = dim, categoryarray = df[dim].unique(), categoryorder = 'array', ticktext = slabel))
fig = go.Figure(data = [go.Parcats(dimensions= dimensions,
line = {'color': color, 'colorscale':colorscale,},
)]
)

vuejs: mounted issues with coordinates of elements and svg

I have three columns, two with divs and the central one with an svg. I made a method that calculate the top() of each paragraph inside the divs to get the position and then draw an arrow in the svg. The problem is that when I use that method the first time I open my component, I get all zeroes, probably because the paragraph aren't really drawn (they have no coordinates) yet. I tried in mounted(), which should be the right place to do that. I use it also in updated() in case I reload my json with new data.
Am I missing something trivial?
The code I use to get the coordinates is like this:
drawLine(index1, index2) {
//var plist1 = this.$refs['p_list1'];
//var plist2 = this.$refs['p_list2'];
var plist1 = document.getElementsByClassName('p_list1');
var plist2 = document.getElementsByClassName('p_list2');
if (plist1.length == 0 && plist2.length == 0) return;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'line');
//...
//const start = this.$refs['startpos'].getBoundingClientRect().top;
const start = document.getElementById('startpos').getBoundingClientRect().top;
const r1 = plist1[index1].getBoundingClientRect();
const r2 = plist2[index2].getBoundingClientRect();
index1 and index2 comes from a loop where I get which paragraph I have to connect with an arrow (also where the nextThick is)
Here is a simple example of the issue:
https://codesandbox.io/s/bootstrap-vue-test-bcozc
Note: it's badly shown, but if you press "DO" and then switch tab, you'll see that the arrow aren't correct. If you switch tab and then press DO, it will work.
Put your calculation methods in a $nextTick function to allow parents and children to fully render.
If that does not work, as a debug step, try using a setTimeout method to delay the calculation.
After understanding that the problem was linked to how tabs are built, I tried making that specific tab lazy and it worked.
<b-tab lazy ...
I don't know how tabs are normally built, but I suppose the dom is put together without having a real coordinate system and when it's made visible, I don't have any event to read to update the svg.

Cesium - Control over slider window on click of polygon

Is there any way to not show this slider(as in screenshot below) on click of few polygons but to show on click of few other polygons?
To simplify what I mean to say, suppose This slider should be shown on click of blue polygon but should not be shown when red polygon is clicked, but I want to keep the ids for both polygons.
There's an undocumented property [_enableInfoOrSelection][1] (note - this is a private property and is unsafe for production - use with care).
The code is:
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var shouldShow = true;
handler.setInputAction(function(click) {
viewer._enableInfoOrSelection = shouldShow;
shouldShow = !shouldShow;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Note the line that controls weather to show or not to show the info box:
viewer._enableInfoOrSelection = shouldShow;
You'd might want to do something smarter (like to remove the info box in case a new entity was clicked etc., but it's up to you :)).
Here's a working code:
http://plnkr.co/edit/Zb6fwNExkceAPpRyXnEw?p=preview

input dialog box blender

How to make a simple entry dialog box (like in the image) in blender and processing the text entered through python.I am unable to find any good tutorial on this.
For the dialog box the answer from how to show a message from a blender script? might be a starting point.
But I think a better approach is integrating input into the panel like e.g.
To do this you have to add a StringProperty to your add-on and place it inside your panel (see Addon Tutorial for more information). The basic steps are:
def draw(self, context) :
col = self.layout.column(align = True)
col.prop(context.scene, "my_string_prop")
...
def register() :
bpy.types.Scene.my_string_prop = bpy.props.StringProperty \
(
name = "My String",
description = "My description",
default = "default"
)
...
def unregister() :
del bpy.types.Scene.my_string_prop
...
You can access the string by context.scene.my_string_prop
There is another mode to integrate input. When you add for example a text to your scene you can change the parameters after the operator has been called and see the changes immediately:
Changing Location will move the newly created text object at another place. I haven't worked with this but it should be similar to the code above.

Need to scroll from clicked div to top of browser window. Not to top of document, using Isotope Jquery

Please take a look at my jsFiddle here
I am using jQuery Isotope plugin and I am having troubles using their itemPositionDataEnabled to be able to scroll from my clicked item to the top of whats currently visible in the browsers window.
With itemPositionDataEnabled I should be able to extract the x and y position of what ever item I'm requesting. However mine does nothing at all....
var $this = $(this),
scrollTop = $(window).scrollTop(),
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y,
distance = (itemPositionY - scrollTop);
$('html, body').stop().animate({
scrollTop: distance
}, 1000);
You have a plain and simple error in these two lines:
itemPosition = $this.data('isotope-item-position'),
itemPositionY = $this.itemPosition.y;
The second line should be:
itemPositionY = itemPosition.y;
Not sure if you're all the way there since it only seems to work on the way you want on the first click.
http://jsfiddle.net/EA8tM/90/